Magento: Add Custom Tabs to the Magento Product Admin

In this article I have explained you how to add custom tab in product edit section of admin through a simple custom magento extension.

In Magento, 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.

How to add custom tab in product edit section of admin through a simple custom magento extension for processing the data when user hits the save button,for that please follow below intructions.

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

app/etc/modules/Prashant_Mytabs.xml

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

Now. second step is for create extension’s config file

app/code/local/Prashant/Mytabs/etc/config.xml

<?xml version="1.0"?>
<config>
    <modules>
        <Prashant_Mytabs>
            <version>0.1.0</version>
        </Prashant_Mytabs>
    </modules>
    <global>
        <blocks>
            <mytabs>
                <class>Prashant_Mytabs_Block</class>
            </mytabs>
        </blocks>
        <models>
            <mytabs>
                <class>Prashant_Mytabs_Model</class>
            </mytabs>
        </models>
    </global>
    <adminhtml>
    	<layout>
    		<updates>
    			<mytabs>
    				<file>mytabs.xml</file>
    			</mytabs>
    		</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/Prashant/Mytabs/Block/Adminhtml/Catalog/Product/Tab.php

<?php

class Prashant_Mytabs_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('mytabs/catalog/product/tab.phtml');
	}
	
	/**
	 * Retrieve the label used for the tab relating to this block
	 *
	 * @return string
	 */
    public function getTabLabel()
    {
    	return $this->__('My Tab');
    }
    
    /**
     * Retrieve the title used by this tab
     *
     * @return string
     */
    public function getTabTitle()
    {
    	return $this->__('Click here to view your my 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;
    }
?>

app/design/adminhtml/default/default/layout/mytabs.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_tab</name>
				<block>mytabs/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/mytabs/catalog/product/tab.phtml

<?php
/**
 * My tab template
 */
?>
<div class="input-field">
 <label for="custom_field">My Field</label>
 <input type="text" class="input-text" name="my_field" id="my_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.

Now finally saving custom my tab data in database.

app/code/local/Prashant/Mytabs/Model/Observer.php

<?php
 
class Prashant_Mytabs_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 {
				
				$myFieldValue =  $this->_getRequest()->getPost('my_field');
				$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();
    }
}
?>

Done……enjoy….:)