Search This Blog

Mar 28, 2011

Adding Top Links Menu for Magento

Having troubles adding links to the top menu across site wide and have active functionality in it? That was very simple task in Magento that need one (1) file to be edited. Default Magento Wiki describes this topic but only limited in About Us page which is running to be default. When making a CMS pages such as home, contact us, FAQ, etc… You need manually edit the top.phtml file of you magento theme in order to add those pages in your front end structure.

The first thing that you need to do is to locate the file where top menu is coded. Top menu is under top.phtml file which placed in this directory app/design/frontend/base/default/template/catalog/navigation/top.phtml. Next is to add the following code to nake those links visible in the front end.

Alternative Method in adding top links


<- The default code for top.phtml

<?php $_menu = $this->renderCategoriesMenuHtml(0,'level-top') ?>
<?php if($_menu): ?>
<div class="nav-container">
    <ul id="nav">
        <?php echo $_menu ?>
    </ul>
</div>
<?php endif ?>
This code will generate a navigation menu based on product category. To add other CMS pages (which created in magento Backend), replaced the above code by this.
<?php 
 $_currentUrl = Mage::helper('core/url')->getCurrentUrl();
 $_homeUrl = Mage::helper('core/url')->getHomeUrl();
?>

 <div class="nav-container">
<ul id="nav">
<?php echo $_menu; ?>  
     <li class="level0 nav-1 level-top <?php if ($_currentUrl === $_homeUrl.'contact'):?> active<?php endif;?>"><a href="<?php echo $this->getUrl('contact')?>"><?php echo  $this->__('Contact Us') ?></a> </li>
</ul> </div>


 <?php endif ?>

Yellow code : passing the helper class (getting home and current url ) in to variables. Green: represents the adding of list and anchor elements to the navigation. In a given example, contact us page is added in the top menu section. Contact Us page  must be created in Magento backend.
<?php if ($_currentUrl === $_homeUrl.'contact'):?>   
This code set active class if condition is met.
 <?php echo $this->getUrl('contact')?> 
Get the url of contact page or any cms page that you want to add.Please REMEMBER that the word inside quotation is the page identifier which you set up in creating that page. To add more menu, just create a cms page at the backend then copy the green code then replace the exact page identifier then you're superb.

Adding Top Links using XML

Adding top links in XML is quite simple just replace the top.links reference code by this one. For example we want to add My account and Contact Us page in when customer Login. Doing so, you need to edit the your customer.xml file which located in your theme/layout/customer.xml. Look for top.links reference node and Insert the following code. For other pages such as contact us please make sure that the url is equal to page url key that identified when creating cms pages. Code to be inserted:
<action method="addLink" translate="label title" module="customer"><label>My Account</label><url helper="customer/getAccountUrl"/><title>My Account</title><prepare/><urlParams/><position>94</position></action>

Your XML  code will look like this: 
<!--
Default layout, loads most of the pages
-->
    <default>

        <!-- Mage_Customer -->
        <reference name="top.links">
        
         <action method="addLink" translate="label title" module="customer"><label>My Account</label><url helper="customer/getAccountUrl"/><title>My Account</title><prepare/><urlParams/><position>94</position></action>   

            <action method="addLink" translate="label title" module="customer"><label>Contact Us</label><url>contacts</url><title>Contact Us</title><prepare>true</prepare><urlParams/><position>97</position></action>
        </reference>
    </default>

6 comments:

yogeshn said...

Thank you for your tutorial. I am on CE 1.5.1.1) I can't find page identifier when I create page by going to CMS>Pages>Add New Page. 2) top.phtml is located in app/design/frontend/BASE/default/template/catalog/navigation/top.phtml. You have to copy top.phtml into app/design/frontend/default/YOURTHEMENAME/template/catalog/navigation/

Your tutorial didn't work for me. 

Janzell Jurilla said...

Hi yogesh,

Thanks for spotting the error and sorry for missing those parts.1. page identifier -  I'm referring to the page url key. 
2. Default - Yes, you're correct the base package name of Magento is Base -  I changed the typos. 

Let me know If there's anything I can help with. 

Thanks

Alexander Drok said...

I think, it is more easy to solve using the extension for work with menu. Try this Menu Manager Pro http://mirasvit.com/magento-extensions/magento-advanced-menu-manager-pro.html

Magento Support Team said...

Hope this help http://menucreatorpro.com/livedemo/

Unknown said...

Are you ready to get started with the Power Magento Menu for your Magento Store?
- > Permission to show menu items follow customer’s groups.
- > Meets Magento programming practices for most versions and customizations compatibility .
- > Responsive design on every devices(Mobile phone, Smart phone, Tablet, Phablet, Big screen), 100% open source.
- > Completely customizable in admin section. Drag & Drop to order menu item in a group, group by group …
- > Supports FF3+, IE7+, Opera, Safari, Chrome.
- > Lifetime bug free guarantee.

Power Magento Menu is the best extension that helps you to build up menus for your site and display it on front-end without
touching the layout/template files. Menu Creator supports 5 differrent template styles(Horizontal, Vertical,
Exploded, Tree and List) and 10 pre-defined positions(Menu-Top, Menu-Bottom, Sidebar-Left-Top, SidebarLeft-Bottom, Content-Top, Sidebar-Right-Top, Sidebar-Right-Bottom, Page-Bottom).
Please visit our store at: http://mage-menu.com/

Unknown said...

Are you ready to get started with the Power Magento Menu for your Magento Store?
- > Permission to show menu items follow customer’s groups.
- > Meets Magento programming practices for most versions and customizations compatibility .
- > Responsive design on every devices(Mobile phone, Smart phone, Tablet, Phablet, Big screen), 100% open source.
- > Completely customizable in admin section. Drag & Drop to order menu item in a group, group by group …
- > Supports FF3+, IE7+, Opera, Safari, Chrome.
- > Lifetime bug free guarantee.

Power Magento Menu is the best extension that helps you to build up menus for your site and display it on front-end without
touching the layout/template files. Menu Creator supports 5 differrent template styles(Horizontal, Vertical,
Exploded, Tree and List) and 10 pre-defined positions(Menu-Top, Menu-Bottom, Sidebar-Left-Top, SidebarLeft-Bottom, Content-Top, Sidebar-Right-Top, Sidebar-Right-Bottom, Page-Bottom).
Please visit our store at: http://mage-menu.com/