Adding extra tab to category edit page in Magento

Question

I am trying to add an extra tab to the top of the category edit page. The default ones are: General Information, Display Settings, Custom Design and Category Products.

So I have created a new module that rewrites the block that generates the tabs. Here is the relevant snippet from config.xml:

    <blocks>

        <adminhtml>

            <rewrite>

                <catalog_category_tabs>

                    MyNamespace_MyModule_Block_Catalog_Category_Tabs

                </catalog_category_tabs>

            </rewrite>

        </adminhtml>

    </blocks>

Here is my block that overwrites the default Magento one:

class MyNamespace_MyModule_Block_Catalog_Category_Tabs extends Mage_Adminhtml_Block_Catalog_Category_Tabs
{

    protected function _prepareLayout()
    {
        $categoryAttributes = $this->getCategory()->getAttributes();
        if (!$this->getCategory()->getId()) {
            foreach ($categoryAttributes as $attribute) {
                $default = $attribute->getDefaultValue();
                if ($default != '') {
                    $this->getCategory()->setData($attribute->getAttributeCode(), $default);
                }
            }
        }

        $attributeSetId     = $this->getCategory()->getDefaultAttributeSetId();
        /** @var $groupCollection Mage_Eav_Model_Resource_Entity_Attribute_Group_Collection */
        $groupCollection    = Mage::getResourceModel('eav/entity_attribute_group_collection')
            ->setAttributeSetFilter($attributeSetId)
            ->setSortOrder()
            ->load();
        $defaultGroupId = 0;
        foreach ($groupCollection as $group) {
            /* @var $group Mage_Eav_Model_Entity_Attribute_Group */
            if ($defaultGroupId == 0 or $group->getIsDefault()) {
                $defaultGroupId = $group->getId();
            }
        }

        foreach ($groupCollection as $group) {
            /* @var $group Mage_Eav_Model_Entity_Attribute_Group */
            $attributes = array();
            foreach ($categoryAttributes as $attribute) {
                /* @var $attribute Mage_Eav_Model_Entity_Attribute */
                if ($attribute->isInGroup($attributeSetId, $group->getId())) {
                    $attributes[] = $attribute;
                }
            }

            // do not add grops without attributes
            if (!$attributes) {
                continue;
            }

            $active  = $defaultGroupId == $group->getId();
            $block = $this->getLayout()->createBlock($this->getAttributeTabBlock(), '')
                ->setGroup($group)
                ->setAttributes($attributes)
                ->setAddHiddenFields($active)
                ->toHtml();
            $this->addTab('group_' . $group->getId(), array(
                'label'     => Mage::helper('catalog')->__($group->getAttributeGroupName()),
                'content'   => $block,
                'active'    => $active
            ));
        }

        $this->addTab('products', array(
            'label'     => Mage::helper('catalog')->__('Category Products'),
            'content'   => $this->getLayout()->createBlock(
                'adminhtml/catalog_category_tab_product',
                'category.product.grid'
            )->toHtml(),
        ));

        // dispatch event add custom tabs
        Mage::dispatchEvent('adminhtml_catalog_category_tabs', array(
            'tabs'  => $this
        ));

        $this->addTab('myextratab', array(
            'label'     => Mage::helper('catalog')->__('My Extra Tab'),
            'content'   => 'Here is the contents for my extra tab'
        ));        

        return parent::_prepareLayout();
    }
}

Note the extra tab code:

        $this->addTab('myextratab', array(
            'label'     => Mage::helper('catalog')->__('My Extra Tab'),
            'content'   => 'Here is the contents for my extra tab'
        )); 

However, the right hand side of the screen is just blank. The category tree still remains but clicking on a category gives this Javascript error in Firebug: ReferenceError: category_info_tabsJsTabs is not defined

UPDATE: Having read this duplicate question and aswer on SO it looks like I have done everything. Is there some layout code I am missing?

Any help is massively appreciated.

Answer 1

1. Turn off cache and compilation, if you haven't done it already.

I rather used an event observer since I feel it less intrusive:

My modules config.xml

<?xml version="1.0" encoding="UTF-8"?>
<config>
    <modules>
        <Tzunghaor_Customtab>
            <version>0.1.0</version>
        </Tzunghaor_Customtab>
    </modules>

    <global>
        <models>
            <tzunghaor_customtab>
                <class>Tzunghaor_Customtab_Model</class>
            </tzunghaor_customtab>
        </models>

        <events>
            <adminhtml_catalog_category_tabs>
                <observers>
                    <tzunghaor_customtab_observer>
                        <class>tzunghaor_customtab/observer</class>
                        <method>addCategoryTab</method>
                    </tzunghaor_customtab_observer>
                </observers>
            </adminhtml_catalog_category_tabs>
        </events>

    </global>
</config>

tzunghaor_customtab/observer in the observer refers to the <class> prefix defined in <models>, so it refers to Tzunghaor_Customtab_Model_Observer that is in /app/code/local/Tzunghaor/Customtab/Model/Observer.php :

<?php
class Tzunghaor_Customtab_Model_Observer
{
    /**
     * Adds a custom tab to adminhtml category page
     * 
     * @param   Varien_Event_Observer $observer
     */
    public function addCategoryTab($observer)
    {
        $tabs = $observer->getEvent()->getTabs();
        $tabs->addTab('features', array(
            'label'     => Mage::helper('catalog')->__('My Extra Tab'),
            'content'   => 'Here is the contents for my extra tab'
        ));
    }
}