Magento 2 Product Page – Add Tabs with Attribute Content in Magento 2.2.x

magento2.2product-attributetabs

I've read many add tabs post here, but can't seem to get any to work the way I need to work.

Attribute is 'sizechart' and is text field added to the default attribute set (but could be dropdown or multiselect)
In admin product add text to "sizechart" attribute eg "levi-size" ("levi-size' is name of CMS/Block already created in the backend).
The product page would then display the new tab with the CMS/Block

Since the size charts for different manufacturers aren't the same, I can't make a static tab, but need one which will use the custom test field or even better, a dropdown where the storefront labels contain the CMS/Block widget code such as below

{{widget type="Magento\Cms\Block\Widget\Block" template="widget/static_block/default.phtml" block_id="3"}}

I had this working very well in 1.9, but since 2.2, I can't seem to find a way to make this work.

The code I've seen here for Magento 2 and 2.1 doesn't seem to work for 2.2 and I'm not sure what the solution is. I expect this to go to bounty in a few days …

Ideally, creating a drop down where the admin label is "oneill" and the storefront field is

{{widget type="Magento\Cms\Block\Widget\Block" template="widget/static_block/default.phtml" block_id="3"}}

witch would correspond to the oneill warranty information would be much better.

And the same for size charts as well.

EDIT: For 2.3.2, the tabs were before the product details. To change that, I added SORT to the catalog_product_view.xml

This is what I added

<referenceBlock name="product.info.details">
            <referenceBlock name="product.info.description">
                <arguments>
                    <argument name="sort_order" xsi:type="string">10</argument>
                </arguments>
            </referenceBlock>
            <referenceBlock name="product.attributes">
                <arguments>
                    <argument name="sort_order" xsi:type="string">20</argument>
                </arguments>
            </referenceBlock>    
        </referenceBlock>

Then, below my added tab I added

<argument name="sort_order" xsi:type="string">50</argument>

So the whole file looks like

<?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"> <referenceBlock name="product.info.description"> <arguments> <argument name="sort_order" xsi:type="string">10</argument> </arguments> </referenceBlock> <referenceBlock name="product.attributes"> <arguments> <argument name="sort_order" xsi:type="string">20</argument> </arguments> </referenceBlock> </referenceBlock> <referenceBlock name="product.info.details"> <block class="Magento\Catalog\Block\Product\View" name="custom.tab" template="HBC_size::product/view/details/custom_tab.phtml" group="detailed_info"> <arguments> <argument translate="true" name="title" xsi:type="string">Size Chart</argument> <argument name="sort_order" xsi:type="string">50</argument> </arguments> </block> </referenceBlock> </body> </page>

Best Answer

You can try code, same as below:

app/code/[VendorName]/[ModuleName]/registration.php

\Magento\Framework\Component\ComponentRegistrar::register(
    \Magento\Framework\Component\ComponentRegistrar::MODULE,
    '[VendorName]_[ModuleName]',
    __DIR__
);

app/code/[VendorName]/[ModuleName]/etc/module.xml

<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
    <module name="[VendorName]_[ModuleName]" setup_version="1.0.0">
        <sequence>
            <module name="Magento_Review"/>
        </sequence>
    </module>
</config>

app/code/[VendorName]/[ModuleName]/view/frontend/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="Magento\Catalog\Block\Product\View" name="custom.tab" template="[VendorName]_[ModuleName]::product/view/details/custom_tab.phtml" group="detailed_info">
                <arguments>
                    <argument translate="true" name="title" xsi:type="string">Tab Title</argument>
                </arguments>
            </block>
        </referenceBlock>
    </body>
</page>

app/code/[VendorName]/[ModuleName]/view/frontend/templates/product/view/details/custom_tab.phtml

<?php $attributeCode = '<your_custom_attribute_name>'; ?>
<?php $blockIdentifier = $block->getProduct()->getData($attributeCode); ?>
<?php if($blockIdentifier): ?>
    <?php echo $block->getLayout()->createBlock('Magento\Cms\Block\Block')->setBlockId($blockIdentifier)->toHtml(); ?>
<?php endif; ?>

Note:

1. Create new product attribute.
Admin Menu > Stores > Attributes > Product > Add New Attribute [Text Field] = (i.e. Size chart)
2. Assign attribute to attribute set.
3. Update Code
From:
<?php $attributeCode = '<your_custom_attribute_name>'; ?>
To:
<?php $attributeCode = 'sizechart'; ?>
4. In admin product add text to "sizechart" attribute
Catalog > Products > Edit > Size chart = (i.e. levi-size)
5. Create CMS Block
Admin Menu > Content > Elements > Blocks > Add New Block = Same identifier which you have added value in product's "Size chart" attribute textbox (i.e. levi-size)

For dropdown or multiselect attribute, you need to change code accordingly or add multiple conditions for the same.

Related Solutions

Product – Adding Custom Tabs to Customized Theme

This is the important part that appear in the given code part.

<?php foreach ($this->getTabs() as $_index => $_tab): ?>
    <?php if($this->getChildHtml($_tab['alias'])): ?>
        <div class="meigee-tabs-content" id="product_tabs_<?php echo $_tab['alias'] ?>_contents"><?php echo $this->getChildHtml($_tab['alias']) ?></div>
    <?php endif; ?>
<?php endforeach; ?>

These are my findings. Template gets all the tabs by requesting $this->getTabs() which will return an array that holds information about tabs. My guess is all those tabs are configured through layout XML files. Any ways this method provide an array some what looks like this.

array(
    'index1' => array(
        'alias' => 'alias_1',
        'name'  =>  'name_1',  //not sure
        'title' => 'title_1'
        .....
    ),
    'index2' => array(
        'alias' => 'alias_2',
        'name'  =>  'name_2',  //not sure
        'title' => 'title_2'
        .....
    ),
    .....
)

So you have two options available

1. Inject your tab through Layout Update

You need to inject your block as other tabs included through layout XML. For this you need to find out which block that holds this template. You can see that tab blocks are included as its child block there. You need to put your custom block in the similar way default tabs are included. This will be the cleanest way to do that. But harder one

2. Forcefully inject your block via template file itself

This will be the easiest way to do this. For this you can use this concept.

<?php

//get tab array
$tabs = $this->getTabs();

//create an array for your tab
$my_tab = array(
            'my_tab' => array(
                'alias' => $this->getLayout()->createBlock('cms/block')->setBlockId($manu)->toHtml(),
                'title' => 'Manufacturer'
          ));

//inject your block to tab array
array_merge($tabs, $my_tab);
?>

<!-- need some modification here -->
<ul class="meigee-tabs">
    <?php foreach ($tabs as $_index => $_tab): ?>
        <?php if($_index != 'my_tab') : ?>
            <?php if($this->getChildHtml($_tab['alias'])): ?>
                <li id="product_tabs_<?php echo $_tab['alias'] ?>" class="<?php echo !$_index?' active first':''?>"><a href="#"><?php echo $_tab['title']?></a></li>
            <?php endif; ?>
        <?php else : ?>
            <li id="product_tabs_manufacturer" class="<?php echo !$_index?' active first':''?>"><a href="#"><?php echo $_tab['title']?></a></li>
        <?php endif; ?>
    <?php endforeach; ?>
</ul>

<?php foreach ($tabs as $_index => $_tab): ?>
    <?php if($_index != 'my_tab') : ?>
        <?php if($this->getChildHtml($_tab['alias'])): ?>
            <div class="meigee-tabs-content" id="product_tabs_<?php echo $_tab['alias'] ?>_contents"><?php echo $this->getChildHtml($_tab['alias']) ?></div>
        <?php endif; ?>
        <?php else : ?>
            <div class="meigee-tabs-content" id="product_tabs_manufacturer_contents"><?php echo $_tab['alias'] ?></div>
        <?php endif; ?>
<?php endforeach; ?>

First we retrieve tab array and inject my own tab array as element in the parent tab array. Since we put the alias with html of cms block(where as all other blocks holds a string for this alias), we cannot use default way of rendering the name and content of other blocks. So we separate our custom array entry with an if statement logic and changed those part according to our need(you can see those changes above).

Hope you get an idea how to do that. Let me know the result.

Magento 1.9 – Adding Custom Tabs in Product Detail Page

Just add this code after Description block in catalog.xml files

<block type="catalog/product_view_attributes" name="Your_attribute_name" as="additional" template="catalog/product/view/attributes.phtml">
    <action method="addToParentGroup"><group>detailed_info</group></action>
    <action method="setTitle" translate="value"><value>Your tab name</value></action>
 </block>

you can add in the above way for any number of tabs needed hope this helps.

Best Answer

Related Solutions

Product – Adding Custom Tabs to Customized Theme

Magento 1.9 – Adding Custom Tabs in Product Detail Page

Related Topic