0

how to add a tab in product details page using Magento 2 admin panel. Is there any option to do this ?

enter image description here

0

If you want to do something that Magento also does, it's always best to look at how Magento does this itself. If you look at Magento_Catalog/view/frontend/layout/catalog_product_view.xml you'll see something like this:

<block class="Magento\Catalog\Block\Product\View\Description" name="product.info.details" template="Magento_Catalog::product/view/details.phtml" after="product.info.media">
    <block class="Magento\Catalog\Block\Product\View\Description" name="product.info.description" template="Magento_Catalog::product/view/attribute.phtml" group="detailed_info">
        <arguments>
            <argument name="at_call" xsi:type="string">getDescription</argument>
            <argument name="at_code" xsi:type="string">description</argument>
            <argument name="css_class" xsi:type="string">description</argument>
            <argument name="at_label" xsi:type="string">none</argument>
            <argument name="title" translate="true" xsi:type="string">Details</argument>
        </arguments>
    </block>
    <block class="Magento\Catalog\Block\Product\View\Attributes" name="product.attributes" as="additional" template="Magento_Catalog::product/view/attributes.phtml" group="detailed_info">
        <arguments>
            <argument translate="true" name="title" xsi:type="string">More Information</argument>
        </arguments>
    </block>
</block>

So if you want to add a tab in your own theme our module, my best guess would be to create a file called catalog_product_view.xml and add it to the product.info.details-block. This example would add the value of my_attribute:

<referenceBlock name="product.info.details">
    <block class="Magento\Catalog\Block\Product\View\Description" name="product.info.my_attribute" template="Magento_Catalog::product/view/attribute.phtml" group="detailed_info">
        <arguments>
            <argument name="at_call" xsi:type="string">getMyAttribute</argument>
            <argument name="at_code" xsi:type="string">my_attribute</argument>
            <argument name="css_class" xsi:type="string">my_attribute</argument>
            <argument name="at_label" xsi:type="string">none</argument>
            <argument name="title" translate="true" xsi:type="string">My Attribute</argument>
        </arguments>
    </block>
</block>

Ofcourse, instead of Magento\Catalog\Block\Product\View\Description you can use your own custom block class and template, just as long as you keep the group="detailed_info" in your layout XML (this is what adds the tab to the template).

Haven't tried this example yet, but it should work (or at least point you in the right direction).

0

I follow the below given step

1-Go to store->product->Add New Attribute

2- Set default label for your custom tab and Catalog Input Type for Store Owner

for ex:-Text Area

3- Set Attribute code and scope under Advanced Attribute Properties and save it

for ex:- custom_tab or customtab (Attribute code)
For ex:- Global (scope)

4- Now go to Store->Attribute Set->default and you can see your attribute under Unassigned Attribute. Drag your attribute under Content group and save

5- Go to app\design\frontend\Custom-theme-folder\theme-folder\Magento_Catalog\layout and create if not exist catalog_product_view.xml and paste the following code

<?xml version="1.0"?>
<page layout="1column" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">

    <update handle="catalog_product_opengraph" />
    <update handle="page_calendar"/>
    <body>
        <referenceBlock name="product.info.details">            
            <block class="Magento\Catalog\Block\Product\View\Attributes" name="custom.tab" template="product/view/view.phtml" group="detailed_info">
                <arguments>
                    <argument name="title" translate="true" xsi:type="string">Care</argument>
                </arguments>            
             </block>
        </referenceBlock>

6- Now go to \app\design\frontend\your-theme\Magento_Catalog\templates\product\view and create view.phtml and write the following code

<?php
$product=$block->getProduct();
?>
<h1><?php echo $product->getData('custom_tab');?></h1>

And i created my custom tab successfully. and i hope this will also help other peoples.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.