Add Custom Tabs to the Magento Product Admin
In Magento eCommerce, it is possible to add new attributes to product models and edit the values for these attributes on the Product edit page. This is fine if we only want to add standard data (attributes) to a product, but what if we wanted to do something more custom?
While developing Fishpig's Magento WordPress Integration extension, I found a simple way to add custom tabs (and content) to the Magento product edit page. This article will show you how to develop a simple Magento custom module to do this.
How the Custom Module Works
The custom module we are about to make will make use of Magento's observer event system. When certain actions are carried out in Magento, events are fired. We will use this custom module to listen for certain events and execute functions when they are called. The first event we will listen for is core_block_abstract_prepare_layout_after. This event is fired when the layout for each block is prepared. Our function will check which block is firing the event and if it's the product tabs block, inject some new tabs. The second event is catalog_product_save_after. This event is fired when the product model is saved and we will use it to save any data we set in our custom tab.
Creating the Custom Module
Rather than go into huge details about how to create custom modules - that's for another day - I'll simply list the basic code that you will need.
app/etc/modules/Fishpig_CustomTabs.xml
|
1
2
3
4
5
6
7
8
9
|
<?xml version="1.0"?><br><config><br> <modules><br> <Fishpig_CustomTabs><br> <active>true</active><br> <codePool>community</codePool><br> </Fishpig_CustomTabs><br> </modules><br></config> |
This file will register the custom module in Magento and force Magento to load the custom module on each page load.
app/code/community/Fishpig/CustomTabs/etc/config.xml
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
|
<?xml version="1.0"?><br><config><br> <modules><br> <Fishpig_CustomTabs><br> <version>0.1.0</version><br> </Fishpig_CustomTabs><br> </modules><br> <global><br> <blocks><br> <customtabs><br> <class>Fishpig_CustomTabs_Block</class><br> </customtabs><br> </blocks><br> <models><br> <customtabs><br> <class>Fishpig_CustomTabs_Model</class><br> </customtabs><br> </models><br> </global><br> <adminhtml><br> <events><br> <core_block_abstract_prepare_layout_after><br> <observers><br> <fishpig_product_injectTabs><br> <type>singleton</type><br> <class>customtabs/observer_product</class><br> <method>injectTabs</method><br> </fishpig_product_injectTabs><br> </observers><br> </core_block_abstract_prepare_layout_after><br> <catalog_product_save_after><br> <observers><br> <fishpig_save_product_data><br> <type>singleton</type><br> <class>customtabs/observer_product</class><br> <method>saveTabData</method><br> </fishpig_save_product_data><br> </observers><br> </catalog_product_save_after><br> </events><br> </adminhtml><br></config> |
This is the custom module's main configuration file. This registers our functions with their associated events.
app/code/community/Fishpig/CustomTabs/Model/Observer/Product.php
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
|
<?php<p></p><p>class Fishpig_CustomTabs_Model_Observer_Product<br>{<br> /**<br> * Inject one tab into the product edit page in the Magento admin<br> *<br> * @param Varien_Event_Observer $observer<br> */<br> public function injectTabs(Varien_Event_Observer $observer)<br> {<br> $block = $observer->getEvent()->getBlock();</p><p> if ($block instanceof Mage_Adminhtml_Block_Catalog_Product_Edit_Tabs) {<br> if ($this->_getRequest()->getActionName() == 'edit' || $this->_getRequest()->getParam('type')) {<br> $block->addTab('custom-product-tab-01', array(<br> 'label' => 'Custom Tab',<br> 'content' => $block->getLayout()->createBlock('adminhtml/template', 'custom-tab-content', array('template' => 'customtab/content.phtml'))->toHtml(),<br> ));<br> }<br> }<br> }</p><p> /**<br> * This method will run when the product is saved<br> * Use this function to update the product model and save<br> *<br> * @param Varien_Event_Observer $observer<br> */<br> public function saveTabData(Varien_Event_Observer $observer)<br> {<br> if ($post = $this->_getRequest()->getPost()) {</p><p> // Load the current product model<br> $product = Mage::registry('product');</p><p> /**<br> * Update any product attributes here<br> */</p><p> try {<br> // Uncomment the line below if you make changes to the product and want to save it<br> //$product->save();<br> }<br> catch (Exception $e) {<br> Mage::getSingleton('adminhtml/session')->addError($e->getMessage());<br> }<br> }<br> }</p><p> /**<br> * Shortcut to getRequest<br> */<br> protected function _getRequest()<br> {<br> return Mage::app()->getRequest();<br> }<br>}</p> |
This file contain the two methods that are called via the Magento Event Observer system. The first method, injectTabs injects the custom tab into the Magento Product Admin page. You can add as many tabs in here as you like. The second method, saveTabData is called when you save a product. Use this method to save any data set inside your custom tab.
app/design/adminhtml/default/default/template/customtab/content.phtml
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
|
<?php<br>/**<br> * Sample template for custom tab content by FishPig<br> *<br> * Feel free to change this template to what ever you like<br> *<br> */<br>?><br><div class="entry-edit"><br> <div class="entry-edit-head"><br> <h4 class="icon-head head-edit-form fieldset-legend">Custom Tab by FishPig</h4><br> </div><br> <div id="group_fields4" class="fieldset fieldset-wide"><br> <div class="hor-scroll"><br> <table cellspacing="0" class="form-list"><br> <tbody><br> <tr><br> <td><br> <p>You can either edit this template or completely change the block to suit your needs.</p><br> <p>by <a href="http://fishpig.co.uk/" target="_blank" title="Magento Tutorials & Development">FishPig</a></p><br> </td><br> </tr><br> </tbody><br> </table><br> </div><br> </div><br></div> |
This file contains some PHP/xHTML that shows the tab and it's content working. To put this to practical use, you will probably change this template and the block to a more suitable one.
After creating all of the above files, clear your cache and then go to any product in your Magento admin. You should see a new tab on the left named 'Custom Tab'.
What's Next?
This tutorial will inject a custom tab into your Magento product edit page, which you can customise to do anything you like. For a more practical example of this, download Fishpig's Magento WordPress Integration extension and look at the code there. That module uses this technique to add two tabs to the product page. These tabs are used to associate WordPress posts and categories with the product and go into more detail than this post does.
Hello. Thanks, it's very useful and important information. We have an article on the similar topic posted here http://www.atwix.com/magento/new-tab-product-edit-page/ you're welcome to check it out and leave your feedback.