6

I am trying to inject my custom product tab in storefront on product view page, but it's not displaying. For this I am written below code.

registration.php

<?php
\Magento\Framework\Component\ComponentRegistrar::register(
    \Magento\Framework\Component\ComponentRegistrar::MODULE,
    'Test_ProductTabs',
    __DIR__
);

Test/ProductTabs/Block/CustomTab.php

<?php
namespace Test\ProductTabs\Block;

use Magento\Catalog\Model\Product;

class CustomTab extends \Magento\Framework\View\Element\Template{

    /**
     * @var Product
     */
    protected $_product = null;

    /**
     * Core registry
     *
     * @var \Magento\Framework\Registry
     */
    protected $_coreRegistry = null;

    /**
     * @param \Magento\Framework\View\Element\Template\Context $context
     * @param \Magento\Framework\Registry $registry
     * @param array $data
     */
    public function __construct(
        \Magento\Framework\View\Element\Template\Context $context,
        \Magento\Framework\Registry $registry,
        array $data = []
    ) {
        $this->_coreRegistry = $registry;
        parent::__construct($context, $data);
    }

    /**
     * @return Product
     */
    public function getProduct()
    {
        if (!$this->_product) {
            $this->_product = $this->_coreRegistry->registry('product');
        }
        return $this->_product;
    }

}

Test/ProductTabs/etc/module.xml

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
    <module name="Test_ProductTabs" setup_version="1.0.0">
        <sequence>
            <module name="Magento_Catalog"/>
        </sequence>
    </module>
</config>

Test/ProductTabs/view/layout/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="Test\ProductTabs\Block\CustomTab" name="mycustom.tab" as="mycustom" template="Test_ProductTabs::kit.phtml" group="detailed_info">
               <arguments>
                   <argument name="title" translate="true" xsi:type="string">Kit Components</argument>
               </arguments>
           </block>
       </referenceBlock>
   </body>
</page>

Test/ProductTabs/view/templates/kit.phtml

<h1>Kit Components</h1>

above code is not working for me. Any help on this?

7
  • Your controller file? Commented Nov 17, 2016 at 10:39
  • @NitinPawar is it required?
    – Bojjaiah
    Commented Nov 17, 2016 at 10:40
  • Yes whenever i create the page i write controller for that page Commented Nov 17, 2016 at 10:42
  • @NitinPawar I think not required. I am creating storefront. any way how can i link up with tab to controller? can you share the code if it possible?
    – Bojjaiah
    Commented Nov 17, 2016 at 10:44
  • @NitinPawar any help on this?
    – Bojjaiah
    Commented Nov 17, 2016 at 10:50

7 Answers 7

7

Try this in your layout file

<referenceBlock name="product.info.details">

    <block class="Magento\Catalog\Block\Product\View" name="mycustom.tab" as="mycustom" template="Test_ProductTabs::kit.phtml" group="detailed_info">
        <arguments>
            <argument translate="true" name="title" xsi:type="string">Kit Components</argument>
        </arguments>
    </block>

</referenceBlock>

product related details all are available in Magento\Catalog\Block\Product\View so no need to create custom block for get product details.

update

wrong layout file location! it should be

Test/ProductTabs/view/frontend/layout/catalog_product_view.xml

3
  • not working....
    – Bojjaiah
    Commented Nov 17, 2016 at 11:17
  • wrong layout location see my updated answer Commented Nov 17, 2016 at 11:22
  • 1
    Yes I have wrongly created folder structure. I forgot it. Thanks you. Is there any way to display @ 1 tab as my custom tab?
    – Bojjaiah
    Commented Nov 17, 2016 at 11:37
3

You code is fine just simple mistake you have done two mistake

please change file name

catalog_product_view_.xml

to

catalog_product_view.xml

change frontend layout and tempplate file location

Test/ProductTabs/view/layout/catalog_product_view_.xml

to

Test/ProductTabs/view/frontend/layout/catalog_product_view.xml

change template file location

Test/ProductTabs/view/templates/kit.phtml

to

Test/ProductTabs/view/frontend/templates/kit.phtml
3
3

I think the better way to do this is to follow the same approach Magento uses to add the description attribute as one of the tabs on the product details page.

First create your attribute, lets say it's tech_spec and add it to whichever attribute sets you want it to so I can be updated from the Manage Manage Products page.

Then create/update your app\code[NameSpace][ModuleName]\view\frontend\layout\catalog_product_view.xml file with:

<referenceBlock name="product.info.details">
    <block class="Magento\Catalog\Block\Product\View\Description" name="product.info.tech.spec" template="product/view/attribute.phtml" group="detailed_info">
        <arguments>
            <argument name="at_call" xsi:type="string">getTechSpec</argument>
            <argument name="at_code" xsi:type="string">tech_spec</argument>
            <argument name="css_class" xsi:type="string">tech-spec</argument>
            <argument name="at_label" xsi:type="string">none</argument>
            <argument name="title" translate="true" xsi:type="string">Technical Specification</argument>
        </arguments>
    </block>
</referenceBlock>

Alternatively if you don't want to add an attribute you can add a template instead.

<referenceBlock name="product.info.details">
    <block class="Magento\Catalog\Block\Product\View" name="product.info.tech.spec" template="Magento_Catalog::product/view/tech-spec.phtml" group="detailed_info" >
        <arguments>
            <argument translate="true" name="title" xsi:type="string">Technical Specification</argument>
        </arguments>
    </block>
</referenceBlock>
2

Try this code of layout:

   <referenceContainer name="content">
        <referenceBlock name="product.info.details">
            <block class="Test\ProductTabs\Block\CustomTab" name="customtab_display" template="template="Test_ProductTabs::kit.phtml" group="detailed_info">
                <arguments>
                    <argument translate="true" name="title" xsi:type="string">Kit Components</argument>
                </arguments>
            </block>
        </referenceBlock>
   </referenceContainer>
6
  • not working....
    – Bojjaiah
    Commented Nov 17, 2016 at 10:58
  • remove /var and apply reindex and cache:flush Commented Nov 17, 2016 at 11:00
  • yes I executed above commands cache:flush, cache:clean and indexer:reindex but no luck.
    – Bojjaiah
    Commented Nov 17, 2016 at 11:06
  • may be you have issue in block so please remove getProduct() then try again Commented Nov 17, 2016 at 11:10
  • 1
    for that you need to rewrite catalog view but here we are override that page Commented Nov 17, 2016 at 11:40
2

I add my discoveries as a new answer so it has better visibility and can be up-voted. Indeed there was some files naming / folder structure mistakes. But this is not enough...

TL;DR :

  • Add a sort_order value to your tab block : <argument name="sort_order" xsi:type="string">99</argument>
  • Be sure this sort_order value is UNIQUE among other tabs
  • Execute php bin/magento indexer:reindex and php bin/magento cache:clear

Reasons why :

Everything takes place in \Magento\Catalog\Block\Product\View\Details::getGroupSortedChildNames()

  • If you want your tab to be pulled by getGroupChildNames() you need to reindex before (php bin/magento indexer:reindex)
  • getGroupSortedChildNames() method performs a tab sorting using blocks' sort_order values. If no sort_order is found, fallback is 0. If more than one tab blocks are defined without sort_order, the last one to be given 0 will replace all previous tabs in final sorted tabs array. In my case, last one was a tab from Mageplaza_Faq module...

I hope this will prevent other people to pull their hair for a couple of hours like I did.

2
  1. First go to the admin panel of your Magento store and then navigate to Stores -> Product. Click on Add New Attribute and create new Attribute. (Set Attribute label DEMO and Attribute code demo)

  2. Now go to Stores -> Attribute Set and Add Attribute Set.

  3. Now click on your Attribute Set and dragged unassigned Attribute (which you have created in first step) to Product Details and click Save.

  4. Now go to your product edit page in admin panel and change the attribute name and template name which you have created in first and second step.

  5. In app/code/Test/ProductTabs/etc/module.xml paste this code.

<?xml version="1.0"?>
   <config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
   <module name="Test_ProductTabs" setup_version="1.0.0"></module>
</config>
  1. In app/code/Test/ProductTabs/registration.php, paste this code.
<?php
\Magento\Framework\Component\ComponentRegistrar::register(
    \Magento\Framework\Component\ComponentRegistrar::MODULE,
    'Test_ProductTabs',
    __DIR__
);
  1. In app/code/Test/ProductTabs/view/frontend/layout/catalog_product_view.xml, paste this code.
<?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="demo.tab" template="Test_ProductTabs::custom_tab.phtml" group="detailed_info" >
                <arguments>
                    <argument translate="true" name="title" xsi:type="string">Custom Tab</argument>
                </arguments>
            </block>
        </referenceBlock>
    </body>
</page>
  1. Now in app/code/Test/ProductTabs/view/frontend/templates/custom_tab.phtml, paste this code.
<?php 
$product = $block->getProduct();
?>
 <h1 style="color: #00aeed"><?php echo $product->getData('demo'); ?></h1>  
  1. Now lauch your product page.
2
  • Create a whole module just to call echo $product->getData('demo'); in a custom template file? It seems easier to extend catalog_product_view.xml in the Theme - either by re-using the Magento\Catalog\Block\Product\View\Description block as described by @Holly, or even by adding your custom custom_tab.phtml to the theme.
    – thaddeusmt
    Commented Oct 9, 2017 at 4:07
  • Nicely explain and helpful Commented Nov 26, 2017 at 12:34
0

I follow the steps to create a custom tab. And tab is shown. Now the tab is shown on every product page. Even if the attribute is not on the attribute set.

the 'custom_tab' is on 'Unassigned Attributes' for 'default' attribute set.

the 'custom_tab' is on 'Assigned attributes' for 'att_set1' attribute set.

the 'custom_tab' is on 'Unassigned Attributes' for 'att_set2' attribute set

still the 'custom tab' is shown on all product pages?

do I need to change anything else?

2
  • This is not really an answer to the question. Please consider leaving a comment or ask a new question.
    – HelgeB
    Commented Mar 21, 2019 at 15:11
  • ok, I could not commend because I did not have enough reputations.
    – goodlook
    Commented Mar 22, 2019 at 16:51

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.