Reading list Switch to dark mode

    Add Tab On Product Edit Page Magento2 Admin

    Updated 27 January 2023

    Here we will learn how to add Tab on product edit page magento admin

    Add Tab on Product Page

    First of all create ‘di.xml’ file in location Webkul/Demo/etc/adminhtml/di.xml.

    <?xml version="1.0"?>
    <config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">
        <virtualType name="Magento\Catalog\Ui\DataProvider\Product\Form\Modifier\Pool">
            <arguments>
                <argument name="modifiers" xsi:type="array">
                    <item name="demo-tab" xsi:type="array">
                        <item name="class" xsi:type="string">Webkul\Demo\Ui\DataProvider\Product\Form\Modifier\DemoTab</item>
                        <item name="sortOrder" xsi:type="number">20</item>
                    </item>
                </argument>
            </arguments>
        </virtualType>
    </config>

    Now create DemoTab.php in location Webkul\Demo\Ui\DataProvider\Product\Form\Modifier.

    <?php
    
    namespace Webkul\Demo\Ui\DataProvider\Product\Form\Modifier;
    
    use Magento\Catalog\Ui\DataProvider\Product\Form\Modifier\AbstractModifier;
    use Magento\Framework\View\LayoutFactory;
    use Webkul\Demo\Block\Adminhtml\Catalog\Product\Edit\Tab\Demo;
    
    class DemoTab extends AbstractModifier
    {
    
        protected $layoutFactory;
    
        public function __construct(
            LayoutFactory $layoutFactory
        ) {
            $this->layoutFactory = $layoutFactory;
        }
    
        /**
         * Modify data
         *
         * @param array $data
         * @return array
         */
        public function modifyData(array $data)
        {
            return $data;
        }
    
        /**
         * Modify meta data
         *
         * @param array $meta
         * @return void
         */
        public function modifyMeta(array $meta)
        {
            $meta['demo_tab'] = [
                "children" => [
                    "demo_tab_container" => [
                        "arguments" => [
                            "data" => [
                                "config" => [
                                    "formElement" => "container",
                                    "componentType" => "container",
                                    'component' => 'Magento_Ui/js/form/components/html',
                                    "required" => 0,
                                    "sortOrder" => 5,
                                    "content" => $this->layoutFactory->create()->createBlock(
                                        Demo::class
                                    )->toHtml(),
                                ]
                            ]
                        ]
                    ]
                ],
                "arguments" => [
                    "data" => [
                        "config" => [
                            "componentType" => "fieldset",
                            "label" => __("Demo Tab"),
                            "collapsible" => true,
                            "sortOrder" => 5,
                            'opened' => true,
                            'canShow' => true
                        ]
                    ]
                ]
            ];
            return $meta;
        }
    }

    Now create block Demo.php in location Webkul\Demo\Block\Adminhtml\Catalog\Product\Edit\Tab.

    <?php
    namespace Webkul\Demo\Block\Adminhtml\Catalog\Product\Edit\Tab;
    
    class Demo extends \Magento\Backend\Block\Widget
    {
        /**
         * @var string
         */
        protected $_template = 'product/edit/demo.phtml';
    
    }
    

    protected $_template = ‘product/edit/demo.phtml’
    This template file will be called in tab content.

    Searching for an experienced
    Magento 2 Company ?
    Find out More

    Finally create template file demo.phtml in location Webkul/Demo/view/adminhtml/templates/product/edit.

    This is demo tab content.

    Add Tab

    If you have any query please comment below.

    . . .

    Leave a Comment

    Your email address will not be published. Required fields are marked*


    11 comments

  • kavya k
  • Zulqarnain Abdul Jabbar
    • Zulqarnain Abdul Jabbar
  • Johan van de Vijver
    • Webkul Support
      • sunil verma
        • sunil verma
  • Sikander Al Masum
  • kumarg311
  • Futuresoft India
  • Maciej Sroka
  • Back to Top

    Message Sent!

    If you have more details or questions, you can reply to the received confirmation email.

    Back to Home