Jun 13, 2013

Magento Tutorial: How to Customize the Top Links Block

Learn About Our Magento Services

Adding and removing links to the top.links block is all handled through layout XML files. It took me awhile to understand the amount of control you actually have through this method but without touching any HTML you can do just about anything with them.

To start I always add two sections for edit in my local.xml file:

<customer_logged_out>

 

</customer_logged_out>

<customer_logged_in>

 

</customer_logged_in>

 

You reference the block with the following XML: <reference name=”top.links”></reference>

 

So to add and remove things from the menu the starting point would look like the following:

<customer_logged_out>

<reference name=”top.links”>
</reference>

</customer_logged_out>

<customer_logged_in>

<reference name=”top.links”>
</reference>

</customer_logged_in>

 

These take into account if the person has logged into your site or not. Let's start with customizing what an anonymous user would see. With a base install of Magento the default theme showcased here: http://demo.magentocommerce.com/ will give you the following links: My Account, My Wishlist, My Cart, Checkout, and Log in.

Most of the time for an anonymous user I think it's a bit redundant to show this many links as My Account, My Wishlist, and Log In are all going to send you to the log in page. For some sites you may not be using the wishlist functionality and if the module is turned off in the backend that link will disappear on it's own, but if you are using it but don't want the link to show up there you can add the following XML:

<remove name=”wishlist_link” />

 

I also tend to remove the account link when the user isn't logged in so my layout.xml would contain the following:

<customer_logged_out>

<reference name=”top.links”>
<remove name=”wishlist_link” />
<action method=”removeLinkByUrl”>
<url helper=”customer/getAccountUrl”/>
</action>

</reference>

</customer_logged_out>

 

Removing links is a great starting place but adding them is even more powerful. You could use this menu for any links you wanted just by customizing this snippet:

<customer_logged_out>

<reference name=”top.links”>
<action method="addLink" translate="label title">
<label>About Us</label>
<url>about-us</url>
<title>About Us</title>
<prepare>true</prepare>
<urlParams helper="core/url/getHomeUrl"/>
<position>1</position>
<liParams/>
<aParams>
<class>about</class>
</aParams>
<beforeText></beforeText>
<afterText></afterText>
</action>
</reference>

</customer_logged_out>

 

The above code would add a link titled About Us and would go to: www.yourstoreurl.com/about-us
To fully understand this snippet I'll explain the useful tags one at a time:

Label: The text that lives inside the anchor tag url: The url not including the domain. For example www.yourstoreurl.com/about-us would just have about-us

Title: The value that lives in the title parameter of the anchor tag

liParams / aParams: allows you to add classes or other parameters to the list item and/or anchor tags

beforeText / afterText: Adds unlinked test before / after the link. The markup would look like this:

<li>Before text <a href=”about-us”>About Us</a> After text</li>

 

Another nice trick to use for beforeText, afterText, and Label is you can add HTML but you have to escape the < >. For example adding a span class inside of the anchor tag can be done:

<label>&lt;span class="icon-gift"&gt;&lt;/span&gt;&lt;/span&gt; My Wishlist</label>