Customizing Tab Options in the Admin Panel of Magento 2.0

Mar 4, 2016477Artsem Miklashevich
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.

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:

Partner With Us Let's discuss how to grow your business. Get a Free Quote.
Talk to Vlad

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.

Partner With Us Looking for a partner that will help you to grow your business? We are the right company to develop your webstore. Feel free to get in touch with us. We will be happy to discuss your business opportunities and provide you with a Free Quote. Talk to Vlad

1 comment

Post a new comment

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