Adding Link to Top Links Section in Magento

In this blog, we will look into the correct way to adding an extra link, to the top links section in magento.

If you are wondering what are top links, it’s the links that you see in the header section i.e My Cart, My Account, My Wishtlist, etc.

Magento Header Top Links

Magento Header Top Links

Top-links are managed in magento through layout xml files. To add a link to top links, we need to add xml code to layout files.

Existing Top Links

Lets first look at where the existing top links are coming from.

  • My Account: link is found in the customer.xml file.

         <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>10</position></action>
            </reference>
        </default>
    

    To know the meanings of these please read our blog on layouts.
    So, here we are taking the reference of “top.links” block, and calling the “addLink” function on that block.
    The “top.links” block is defined in page.xml

    <block type="page/template_links" name="top.links" as="topLinks"/>
    

    The “addLink” function is defined in Mage_Page_Block_Template_Links. The definition of the function is

    public function addLink($label, $url='', $title='', $prepare=false, $urlParams=array(),
            $position=null, $liParams=null, $aParams=null, $beforeText='', $afterText='')
    

    Also the phtml file where the html code for this is written is ‘page/template/links.phtml’.

  • My Wishlist: The xml for this is found at wishlist.xml
           <reference name="top.links">
                <block type="wishlist/links" name="wishlist_link">
                    <action method="addWishlistLink"></action>
                </block>
            </reference>
    
  • My Cart and Checkout: The xml for these is found at checkout.xml
    <default>
    
            <!-- Mage_Checkout -->
            <reference name="top.links">
                <block type="checkout/links" name="checkout_cart_link">
                    <action method="addCartLink"></action>
                    <action method="addCheckoutLink"></action>
                </block>
            </reference>
            <reference name="right">
                <block type="checkout/cart_sidebar" name="cart_sidebar" template="checkout/cart/sidebar.phtml" before="-">
                    <action method="addItemRender"><type>simple</type><block>checkout/cart_item_renderer</block><template>checkout/cart/sidebar/default.phtml</template></action>
                    <action method="addItemRender"><type>grouped</type><block>checkout/cart_item_renderer_grouped</block><template>checkout/cart/sidebar/default.phtml</template></action>
                    <action method="addItemRender"><type>configurable</type><block>checkout/cart_item_renderer_configurable</block><template>checkout/cart/sidebar/default.phtml</template></action>
                </block>
            </reference>
            <reference name="head">
                <block type="core/template" name="optional_zip_countries" as="optional_zip_countries" template="directory/js/optional_zip_countries.phtml" />
            </reference>
    
        </default>
    
  • Login and Log Out: links are found in the customer.xml
    <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>10</position></action>
            </reference>
        </default>
    
Adding More Links To The Top Links

Suppose we need to add a new link to top links, lets say a link for a CMS page called Terms and Conditions. To do this open a layout file, let say customer.xml and add the below code:

<default>
<reference name="top.links">
  <action method="addLink" translate="label title">
	<label>Terms and Condition</label>
	<url>terms</url>
	<title>Terms and Condition</title>
	<prepare>true</prepare>
	<position>2</position>
  </action>
</reference>
</default>

This code should a new link to top links.


Things To Keep in Mind When Dealing With The Top Links

  1. In the top links, when you add item to your wishlist or cart, the links My Cart and My Wishlist change to My Cart(2) and My Wishlist(2). So you need to keep this in mind, if you making any changes to these top links.
  2. The Login link turns into a Logout link, so if you make any changes to the Login link you will have to do the same for the Logout link