3

How to create a new tab on product view page and show product attribute data in new tab?

2 Answers 2

1

Create an extension or add below file to your existing extension

Add below file at /app/code/Vendor/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="Vendor\Modulename\Block\Producttab" name="example.tab" template="Vendor_Modulename::customtab.phtml" group="detailed_info">
              <arguments>
                  <argument translate="true" name="title" xsi:type="string">Your Title</argument>
              </arguments>
          </block>
      </referenceBlock>
   </body>
</page>

Add block file at /app/code/Vendor/Modulename/Block/Producttab.php

namespace Vendor\Modulename\Block;

use Magento\Framework\View\Element\Template;
use Magento\Framework\Registry;

class Producttab extends Template
{
    /**
     * @var Registry
     */
    protected $registry;


    /**
     * @var Product
     */
    private $product;

    public  function __construct (
        Template\Context $context,
        Registry $registry,
        array $data = []
    ) {
        parent::__construct($context, $data);
        $this->registry = $registry;
    }

    public function getCustomData(){
        $this->product = $this->registry->registry('product');
        // I have used name attribute you can use as per your need
        return $this->product->getName();
    }

}

Add template at /app/code/Vendor/Modulename/view/frontend/templates/customtab.phtml add below code to it.

<div>Product Attribute Data</div>
<?php echo $block->getCustomData(); ?>
1

put below code in catalog_product_view.xml inside body tag.

<referenceBlock name="product.info.details">
<block class="Magento\Catalog\Block\Product\View" name="shipping.delivery" template="product/view/shipping_delivery.phtml" group="detailed_info">
<arguments>
<argument translate="true" name="title" xsi:type="string">Shipping &amp;  Delivery</argument>
</arguments>
</block>
</referenceBlock>

then create phtml file in below path and load your attribute data app/design/Vendor/Theme/Magento_catalog/templates/product/view/shipping_delivery.phtml

<?php echo $this->helper('Magento\Catalog\Helper\Output')->productAttribute($block->getProduct(), $block->getProduct()->getShippingDelivery(), 'shipping_delivery') ?>

All done. Clear Cache. You can see new tab in Product detail page.

Easy and Simple way. Thanks.

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.