Add tabs with attribute content on product page 2.2.x

You can try code, same as below:

  1. app/code/[VendorName]/[ModuleName]/registration.php
\Magento\Framework\Component\ComponentRegistrar::register(
    \Magento\Framework\Component\ComponentRegistrar::MODULE,
    '[VendorName]_[ModuleName]',
    __DIR__
);
  1. 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>
  1. 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>
  1. 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.


I have done this a few times from within a theme. You can just take the attribute e.g. warrantytype and then use the value for that to call the appropriate static block. Similar to below:

<?php
  $_product = $block->getProduct();
  $blockid = $_product->getResource()->getAttribute('warrantytype')->getFrontend()->getValue($_product);
  $blockhtml = $block->getLayout()->createBlock('Magento\Cms\Block\Block')->setBlockId($shippingtype)->toHtml();
?>
<p><?php echo $blockhtml; ?></p>

This could be modified to show a custom widget like suggested by echoing the block_id into the widget also may be worth looking at getting a widget to show in phtml file however. Also code to grad the attribute value may need to be modified for drop downs but have not tested this.

app/design/frontend/vendor/Theme/Magento_Catalog/templates/product/view/warrantyinfo.phtml

Then simply add this block to a tab:

 <block class="Magento\Catalog\Block\Product\View" name="product.warranty" as="additional" template="product/view/warantyinfo.phtml" group="detailed_info">
      <arguments>
         <argument translate="true" name="title" xsi:type="string">Warranty</argument>
      </arguments>
   </block>

app/design/frontend/vendor/Theme/Magento_Catalog/layout/catalog_product_view.xml

Tags:

Tabs

Product Attribute

Magento2.2

Recent Posts