How to create custom tabs in product page magento 2?

Let’s create a product tab in Magento 2 product page using the simple module. We want to display short content for a product using product tabs.

Example, We want to display short description info in product tabs.
Start with the Simple module in Magento 2, create registration.php file to register our module.

Path, app/code/Rbj/ProductTabs/registration.php

<?php

\Magento\Framework\Component\ComponentRegistrar::register(
    \Magento\Framework\Component\ComponentRegistrar::MODULE,
    'Rbj_ProductTabs',
    __DIR__
);

File path, app/code/Rbj/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="Rbj_ProductTabs" setup_version="2.0.0">
        <sequence>
            <module name="Magento_Catalog"/>
        </sequence>
    </module>
</config>

We have passed dependency of Catalog module in sequence tag of our module.
Now We want to create catalog_product_view.xml file for display our custom tabs of the short description.
Create a layout file,
Path, app/code/Rbj/ProductTabs/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">
        	<!-- For short description tab -->
            <block class="Rbj\ProductTabs\Block\ExtraInfo" name="product.short.description" template="Rbj_ProductTabs::short-descripiton.phtml" group="detailed_info">
                <arguments>
                    <argument name="title" translate="true" xsi:type="string">Extra Info</argument>
                </arguments>
            </block>
   		</referenceBlock>
   	</body>
</page>

We have keep our tab name is Extra Info if you want to change tabs title you can replace Extra info with your title in argument tag. In the above layout file, We must need to pass group=”detailed_info” in the block class.

Create template file for call short description content in tabs using template, Path, app/code/Rbj/ProductTabs/view/frontend/templates/short-descripiton.phtml

<?php $extraInfo = $block->getTabsContent(); ?>

<div class="short">
    <?php echo $extraInfo; ?>
</div>

We need to create ExtraInfo.php file to check if a product has short description we need to display tabs otherwise we don’t need to display empty tabs for the short description.

Path, app/code/Rbj/ProductTabs/Block/ExtraInfo.php

<?php

namespace Rbj\ProductTabs\Block;

class ExtraInfo extends \Magento\Framework\View\Element\Template
{
    public function __construct(
        \Magento\Catalog\Block\Product\Context $context,
         array $data = []
    ) {
        $this->_coreRegistry = $context->getRegistry();
        parent::__construct($context, $data);
    }

    /**
     * Retrieve current product object
     *
     * @return \Magento\Catalog\Model\Product
     */
    public function getProduct()
    {
        if (!$this->hasData('product')) {
            $this->setData('product', $this->_coreRegistry->registry('product'));
        }
        return $this->getData('product');
    }

    /**
     * @return string
     */
    public function getTabsContent()
    {
        return $this->getProduct()->getShortDescription();
    }

    /**
     * @return return HTML
     */
    protected function _toHtml()
    {
        if(!empty($this->getTabsContent())) {
            return parent::_toHtml();
        }

        return false;
    }
}

Now run command to activate our module,

php bin/magento setup:upgrade
php bin/magento setup:static-content:deploy -f
php bin/magento cache:flush

You can see new tabs on the product page in the tabs section below the image section. Your new tab will be displayed if your product has the short description otherwise tabs will not display in product page.
You can add new attribute details using the above way.

Share this:

Related