Magento Top Links: How To Configure Them For Your Store

That is why you should know how to configure “Top Links’ in Magento ®.

What Magento “Top Links”

“Top Links” is one of the main blocks in Magento ® system. The basic online store URLs are formed there. It is also called top menu. This block contains all buttons which your customers or guest users may need, such as Login/Logout, My Account, My Wishlist, My Cart, and Checkout. By default, this block is located at the top of your store page or in the header.

The main difference between top links and other links on your site is that they are static. However, the content of pages to which these links direct may change depending on user’s actions.

For example, ‘My Wishlist’ link: when a customer adds a product to their Wishlist that product will appear on the page once ‘My Wishlist’ link is clicked. Along with that, there are no additional actions needed to be performed by a user, in this case, the process is absolutely automatic.

How Top Links are called

The following code is responsible for the output of Top Links block:

<?php echo this->getChildHtml('topLinks') ?>

It is located in file template/page/html/header.phtml. The configuration of the necessary URLs is done in file page.xml. You can view available links in this part of code:

<block type="page/html_header" name="header" as="header">
	<block type="page/template_links" name="top.links" as="topLinks"/>
	<block type="core/text_list" name="top.menu" as="topMenu"/>
</block>

Beside that you can remove some of these links here you can also add other blocks in Magento ® Top Links. For that, you need to type the following code:

<action method="addLink" translate="label title" >…</action>

The code should be added to files customer.xml (buttons Login/Logout, My Account), checkout.xml (buttons My Cart and Checkout) and wishlist.xml (button My Wishlist).

You also need to make a note in these files that you call the links using ‘action’ method. For that, you need to type the opening tag <action method=”addCartLink”></action> and closing tag – <action method=”addCheckoutLink”></action>.

How to configure Top Links

Sometimes online store owners need to make some changes to their site, either for experimental purposes or for additional configuration of themes for Magento ®, etc.

For example, you need to split the line ‘Top Links’ into two parts. In order to do that, go to the file page.xml. You need to create an additional block in it that would tell the system that there are some Top Links which should be located on the left (right) side of the page. Let’s say that block is called topLinksLeft:

<block type="page/html_header" name="header" as="header">
	<block type="page/switch" name="store_language" as="store_language" template="page/
  switch/languages.phtml"/>
	<block type="core/text_list" name="top.menu" as="topMenu"/>
	<block type="page/template_links" name="top.links" as="topLinks"/>
	<block type="page/template_links" name="top.links.left" as="topLinksLeft"/>
</block>

Then go to the section ‘template’, locate page/html and open file header.phtml. Here, you need to ‘inform’ Magento ® that a new block must be displayed on the left side:

<?php echo this->getChildHtml(‘topLinksLeft’) ?>

You need the code provided below:

 
<div class="header">
	<h1 id="logo" class="logo" title="<?php echo $this->getLogoAlt() ?>" style="
  background-image:url(<?php echo $this->getLogoSrc() ?>);"><a href="<?php echo 
  $this->getUrl('') ?>"><?php echo $this->getLogoAlt() ?></a></h1>
	<div class="toplinksleft"><?php echo $this->getChildHtml('topLinksLeft') ?></div>
	<?php echo $this->getChildHtml('topLinks') ?>
	<?php echo $this->getChildHtml('topMenu') ?>
</div>

After saving changes go back to customer.xml. Add a few lines of code in which you change the name of the block where the links are displayed:

<customer_logged_in>
	<reference name="top.links.left">
    	<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>
	<reference name="top.links.left">
    	<action method="addLink" translate="label title" module="customer"><label>Log Out
      </label><url helper="customer/getLogoutUrl"/><title>Log Out</title><prepare/>
      <urlParams/><position>100</position></action>
	</reference>
</customer_logged_in>

So, you need to replace top.links with top.links.left and save the changes.

In such a way, you can modify the Top Links according to your needs. In order to learn more about Magento ® options please review other articles in our GoMage blog, or contact our development company directly.