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 check below details.In magento to add custom tab in product edit section of admin is possible through adding a standard data(attribute) to a product but if we don’t want to add through this way and want to do on different way means through programmatic way.

In this article I have explained you how to add custom tab in product edit section of admin through 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 user hits the save button

Create the extension:

First create the extension’s setup’s file ,which loads the extension into magento:

app/etc/module/JR_customtabs.xml
< ?xml version="1.0"?>

    
        
            true
            local
        
    

This file will register the extension in magento.This tells magento to look in the file app/code/local/JR/Customtabs/ directory for the extension’s code.

The next file we will make for extension’s setup file which contains information about extension’s classes,layout file and some other files you need to work.

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

In this module I have crated a event in section.To save the product data ,magento hooks for an event that is triggerred when ever a product is saved in magento admin .This allow to access the custom data we have created in tab and save it.

app/code/local/JR/Customtabs/Model/Observer
< ?xml version="1.0"?>

    
        
            true
            local
        
    
    
        
            JR_Customtabs_Block
        
    
    
        
            customtabs.xml
        
        
            
                
                    singleton
                    customtabs/observer
                    saveProductTabData
                
            
        
    

app/code/local/JR/Customtabs/Block/Adminhtml/Catalog/Product/Tab.php
< ?php
class JR_Customtabs_Block_Adminhtml_Catalog_Product_Tab 
extends Mage_Adminhtml_Block_Catalog_Product_Edit_Tabs
implements Mage_Adminhtml_Block_Widget_Tab_Interface
{
    public function _construct(){
        parent::_construct();
        $this->setTemplate('customtabs/catalog/product/tab.phtml')
    }
    public function getTabLabel(){
        return $this->('My Customt Tabs');
    }
    public function getTabTitle(){
        return $this->__('Click here to view your custom tab content');
    }
    public function canShowTab(){
        return true;
    }    
}
?>

This is a big file and is the main code file for my tab. This file extends Mage_Adminhtml_Block_Template,which is the base Adminhtml template and doesn’t do much.The tab block can extend any block file in magento.On it’s own,the above code won’t do anything as I haven’t included it yet.Lets include it now by creating a layout XML file for my extension.

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

this is the layout file for the Adminhtmlsection of the extension.In here I will include the tab on the Magento Product edit page.

< ?xml version="1.0"?>

    
        
            
                my_custom_tab
                customtabs/adminhtml_catalog_product_edit
            
        
    

This file is little simple but witout 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/layout/customtabs/catalog/product/tab.phtmlml

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

Tetsing the my custom admin tab:

Lets refresh the cache first and go to the product edit page and see the tab in action.If you don’t see your custom tab check through your xml again as a slight error in any of that will stop everything working.Now that we have our tab,lets 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 file 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 triggered our code when a product model saved from the model admin.

app/code/local/JR/Customtabs/Model/Observer.php
< ?php 
class JR_Customtabs_Customtabs_Model_Observer
{
    static protected $_singletonFlag = false;
    public function saveProductTabData(varien_Event_Observer $observer)
    {
        if(!self::$_singletonFlag){
            self::$_singletonFlag = true;
            $product = $observer->getEvent()->getProduct();
            try{
                $customFieldValue $this->_getRequest()->getPost('custom_field');
                //$product->save();//uncomment this to save the product.
            }catch(Exception $e){
                Mage::getSingleton('adminhtml/session')->addError($e->getMessage());
            }
        }
    }
    public function getProduct(){
        return Mage::registry('product');
    }
    protected function _getRequest(){
        return Mage::app()->getRequest();
    }
}

WRAPPING:

This extension you have written is very simple one which will allow you to add custom tab in product edit section of admin.This concept can be applied to any of the section like categories,customers etc.so take the time to study the code and to understand how it works.

Second method:

There are two ways to add custom tab in product edit section of admin in magento.First section: lets add a tab for a custom module.Add the folling code to your config.xml file in the global scope.


    ....
        
            JR_Customtabs_Block
        
        
            
                JR_Customtabs_Block_Adminhtml_Tabs
            
        
    ....

After that you should create a new file :

Namespace/Modulename/Block/Adminhtml/Product/Tab.php

.Please check the below file fro the content.

< ?php
class Namespace_ModuleName_Block
{
    private $parent;
    protected function _prepareLayout(){
        $this->addTab('tabid',array(
            'label'=>mage::helper('catalog')->__('New tab'),
            'content'=>$this->getLayout()->createBlock('modulename/admin_tabs_tabid')->toHtml(),
        ));
        return $this->parent;
    }
}

The code above rewrites the system function which generates the layout and adds the tab.Next you need to create a file :

Namespace/Modulename/Block/Adminhtml/Product/Tab/Tabid.php

Second method:

< ?php
class Namespace_ModuleName_Block_Adminhtml_Tabs_Tabid extends Mage_Adminhtml_Block_Widget
{
    public function __construct(){
        parent::__construct();
        $this->setTemplate('modulename/newtab.phtml');
    }
}

Second method :

Simple copy the file app/code/core/Mage/Adminhtml/Block/Catalog/Product/Edit/Tabs.php to local folder (app/code/local/Mage/Adminhtml/Block/Catalog/Product/Edit/Tabs.php) and add the following snippet to the function _prepareLayout()

$this->addTab('tabid',array(
    'label'=>mage::helper('catalog')->__('New tab'),
    'content'=>$this->getLayout()->createBlock('modulename/admin_tabs_tabid')->toHtml(),
));
Please don’t forget to comment.Hopefully you enjoy this article.
Add custom tab in product edit section of admin
Tagged on:                         

Leave a Reply

Your email address will not be published. Required fields are marked *