Merchant Stories

Top Menu Customization in Magento ®

Dec 12, 2014 2 min read 116 views
Listen audio
Top Menu Customization in Magento ®

Creation of a convenient menu is one of the basic factors of increasing sales for an online store. In order to develop the most convenient access to the main menu items, it is necessary to know how Top Menu customization is done in Magento ®.

What is top menu customization

Customization is the creation of new items in the main menu according to specific categories. Such action will help you to develop the most easy-to-use and understandable site design. Customization can be done in any site menu and many programmers think that it is better to work with the main Top Menu.

In order to add certain items to the Top Navigation Menu, those items should correspond to existing product categories. Implementation of other categories into this site section is done with the help of a specific algorithm. It often happens you need to place a simple link or a non-product category in the main navigation menu.

A piece of advice: many internet marketing specialists insist that the top navigation menu should contain links to separate site pages (‘About us’, ‘Shipping rules’, etc.). There are several solutions for that task:

1. Create a ‘fake’ category which must redirect to the necessary page once its button is clicked;

2. Make modifications to Magento ® core;

3. Create a specific extension for Magento ®.

The first variant is quite simple for beginning programmers, but some search engines may consider such customization approach as cloaking. Besides, it will take significant time to realize such functionality for each necessary option in the top menu.

Making changes to Magento ® core leads to serious consequences. Firstly, in most cases, it has a very bad influence on further upgrades for Magento ®. Secondly, if you unintentionally remove at least one core file the whole store may go down at once.

The third way is the most logical and safe for your business. You can create a module that will add any random page you need. In order to start creating it, go to app/code/local folder and create a folder ‘My’ inside it, and then create a folder ‘Module’ inside ‘My’. Then, you need to create one more folder – ‘etc’ – inside the folder ‘Module’ and in that folder, you should place a file config.xml.

The file config.xml must contain the following code:

<config>
<frontend>
		<events>
		<page_block_html_topmenu_gethtml_before>
			<observers>
				<my_module_add_to_menu>
						<type>singleton</type>
					<class>My_Module_Model_Observer</class>
					<method>addToTopmenu</method>
				</my_module_add_to_menu>
			</observers>
		</page_block_html_topmenu_gethtml_before>
		</events>
</frontend>
</config>

 

 

In order for the module to be enabled, go to app/etc/modules folder and create a file My_Module.xml inside it. This file will be responsible for initialization of the module. The file must contain the following code:

<config>
	<modules>
	<My_Module>
	<active>true</active>
	<codePool>local</codePool>
	</My_Module>
	</modules>
</config>

 

 

Save the changes and go back to My/Module/Model folder. There, you need to create a file Observer.php. This file will define a method which should be used to realize the method of the module customization – addToTopmenu. Use the code below:

class My_Module_Model_Observer
{
 
public function addToTopmenu(Varien_Event_Observer $observer)
{
	$menu = $observer->getMenu();
	$tree = $menu->getTree();
 
	$node = new Varien_Data_Tree_Node(array(
        	'name'   => 'categories',
        	'id' 	=> 'categories',
        	'url'	=> Mage::getUrl(), // point somewhere
	), 'id', $tree, $menu);
 
	$menu->addChild($node);
 
	// Children menu items
	$collection = Mage::getResourceModel('catalog/category_collection')
            ->setStore(Mage::app()->getStore())
        	->addIsActiveFilter()
        	->addNameToResult()
        	->setPageSize(3);
 
	foreach ($collection as $category) {
    	$tree = $node->getTree();
    	$data = array(
        	'name'   => $category->getName(),
        	'id' 	=> 'category-node-'.$category->getId(),
        	'url'	=> $category->getUrl(),
    	);
 
    	$subNode = new Varien_Data_Tree_Node($data, 'id', $tree, $node);
    	$node->addChild($subNode);
	}
}
 
}

 

 

Pay attention that the line ‘categories’ defines the categories which will be added to the top navigation menu. If you have any questions regarding this type of customization for Magento ® please leave your comments or consult with our development team.

That's where you contact us!

    By submitting this form you agree to GoMage's Terms of Use and Privacy Policy
    woo-hoo! Now its time to keep checking your inbox, as we will be getting in touch soon. Promise :)
    oops! Thanks. But it seems like some kind of technical issues stop you from meeting GOMAGE. Could you try again?