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.
Be the first to comment.