Magento – Set position or order of a new tab on the product detail page in Magento2

magento2product-pagetabs

I am adding an alternate reviews tab to the product detail page, and I have the tab appearing, but it always renders as the first tab in the list, the leftmost. I'd like it to be at the end, after (or in place of) the standard Reviews tab.

<referenceBlock name="product.info.details">
    <block class="My\Module\Block\Reviews" name="my.reviews.tab" as="my_reviews" template="My_Module::reviews.phtml" group="detailed_info">
        <arguments>
            <argument translate="true" name="title" xsi:type="string">Reviews</argument>
        </arguments>
    </block>
</referenceBlock>

I've dug around in the mage-catalog and mage-reviews code, but I can't find an argument I can pass to change this.

Best Answer

You can just change inside details.phtml template file and set as per your requirement tabbing order,

set details.phtml file inside your theme folder,

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

Code for details.phtml file,

<?php
/**
 * Copyright © 2016 Magento. All rights reserved.
 * See COPYING.txt for license details.
 */

// @codingStandardsIgnoreFile

?>
<?php if ($detailedInfoGroup = $block->getGroupChildNames('detailed_info', 'getChildHtml')):?>
    <?php $newOrderTabbing = array('product.info.description','reviews.tab','product.attributes'); //custom add ?>
    <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):?>
                <?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; ?>

After adding above code now review tab display after details tab. Finally Tab orders are display like Details, Review, More Information.

You can change order by setting in

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

Thanks.

Related Solutions

Magento – Don’t show the Product Detail Tab if empty (product detail)

The code in tabs.phtml looks like this:

<ul class="product-tabs">
    <?php foreach ($this->getTabs() as $_index => $_tab): ?>
        <?php if($this->getChildHtml($_tab['alias'])): ?>
            <li id="product_tabs_<?php echo $_tab['alias'] ?>" class="<?php echo !$_index?' active first':(($_index==count($this->getTabs())-1)?' last':'')?>"><a href="#"><?php echo $_tab['title']?></a></li>
        <?php endif; ?>
    <?php endforeach; ?>
</ul>
<?php foreach ($this->getTabs() as $_index => $_tab): ?>
    <?php if($this->getChildHtml($_tab['alias'])): ?>
        <div class="product-tabs-content" id="product_tabs_<?php echo $_tab['alias'] ?>_contents"><?php echo $this->getChildHtml($_tab['alias']) ?></div>
    <?php endif; ?>
<?php endforeach; ?>

So if a tab content is empty then the tab is not shown.
Either you have a different code, or your tab content is not empty. It may contain something like <div></div> or something like that.
In this case you can change the if statement to remove your tags.
Maybe something like this:

<ul class="product-tabs">
    <?php foreach ($this->getTabs() as $_index => $_tab): ?>
        <?php if(trim(strip_tags($this->getChildHtml($_tab['alias'])))): ?>
            <li id="product_tabs_<?php echo $_tab['alias'] ?>" class="<?php echo !$_index?' active first':(($_index==count($this->getTabs())-1)?' last':'')?>"><a href="#"><?php echo $_tab['title']?></a></li>
        <?php endif; ?>
    <?php endforeach; ?>
</ul>
<?php foreach ($this->getTabs() as $_index => $_tab): ?>
    <?php if(trim(strip_tags($this->getChildHtml($_tab['alias'])))): ?>
        <div class="product-tabs-content" id="product_tabs_<?php echo $_tab['alias'] ?>_contents"><?php echo $this->getChildHtml($_tab['alias']) ?></div>
    <?php endif; ?>
<?php endforeach; ?>

Magento Product Page – How to Move Review Tab on Product Page

Try this way:

Go to your theme/layout/review.xml.

Now, find

<catalog_product_view>
        <reference name="product.info">
            <block type="review/product_view_list" name="product.reviews" as="reviews" template="review/product/view/list.phtml" after="additional">
                <action method="addToParentGroup"><group>detailed_info</group></action>
                <action method="setTitle" translate="value"><value>Reviews</value></action>
            </block>
        </reference>
    </catalog_product_view>

and change <action method="addToParentGroup"><group>detailed_info</group></action> to

<action method="addToParentGroup"><group>review_info</group></action>

See we are just replacing detailed_info to review_info.

Then go to your theme/template/catalog/view.phtml and add following code after that description code:

<div class="product-collateral toggle-content tabs">
        <?php if ($review = $this->getChildGroup('review_info', 'getChildHtml')):?>
            <dl id="collateral-tabs" class="collateral-tabs">
                <?php foreach ($review as $alias => $html):?>
                    <dt class="tab"><span><?php echo $this->escapeHtml($this->getChildData($alias, 'title')) ?></span></dt> 
                    <dd class="tab-container">
                        <div class="tab-content"><?php echo $html ?></div>
                    </dd>
                <?php endforeach;?>
            </dl>
        <?php endif; ?>
    </div>

I haven't tested, but should work.

Good luck.

Best Answer

Related Solutions

Magento – Don’t show the Product Detail Tab if empty (product detail)

Magento Product Page – How to Move Review Tab on Product Page

Related Topic