0

I had few tabs in product detailed page and I want to show those tabs in order like Details, Key Specifications, contents Of Package, More Information, Warranty, Reviews i didnt write any code and i add extra tabs from amin panel For reference please find the attached image enter image description here enter image description here

1

3 Answers 3

0
app/design/frontend/Packagename/themename/Magento_Catalog/templates/product/view/details.phtml

Inside this file, you can fetch all tabs name using, print_r($detailedInfoGroup) you have to get value like,

Array
(
    [0] => product.info.description
    [1] => product.attributes
    [2] => reviews.tab
)

You have to set according to your requirement in new array before foreach in file,

<?php $newOrderTabbing = array('product.info.description',,'reviews.tab','product.attributes'); //custom add ?>

add <?php foreach ($newOrderTabbing as $name):?>

Complete code in details.phtml is like below,

<?php if ($detailedInfoGroup = $block->getGroupChildNames('detailed_info', 'getChildHtml')):?>
    <?php $newOrderTabbing = array('product.info.description','reviews.tab','product.attributes'); //custom added position ?>
    <div class="product info detailed">
        <?php $layout = $block->getLayout(); ?>
        <div class="product data items" data-mage-init='{"tabs":{"openedState":"active"}}'>
            <?php foreach ($newOrderTabbing as $name): //custom arrayname?>
                <?php
                    $html = $layout->renderElement($name);
                    if (!trim($html)) {
                        continue;
                    }
                    $alias = $layout->getElementAlias($name);
                    $label = $block->getChildData($alias, 'title');
                ?>
                <div class="data item title"
                     aria-labeledby="tab-label-<?php /* @escapeNotVerified */ echo $alias;?>-title"
                     data-role="collapsible" id="tab-label-<?php /* @escapeNotVerified */ echo $alias;?>">
                    <a class="data switch"
                       tabindex="-1"
                       data-toggle="switch"
                       href="#<?php /* @escapeNotVerified */ echo $alias; ?>"
                       id="tab-label-<?php /* @escapeNotVerified */ echo $alias;?>-title">
                        <?php /* @escapeNotVerified */ echo $label; ?>
                    </a>
                </div>
                <div class="data item content" id="<?php /* @escapeNotVerified */ echo $alias; ?>" data-role="content">
                    <?php /* @escapeNotVerified */ echo $html; ?>
                </div>
            <?php endforeach;?>
        </div>
    </div>
<?php endif; ?>

hope its work for you

4
  • Is this a correct approach? if you can do the resequencing in XML, why we need to do reprogramming in phtml file? please throw some light, might be I am assuming wrong. Aug 23, 2019 at 5:50
  • how to find the tab names Aug 23, 2019 at 7:50
  • where can i find this Array ( [0] => product.info.description [1] => product.attributes [2] => reviews.tab ) Aug 23, 2019 at 7:59
  • goto app/design/frontend/Packagename/themename/Magento_Catalog/templates/product/view/details.phtml path and print_r($detailedInfoGroup); Aug 23, 2019 at 9:14
0

Copy "catalog_product_view.xml" in your Magento_Catalog module in your theme and look for XML section

class="Magento\Catalog\Block\Product\View\Details" name="product.info.details"

This contains all the tabs like description, more information etc. You can change the sequence here. Just lift the sections up and down for re-sequencing and set their sort_order accordingly.

<argument name="sort_order" xsi:type="string">5</argument>
2
  • in my theme file i had catalog_product_view.xml but this class product.info.details is not available Aug 23, 2019 at 8:14
  • Copy it from vendor/magento/module-catalog/view/layout/catalog_product_view.xml file. It will work. Aug 23, 2019 at 8:37
0

In Magento 2.3.X, we can use sort_order argument in Magento_Catalog/layout/catalog_product_view.xml xml config as described below:

<referenceBlock name="product.info.description">
    <arguments>
        <argument name="title" translate="true" xsi:type="string">Description</argument>
        <argument name="sort_order" xsi:type="string">20</argument>
    </arguments>
</referenceBlock>

Reference from Magento2 : Change order of Tabs on Product Page

Hope this will help.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.