Adding a Custom Tab to the Product Edit Admin in Magento 2
In view/adminhtml/layout/catalog_product_new.xml
Tip: If you just wanted to add the new tab for a particular product type you can put the following in a file specific to that type.
catalog_product_configurable.xmlfor example.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<?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">
<action method="addTabAfter">
<argument name="tabId" xsi:type="string">custom-id</argument>
<argument name="tab" xsi:type="array">
<item name="label" xsi:type="string" translate="true">Custom Label</item>
<item name="class" xsi:type="string">ajax</item>
<item name="url" xsi:type="url" path="*/*/custom"/>
<item name="group_code" xsi:type="string">advanced</item>
</argument>
<argument name="after" xsi:type="string">related</argument>
</action>
</referenceBlock>
</body>
</page>
There are a number of action methods we could have used. Noteable addTab and addTabAfter.
The only difference between the two is with addTabAfter we must include a third argument (after) to tell Magento where we
would like our tab to appear.
I have opted for this tab to be loaded via ajax (best practice alert) by declaring a class of ajax. We must therefore specify a url that is called when our tab is clicked. It will return the content of the tab that will be injected and displayed to us.
We need to set up a controller to handle the ajax request.
In Controller/Adminhtml/Product/Custom.php:
<?php
namespace [Vendor]\[ModuleName]\Controller\Adminhtml\Product;
use Magento\Backend\App\Action\Context;
use Magento\Catalog\Controller\Adminhtml\Product;
use Magento\Catalog\Controller\Adminhtml\Product\Builder;
use Magento\Framework\View\Result\LayoutFactory;
class Custom extends Product
{
protected $resultLayoutFactory;
public function __construct(
Context $context,
Builder $productBuilder,
LayoutFactory $resultLayoutFactory
) {
parent::__construct($context, $productBuilder);
$this->resultLayoutFactory = $resultLayoutFactory;
}
public function execute()
{
$resultLayout = $this->resultLayoutFactory->create();
return $resultLayout;
}
}Finally, because we are using the current url namespace (catalog) we need to tell Magento where to look for our controller.
In etc/adminhtml/routes.xml:
<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:App/etc/routes.xsd">
<router id="admin">
<route id="catalog">
<module name="[Vendor]_[ModuleName]" before="Magento_Catalog" />
</route>
</router>
</config>T’end
Like this post? Share it :)