Need help buying now? +48-22-219-5163 +1-917-720-3250
My Cart

Your Cart is Empty

Need help buying now?
+48-22-219-5163 +1-917-720-3250

How to configure "Top Links" in Magento

How to configure Top Links in Magento

Configuration of the top menu is the main task of any online store owner or administrator. It is important to not only consider all peculiarities of the menu block perception by users but also to be able to configure the system properly. That is why you should know how to configure “Top Links’ in Magento.

What “Top Links” are

“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. 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 in 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 that site, either for experimental purposes or for additional configuration of Magento themes, 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 Magento development company directly.

Newsletter