Pages

Thursday, September 3, 2015

Magento 2: Add new tab in Product detail page

 Magento 2 to apply the new tab in product detail page is very easy task. Use below steps and check it out. It will display the tab in your theme.

1. Create file “catalog_product_view.xml” in the app/design/frontend/{vender name}/{theme name}/Magento_Catalog/layout
In the file write the below code:


<?xml version="1.0"?>
<page layout="2columns-left" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../../../../../lib/internal/Magento/Framework/View/Layout/etc/page_configuration.xsd">
<body>
<!-- this is code to add new tab start -->
<referenceBlock name="product.info.details">
<block class="Magento\Catalog\Block\Product\View" name="deliveryinfo.tab" as="deliveryinfo" template="product/view/delivery_info.phtml" group="detailed_info" >
<arguments>
<argument translate="true" name="title" xsi:type="string">Delivery Information</argument>
</arguments>
</block>
</referenceBlock>
<!-- this is code to add new tab end -->
</body>
</page>

2. create the file delivery_info.phtml in the path app/design/frontend/{vender name}/{theme name}/Magento_Catalog/templates/product/view.

In the file you can write any content or you can call the static block like this


<?php echo $block->getLayout()->createBlock('Magento\Cms\Block\Block')->setBlockId('delivery_info')->toHtml(); ?>

3. Delivery_info block we have to create in admin side Content/Block.

Now check in the Detail page.

No comments:

Post a Comment