Let's say we want to add a shopping cart icon right before the "My Cart" link on Magento's top links (see top links below).
What is the best way to do this?
I understand that this can be done with CSS, but as my needs for customization grow, I want to know how this can be done without CSS so I am able to customize more difficult things.
In any case do not edit the template file (links.phtml). This serves as a general template for all link lists. For example it is used for the links in the footer also.
With toplinks.php you can do whatever you want because is deprecated since CE v1.4.0.1.
I recommend using the xml files that add the links to the top container to achieve what you need.
The addLink method that is called when adding a new link supports some parameters that allow you to add classes and other attributes on li and a tags in the links and some text before the link and after the link.
public function addLink($label, $url='', $title='', $prepare=false, $urlParams=array(),
$position=null, $liParams=null, $aParams=null, $beforeText='', $afterText='')
{ ... }
If you want to add an icon to my account menu you can set the $beforeText to <span class="icon"></span> and add some styles on the icon class.
For the cart and checkout links it's a little trickier because they are added via a block object not directly from the layout file.
If you need something different for the cart or checkout lins all you have to do is override the methods Mage_Checkout_Block_Links::addCartLink() or Mage_Checkout_Block_Links::addCheckoutLink(). These 2 call the same addLink() and you can pass different parameters to it.
Mage_Checkout_Block_Links::addCartLink()
<span class="icon"></span> as the beforeText you have to enclose it like so <![CDATA[<span class="icon"></span>]]>. The XML parser picks up new lines too, so you have to put it right after the opening tag: <beforeText><![CDATA[<span class="icon"></span>]]></beforeText>
In case you need to apply custom template only for Top Links, you can do it like this in your theme's local.xml:
<default>
<reference name="top.links">
<action method="setTemplate">
<template>page/template/my_links.phtml</template>
</action>
</reference>
<default>
Then copy page/template/links.phtml and rename it to page/template/my_links.phtml and do whatever you need inside that new template file.
To add a custom link to Top Links via local.xml:
<reference name="top.links">
<action method="addLink" translate="label title">
<label>My Link</label>
<url>path/to/page</url>
<title>My link tooltip</title>
<prepare>true</prepare>
<urlParams/>
<position>150</position>
<liParams>id="my-custom-id"</liParams>
</action>
</reference>
Also see this page: http://www.classyllama.com/development/magento-development/editing-magentos-top-links-the-better-way
<?php foreach($_links as $_link): ?>. You can add any HTML inside that loop.
Please find this path to change top links :
/app/design/frontend/base/default/layout/customer.xml
and search for: Log In (In my case).
Now change title and label with your desired text.
You need to edit the following 2 files.
app/design/frontend/default/default/layout/checkout.xml
app/design/frontend/default/default/layout/customer.xml
In these files, the links are added in name="top.links". Just comment them out.
