22

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).

enter image description here

What is the best way to do this?

  1. Do something to toplinks.php?
  2. Do something to links.phtml?
  3. An xml file?
  4. Any other options?

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.

12

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.

  • 1
    This is exactly the kind of explanation I was looking for. I definitely have a lot of learning in front of me, but now I have an idea on where to start. I am going to try to add my icon (from bootstrap) with the following text $beforeText='<i class="icon-shopping-cart"></i>' - Thank you! – Raphael Rafatpanah Apr 16 '13 at 15:01
  • Which XML file would I use for this? – Raphael Rafatpanah Apr 16 '13 at 15:02
  • I explained that for the cart and checkout links you cannot do this from the layout file. You need to override the method Mage_Checkout_Block_Links::addCartLink() – Marius Apr 16 '13 at 15:03
  • 1
    Ok. I am assuming to override the method I need to add a file to my custom theme files and call the method there, which will override its previous instance. Would you mind pointing me in the right direction, for example, which file would contain the Mage_Checkout_Block_Links method. Is it links.php? – Raphael Rafatpanah Apr 16 '13 at 15:09
  • If you go the XML route (which you definitely should) take note, that in order to use <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> – jmk Jun 3 '15 at 13:43
9

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

  • Using this method, would I be able to add html between each link? – Raphael Rafatpanah Apr 16 '13 at 16:32
  • @RaphaelRafatpanah Yes, in links.phtml there is a loop <?php foreach($_links as $_link): ?>. You can add any HTML inside that loop. – zitix Apr 16 '13 at 16:45
  • But then it would be added to each link, yes? I am looking to add customized html between each link. Also, I believe the foreach loop gets used for the footer links as well as the header links so if I add html between links, they will be also applied to the footer links. – Raphael Rafatpanah Apr 16 '13 at 16:47
  • 1
    That's the trick: after you create page/template/my_links.phtml (which is a copy of original links.phtml) and after you add the code I posted to your local.xml, that template will be used only to render Top Links. Not footer links or any other links. – zitix Apr 16 '13 at 16:56
  • 1
0

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 should not edit core files! – Black Oct 9 '18 at 8:34
-1

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.

  • 2
    Welcome to Magento SE. While this answer works, the question was explicitly about best practices and editing core files is anything but best practice in Magento. – Fabian Schmengler Aug 29 '16 at 11:45

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.