Customizing Tab Options in the Admin Panel of Magento 2.0

Customizing Tab Options in the Admin Panel of Magento 2.0

One day you may need to redefine default output from the admin panel of Magento. For such things, in Magento 1.x and 2.0 there is a possibility to re-define default templates that allow us to make any customization of the theme.

Let’s look into customizing of attributes in the admin panel of Magento 2.0.

We need to add a new tab to the page for editing product attributes. Unlike Magento 1.x, in Magento 2.0 we should to place all template and layout files into the module’s view category. Just as it’s shown on the following image:

Customizing Tab Options in the Admin Panel of Magento 2.0

To re-define product attributes block, we need to rewrite appropriate layout rules. In our layout we should reference to the catalog_product_attribute_edit.xml. In this file we changed the block  \Magento\Catalog\Block\Adminhtml\Product\Attribute\Edit\Tabs.
Original:
\Magento\Catalog\Block\Adminhtml\Product\Attribute\Edit\Tabs
Updated:
Belvg\CustomStockStatus\Block\Adminhtml\Product\Attribute\Edit\Tabs.

With this referenceContainer update we replaced Magento\Catalog\Block\Adminhtml\Product\Attribute\Edit\Tabs block with our custom Belvg\CustomStockStatus\Block\Adminhtml\Product\Attribute\Edit\Tabs.

And added a new block  Belvg\CustomStockStatus\Block\Adminhtml\Product\Attribute\Edit\Tabs\Statuses. This block will define the look of our custom tab.

In order to add the required functionality we extended the original class \Magento\Catalog\Block\Adminhtml\Product\Attribute\Edit\Tabs with the Belvg\CustomStockStatus\Block\Adminhtml\Product\Attribute\Edit\Tabs. Also compatibility requires to transmit the necessary arguments to the   __construct method from the parent object. So code of the block will look like:

In this class we overloaded the beforeToHtml() method to add the new tab definition:

Directive $this->getChildHtml(‘statuses’) references to the Belvg\CustomStockStatus\Block\Adminhtml\Product\Attribute\Edit\Tabs\Statuses block (we defined it in the catalog_product_attribute_edit.xml). Statuses block is responsible for the content of the new tab. Now we should define the template and custom logic for the new tab.

Template’s location is defined in the following way: Namespace_Module::relative_path. So we have  Belvg_CustomStockStatus::product/attributes/tabs/statuses/statuses.phtml. According to the module’s structure this path should look like:

Customizing Tab Options in the Admin Panel of Magento 2.0

The main principles of redefining and customizing the default theme are the same in Magento 2.0 and Magento 1.x. But in Magento 2.0 all template and layout files are located in the module’s catalog. I think it’s really convenient  and won’t take much time for Magento 1.x developers to switch.



1 comment

Post a new comment

top
BelVG Newsletter
Subscribe to our mailing list and get interesting stuff and updates to your email inbox.
Email *