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 a little different?

This article explains how to build a simple custom Magento extension that will add a new tab to the product edit page and provide a facility for processing that data when the user hits the Save button.

Creating the Magento Extension

The first step is to create the extension's setup file, which loads the extension into Magento.

app/etc/modules/Fishpig_Customtabs.xml

<?xml version="1.0"?>
<config>
    <modules>
        <Fishpig_Customtabs>
            <active>true</active>
            <codePool>local</codePool>
        </Fishpig_Customtabs>
    </modules>
</config>

This file will register the extension in Magento, telling it to look in the app/code/local/Fishpig/Customtabs/ directory for the extension's code.

app/code/local/Fishpig/Customtabs/etc/config.xml

The next file we make is the extension's config file. This file is a more detailed setup file, containing information about the extension's classes, layout files and everything else we need to make it work.

Notice the events section of this file (below)? To save the product data, we listen for an event that is triggered when ever a product is saved in the Magento Admin. This allows us to access the custom data we have created in the tab and process/save it.

<?xml version="1.0"?>
<config>
    <modules>
        <Fishpig_CustomTabs>
            <version>0.1.0</version>
        </Fishpig_CustomTabs>
    </modules>
    <global>
        <blocks>
            <customtabs>
                <class>Fishpig_Customtabs_Block</class>
            </customtabs>
        </blocks>
        <models>
            <customtabs>
                <class>Fishpig_Customtabs_Model</class>
            </customtabs>
        </models>
    </global>
    <adminhtml>
    	<layout>
    		<updates>
    			<customtabs>
    				<file>customtabs.xml</file>
    			</customtabs>
    		</updates>
    	</layout>
        <events>
            <catalog_product_save_after>
                <observers>
                    <fishpig_save_product_data>
                        <type>singleton</type>
                        <class>customtabs/observer</class>
                        <method>saveProductTabData</method>
                    </fishpig_save_product_data>
                </observers>
            </catalog_product_save_after>
        </events>
    </adminhtml>
</config>

app/code/local/Fishpig/Customtabs/Block/Adminhtml/Catalog/Product/Tab.php

<?php

class Fishpig_Customtabs_Block_Adminhtml_Catalog_Product_Tab
extends Mage_Adminhtml_Block_Template
implements Mage_Adminhtml_Block_Widget_Tab_Interface {

	/**
	 * Set the template for the block
	 *
	 */
	public function _construct()
	{
		parent::_construct();

		$this->setTemplate('customtabs/catalog/product/tab.phtml');
	}

	/**
	 * Retrieve the label used for the tab relating to this block
	 *
	 * @return string
	 */
    public function getTabLabel()
    {
    	return $this->__('My Custom Tab');
    }

    /**
     * Retrieve the title used by this tab
     *
     * @return string
     */
    public function getTabTitle()
    {
    	return $this->__('Click here to view your custom tab content');
    }

	/**
	 * Determines whether to display the tab
	 * Add logic here to decide whether you want the tab to display
	 *
	 * @return bool
	 */
    public function canShowTab()
    {
		return true;
    }

    /**
     * Stops the tab being hidden
     *
     * @return bool
     */
    public function isHidden()
    {
    	return false;
    }

	/**
	 * AJAX TAB's
	 * If you want to use an AJAX tab, uncomment the following functions
	 * Please note that you will need to setup a controller to recieve
	 * the tab content request
	 *
	 */
	/**
	 * Retrieve the class name of the tab
	 * Return 'ajax' here if you want the tab to be loaded via Ajax
	 *
	 * return string
	 */
#	public function getTabClass()
#	{
#		return 'my-custom-tab';
#	}

	/**
	 * Determine whether to generate content on load or via AJAX
	 * If true, the tab's content won't be loaded until the tab is clicked
	 * You will need to setup a controller to handle the tab request
	 *
	 * @return bool
	 */
#	public function getSkipGenerateContent()
#	{
#		return false;
#	}

	/**
	 * Retrieve the URL used to load the tab content
	 * Return the URL here used to load the content by Ajax
	 * see self::getSkipGenerateContent & self::getTabClass
	 *
	 * @return string
	 */
#	public function getTabUrl()
#	{
#		return null;
#	}

}

This is a big file and is the main code file for our tab. This file extends Mage_Adminhtml_Block_Template, which is the base Adminhtml template and doesn't do much. Your tab block can extend any block file in Magento, for example, in FishPig's WordPress Integration, we use this method to extend the grid class to display a list of WordPress posts.

On it's own, the above code won't do anything as we haven't included it yet. Let's include it now by creating a layout XML file for our extension.

app/design/adminhtml/default/default/layout/customtabs.xml

This is the layout file for the Adminhtml section of the extension. In here we will include the tab on the Magento Product edit page.

<?xml version="1.0"?>
<layout>
	<adminhtml_catalog_product_edit>
		<reference name="product_tabs">
			<action method="addTab">
				<name>my_custom_tab</name>
				<block>customtabs/adminhtml_catalog_product_tab</block>
			</action>
		</reference>
	</adminhtml_catalog_product_edit>
</layout>

This file is quite simple but without it, nothing will show on the product edit page. The last thing to do before we can see our tab in action is to create our new template file.

app/design/adminhtml/default/default/template/customtabs/catalog/product/tab.phtml

<?php
/**
 * Custom tab template
 */
?>
<div class="input-field">
 <label for="custom_field">Custom Field</label>
 <input type="text" class="input-text" name="custom_field" id="custom_field" />
</div>

Although this example is simple, you could enter anything you want in here. Using this and your block hopefully you can see how truly limitless the options are to you.

Testing Our Custom Magento Admin Tab

Now that we have the code in place, let's refresh our cache, go to a product edit page and see the tab in action!

Did it work? If it didn't work, check through your XML again as a slight error in any of that will stop everything working.

Now that we have our tab, let's take a look at how to process the data once the user hits the 'Save' button.

Saving our Custom Tab Data

To access the data during the saving process, we have hooked into an event called catalog_product_save_after (see config.xml above). This event is triggered each time a product model is saved. As we have declared our observer for this event inside the adminhtml block, we will only trigger our code when a product model is saved from the Magento Admin.

app/code/local/Fishpig/Customtabs/Model/Observer.php

<?php

class Fishpig_Customtabs_Model_Observer
{
	/**
	 * Flag to stop observer executing more than once
	 *
	 * @var static bool
	 */
	static protected $_singletonFlag = false;

	/**
	 * This method will run when the product is saved from the Magento Admin
	 * Use this function to update the product model, process the
	 * data or anything you like
	 *
	 * @param Varien_Event_Observer $observer
	 */
	public function saveProductTabData(Varien_Event_Observer $observer)
	{
		if (!self::$_singletonFlag) {
			self::$_singletonFlag = true;

			$product = $observer->getEvent()->getProduct();

			try {
				/**
				 * Perform any actions you want here
				 *
				 */
				$customFieldValue =  $this->_getRequest()->getPost('custom_field');

				/**
				 * Uncomment the line below to save the product
				 *
				 */
				//$product->save();
			}
			catch (Exception $e) {
				Mage::getSingleton('adminhtml/session')->addError($e->getMessage());
			}
		}
	}

	/**
	 * Retrieve the product model
	 *
	 * @return Mage_Catalog_Model_Product $product
	 */
	public function getProduct()
	{
		return Mage::registry('product');
	}

    /**
     * Shortcut to getRequest
     *
     */
    protected function _getRequest()
    {
        return Mage::app()->getRequest();
    }
}

Although this code doesn't do anything with the data, it hopefully illustrates how to access the data, after which you can do what ever you want.

Wrapping it Up

The extension you have just written is a simple extension that will allow you to add custom tabs in the Product edit page of the Magento Admin. This concept can be applied to any of the other sections in Magento (categories, customers etc) so take the time to study the code and understand how it works. For a more practical implementation of this, take a look at the code in FishPig's WordPress Integration as this uses this system to add custom data grid's as AJAX tabs to the Product edit page of the Magento Admin.