3

I have created a custom tab on Magento 2 product page. The custom tab appears at the left side but I want it after detail and review tabs like Details - | - Reviews - | - Custom Tab

Catalog_product_view.xml

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<body>
<referenceBlock name="product.info.details">
<block class="Magento\Catalog\Block\Product\View" name="tab.tab" template="Deno_Mymodule::extra_tab.phtml" group="detailed_info">
<arguments>
<argument translate="true" name="title" xsi:type="string">Extra Tab</argument>
</arguments>
</block>
</referenceBlock>
</body>
</page>
  • Try something like this: magento.stackexchange.com/questions/101960/… Key here is find names of block you want to move and destination block, and then add proper line in layout xml, which will move the block. Do you want to make it for custom theme of your store? – Bartosz Kubicki Apr 19 '17 at 8:09
  • I have edit the question, please check it. Thanks! – Syed Muneeb Ul Hasan Apr 19 '17 at 8:29
  • first of all - change your xml name for catalog_product_view.xml (lowercased) – Bartosz Kubicki Apr 19 '17 at 9:53
  • @SyedMuneebUlHasan have you moved your custom tab? – Hafiz Arslan Sep 25 at 8:23
1

If I were you I would consider changing class of your custom block, because you use some existing- block's class - so if you would like to add some more methods to you block class you will have to override magento native class, what is not recommended.

In case, that your tab should be something completely new I would make it with another class inheriting maybe, after Magento\Catalog\Block\Product\View.

Now something about placing your tab - take a look at vendor/magento/module-catalog/view/frontend/layout/catalog_product_view.xml:46 - you have a line:

<block class="Magento\Catalog\Block\Product\View" name="product.info.review" template="product/view/review.phtml" after="product.info.stock.sku" />

which has name of block, you want your custom one to be after (attribute name). Copy that name and add to your xml it like:

<block class="Magento\Catalog\Block\Product\View" name="tab.tab" template="Deno_Mymodule::extra_tab.phtml" group="detailed_info" after=""product.info.review">.

Although I don't have full code of yours, so I can't test it, please try it and write about results in comment.

0

Well, I have changed the position of tabs by the details.phtml file: (app/design/frontend/Nameplace/Themename/Magento_Catalog/templates/product/view/details.phtml )

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

We can use sort_order argument in

"app/design/frontend/Packagename/themename/Magento_Catalog/layout/catalog_product_view.xml"

 <referenceBlock name="product.info.details">
    <block class="Magento\Catalog\Block\Product\View" name="tab.tab" 
    template="Deno_Mymodule::extra_tab.phtml" group="detailed_info">
    <arguments>
    <argument translate="true" name="title" xsi:type="string">Extra Tab</argument>  
    <argument name="sort_order" xsi:type="string">30</argument>
    </arguments>
    </block>
    </referenceBlock>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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