Magento 2.2 – How to Add Tab in Product Edit Page

magento2.2php-7producttabs

How to add tab in product edit page in magento2?

I refering some tutorial …but its not woking for me…

https://webkul.com/blog/add-tab-product-page-magento-admin/

If anyone knows ,Explain me…

Best Answer

You can add custom tab using UI component

app/code/Namespace/Modulename/view/adminhtml/ui_component/product_form.xml

<form xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Ui:etc/ui_configuration.xsd">
    <fieldset name="demotab">
       <argument name="data" xsi:type="array">
           <item name="config" xsi:type="array">
               <item name="label" xsi:type="string" translate="true">Demo Tab</item>
               <item name="collapsible" xsi:type="boolean">true</item>
               <item name="sortOrder" xsi:type="number">100</item>
           </item>
       </argument>
       <container name="fieldname_container" >
           <argument name="data" xsi:type="array">
               <item name="config" xsi:type="array">
                   <item name="sortOrder" xsi:type="number">160</item>
               </item>
           </argument>
           <htmlContent name="html_content_demo">
               <argument name="block" xsi:type="object">Namespace\Modulename\Block\Adminhtml\Catalog\Product\Edit\Tab\Demo</argument>
           </htmlContent>
       </container>
   </fieldset>
</form>

app/code/Namespace/Modulename/Block/Adminhtml/Catalog/Product/Edit/Tab/Demo.php

<?php
namespace Namespace\Modulename\Block\Adminhtml\Catalog\Product\Edit\Tab;

use Magento\Backend\Block\Template\Context;
use Magento\Framework\Registry;

class Demo extends \Magento\Framework\View\Element\Template
{
    /**
     * @var string
     */
    protected $_template = 'product/edit/demo.phtml';

    /**
     * Core registry
     *
     * @var Registry
     */
    protected $_coreRegistry = null;

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

    /**
     * Retrieve product
     *
     * @return \Magento\Catalog\Model\Product
     */
    public function getProduct()
    {
        return $this->_coreRegistry->registry('current_product');
    }

}

app/code/Namespace/Modulename/view/adminhtml/templates/product/edit/demo.phtml

<?php echo "This is demo tab content."; ?>

Related Solutions

Magento – Magento 2: How to edit existing product tab

You need to Create catalog_product_view.xml in your custom theme to change text of existing tab

app/design/frontend/Vendor/theme/Magento_Catalog/layout/catalog_product_view.xml

<?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">
    <body>
        <referenceBlock name="product.info.details">
            <block class="Magento\Catalog\Block\Product\View\Attributes" name="product.attributes" as="additional" template="product/view/attributes.phtml" group="detailed_info">
                <arguments>
                    <argument translate="true" name="title" xsi:type="string">Change More Information</argument>
                </arguments>
            </block>
        </referenceBlock>
    </body>
</page>

If you want to change content of tab you need to change template

<block class="Magento\Catalog\Block\Product\View\Attributes" name="product.attributes" as="additional" template="Magento_Catalog::product/view/attributes.phtml" group="detailed_info">

and create attributes.phtml at

app/design/frontend/Vendor/theme/Magento_Catalog/templates/product/view/attributes.phtml

Magento – Magento 2 add custom tab to account dashboard

Follow the steps listed below :

Add below files into your custom extension.

Ex:- => Namespace:- ABC => modulename : Myblog

=> Create customer_account.xml into ABC/Myblog/view/frontend/layout

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
   <body>
      <referenceBlock name="customer_account_navigation">
         <block class="Magento\Framework\View\Element\Html\Link\Current" name="customer-account-navigation-myblog">
            <arguments>
               <argument name="path" xsi:type="string">myblog/customer/index</argument>
               <argument name="label" xsi:type="string"> My Blog</argument>
            </arguments>
         </block>
      </referenceBlock>
   </body>
</page>

=> Create myblog_customer_index.xml into ABC/Myblog/view/frontend/layout

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../../../../../lib/internal/Magento/Framework/View/Layout/etc/page_configuration.xsd"> 
<update handle="customer_account"/> 
<body> 
    <referenceBlock name="page.main.title"> 
            <action method="setPageTitle"> 
                <argument translate="true" name="title" xsi:type="string">My Blog</argument> 
            </action> 
     </referenceBlock> 
     <referenceContainer name="content"> 
        <block class="Magento\Framework\View\Element\Template" name="my_email" template="ABC_Myblog::myblog.phtml"> 
        </block> 
    </referenceContainer> 
</body> 
</page>

=> Create Index.php into ABC/Myblog/Controller/Customer

<?php 
namespace ABC\Myblog\Controller\Customer;  
class Index extends \Magento\Framework\App\Action\Action { 

 public function execute() { 

    $this->_view->loadLayout(); 
    $this->_view->renderLayout(); 
  } 

} 
?>

=> Create myblog.phtml into ABC/Myblog/view/frontend/templates

<?php 
 // Add Some Code Here  
?>

Best Answer

Related Solutions

Magento – Magento 2: How to edit existing product tab

Magento – Magento 2 add custom tab to account dashboard

Related Topic