Add the product info detail tab in the product page hyva theme (same as default magento)
Add a comment
|
2 Answers
Check these examples here
Extend Magento_Catalog::catalog_product_view.xml:
<body>
<referenceBlock name="product.info.details">
<container name="tabs.switcher" htmlTag="div" htmlClass="flex" />
<container name="tabs.elements" />
</referenceBlock>
<!-- move the elements inside the tabs -->
<!-- example: -->
<move element="description" destination="tabs.elements" before="-" />
<!-- set a custom identifier for the tabs -->
<referenceBlock name="description">
<arguments>
<argument name="tab_id" xsi:type="string">0</argument>
</arguments>
</referenceBlock>
<!-- set the button text -->
<referenceContainer name="tabs.switcher">
<block template="Magento_Catalog::/view/sections/tabs/labels.phtml">
<arguments>
<argument name="tab_id" xsi:type="string">0</argument>
<argument name="tab_label" xsi:type="string">Description</argument>
</arguments>
</block>
</referenceContainer>
</body>
Create Magento_Catalog::/view/sections/tabs/labels.phtml:
<?php
$tabId = $block->getData('tab_id');
$tabLabel = $block->getData('tab_label');
?>
<label @click="activeTab = <?= $tabId ?>"
class="tab-control"
:class="{ 'active': activeTab === <?= $tabId ?> }"
>
<?= $tabLabel ?>
</label>
Finally, you would need to update the main Block Magento_Catalog::product/view/sections/product-sections.phtml:
Add the Alpine initializer to the outer div:
x-data="{ activeTab: 0 }"
Add the new containers for the tabs buttons and the tabs inside the div:
<?= $block->getChildHtml('tabs.switcher') ?>
<?php $tabs = $block->getLayout()->getChildBlocks('tabs.elements') ?>
<?php foreach ($tabs as $tab): ?>
<div x-show.transition.in.opacity.duration.600="activeTab === <?= $tab->getData('tab_id') ?>">
<?= $tab->toHtml() ?>
</div>
<?php endforeach; ?>
- Please note that the above code is not tested and requires clean up & escaping
2.Extend Hyva-default/Magento_Catalog/templates/product/view/sections/product-sections.phtml
getGroupSortedChildNames('detailed_info_hyva', 'getChildHtml'); ?><?php $layout = $block->getLayout(); ?>
<div class="product info detailed" x-data="{ activeTab: '<?= $block->escapeHtmlAttr($layout->getElementAlias($detailedInfoGroup[0])) ?>' }">
<div class="product data items inline-flex gap-4 mb-4">
<?php foreach ($detailedInfoGroup as $name): ?>
<?php
$alias = $layout->getElementAlias($name);
$label = $block->getChildData($alias, 'title');
?>
<div class="data item title"
data-role="collapsible"
x-bind="{ 'active': activeTab === '<?= $block->escapeHtmlAttr($alias) ?>' }"
@click="activeTab = (activeTab === '<?= $block->escapeHtmlAttr($alias) ?>') ? false : '<?= $block->escapeHtmlAttr($alias) ?>'">
<a class="data switch"
tabindex="-1"
data-toggle="trigger"
href="#<?= $block->escapeUrl($alias) ?>"
id="tab-label-<?= $block->escapeHtmlAttr($alias) ?>-title">
<?= /* @noEscape */ $label ?>
</a>
</div>
<?php endforeach; ?>
</div>
<?php foreach ($detailedInfoGroup as $name): ?>
<?php
$html = $layout->renderElement($name);
if (!$html || !trim($html)) {
continue;
}
$alias = $layout->getElementAlias($name);
?>
<div class="data item content"
aria-labelledby="tab-label-<?= $block->escapeHtmlAttr($alias) ?>-title"
id="<?= $block->escapeHtmlAttr($alias) ?>"
data-role="content"
x-show="activeTab === '<?= $block->escapeHtmlAttr($alias) ?>'">
<?= /* @noEscape */ $html ?>
</div>
<?php endforeach; ?>
</div>
