Quantcast
Channel: Webkul Blog
Viewing all articles
Browse latest Browse all 5537

Add Tab On Product Edit Page Magento 2.0.X Admin

$
0
0

Magneto-Code-Snippet
Here we will learn how to add Tab on product edit page magento admin.
First create ‘catalog_product_edit.xml’ file in location Webkul/Demo/view/adminhtml/layout.

<?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_tabs">
            <block name="demo_panel" class="Webkul\Demo\Block\Adminhtml\Catalog\Product\Edit\Tab\Demo">
            </block>
            <action method="addTab">
                <argument name="name" xsi:type="string">demo_panel</argument>
                <argument name="block" xsi:type="string">demo_panel</argument>
            </action>
        </referenceBlock>
    </body>
</page>

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

<?php
namespace Webkul\Demo\Block\Adminhtml\Catalog\Product\Edit\Tab;

use Magento\Backend\Block\Template\Context;
use Magento\Backend\Block\Widget;
use Magento\Backend\Block\Widget\Tab\TabInterface;
use Magento\Catalog\Block\Adminhtml\Product\Edit\Tabs;
use Magento\Framework\Registry;

class Demo extends Widget implements TabInterface
{
    /**
     * Reference to product objects that is being edited
     *
     * @var \Magento\Catalog\Model\Product
     */
    protected $_product = null;

    /**
     * @var string
     */
    protected $_template = 'product/edit/demo.phtml';

    /**
     * Accordion block id
     *
     * @var string
     */
    protected $_blockId = 'demo';

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

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

    /**
     * Check is readonly block
     *
     * @return boolean
     */
    public function isReadonly()
    {
        return false;
    }

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

    /**
     * Get tab label
     *
     * @return \Magento\Framework\Phrase
     */
    public function getTabLabel()
    {
        return __('Demo Tab');
    }

    /**
     * Get tab title
     *
     * @return \Magento\Framework\Phrase
     */
    public function getTabTitle()
    {
        return __('Demo Tab');
    }

    /**
     * Check if tab can be displayed
     *
     * @return boolean
     */
    public function canShowTab()
    {
        return true;
    }

    /**
     * Check if tab is hidden
     *
     * @return boolean
     */
    public function isHidden()
    {
        return false;
    }

    /**
     * @return string
     */
    public function getGroupCode()
    {
        return Tabs::ADVANCED_TAB_GROUP_CODE;
    }

    /**
     * Get demo tab content id
     *
     * @return string
     */
    public function getContentTabId()
    {
        return 'tab_content_' . $this->_blockId;
    }

    /**
     * @return $this
     */
    protected function _prepareLayout()
    {
        $this->setData('opened', true);
        return parent::_prepareLayout();
    }
}

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

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

This is demo tab content.

demo tab 2.0.0-1

If you want to call tab in other existing tab then you can use method getParentTab() in block file demo.php

/**
 * Get parent tab code
 *
 * @return string
 */
public function getParentTab()
{
    return 'product-details';
}

Now demo tab will be called in product details tab.
demo tab 2.0.0

If you have any query please comment below.


Viewing all articles
Browse latest Browse all 5537

Trending Articles