Add Tab On Product Edit Page Magento 2.0.X Admin
Here we will learn how to Add Tab On Product Edit Page in magento admin.
Add Tab on Product Page
First of all 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\Catalog\Block\Adminhtml\Product\Edit\Tabs;
class Demo extends \Magento\Backend\Block\Widget implements \Magento\Backend\Block\Widget\Tab\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;
public function __construct(
\Magento\Backend\Block\Template\Context $context,
\Magento\Framework\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.
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.
That is all for this Add Tab On Product Edit Page, you may also check our best Magento 2 extensions
If you have any queries please comment below.
For inline product editing, you can check Product Grid Editor for Magento 2 extension.