Magento Expert Forum - Improve your Magento experience

onet connect
Results 1 to 2 of 2

Magento Toplinks playaround and management

  1. #1
    Junior Member rocker's Avatar
    Join Date
    Mar 2013
    Thanked 11 Times in 9 Posts

    Thumbs up Magento Toplinks playaround and management

    Magento Top Links is one of the basic blocks in Magento that allows to create personal area for the customer within your online store. Top Links includes: Login/Logout, My Account, My Wishlist, My Cart and Checkout links. By default «Top links» are located in header, but they can be moved wherever you want if it’s needed.

    One of the most important differences between top links and regular static links is that when you add products to cart or to wishlist, top links automatically records products which were added.

    Example of Top links in default  Magento theme in the header.

    Usage of Top links in Magento

    At first we have to call the block.

    PHP Code:
    php echo this->getChildHtml(‘topLinks’?> 
    in template template/page/html/header.phtml, but creates in page.xml

    HTML 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=”” as=”topMenu”/>
    </ block>
    Now we need to add links to this block by using the command:

    HTML Code:
    <action method=”addLink” translate=”label title” ></action>
    We gotta make it in the following XML files:

    • Login/Logout, My Account – customer.xml
    • My Cart and Checkout – checkout.xml
    • My Wishlist – wishlist.xml

    It should be noted that link to  My Cart calls by the command:

    HTML Code:
    <action method=”addCartLink”></action>

    HTML Code:
    <action method=”addCheckoutLink”></action>
    for Checkout link.

    How to edit «Top Links» in Magento.

    All top links are based on template which is located here: page/template/links.phtml. Here you can add additional classes or commit needed changes.

    Rather often people want to separate links. For example Login/Logout and My Account should be on the left side and My Wishlist, My Cart and Checkout on the right side.

    like on the example below

    It is very easy to do:

    Open page.xml and create another block there, almost identical to “topLinks” but with name  ”topLinksLeft”;

    HTML Code:
    <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=”” as=”topMenu”/>
    <block type=”page/template_links” name=”top.links” as=”topLinks”/>
    </ block>
    In template template/page/html/header.phtml with help of the command:

    PHP Code:
    echo this->getChildHtml(‘topLinksLeft’?> 
    we can call our block in the proper place
    HTML Code:
    <h1 id=”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><?php echo $this->getChildHtml(‘topLinksLeft’) ?></div>
    <?php echo $this->getChildHtml(‘topLinks’) ?>
    <?php echo $this->getChildHtml(‘topMenu’) ?>
    When we got this done, open customer.xml  where we have to change name of the block which is responsible for Login/Logout, My Account. We are changing its name from “top.links” on “top.links.left” as in example:
    HTML Code:
    <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 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>
    We also can assign other template to the links which will be on the left ( rather useful in some cases) For that we just have to duplicate  template “page/template/links.phtml” and call it links_left.phtml. So now we have 2 templates “links.phtml” for the right side and “links_left.phtml” for the left side. Now all we need to do is just to connect it. For connection we use block «topLinksLeft» page.xml and change it to links_left.phtml.
    HTML Code:
    <block type=”page/html_header” name=”header” as=”header”>
    <block type=”page/template_links” name=”top.links” as=”topLinks”/>
    <block type=”page/template_links” name=”top.links.left” as=”topLinksLeft” template=”page/template/links_left.phtml” />
    </ block>
    Now you can apply different styles and HTML for left and right side.

     Wow, almost forgot about “Register” button which is usually located near the “Login/Logout” button. No worries about that as well. As you already guess we start from customer. xml file where we do next, if we want to add “Register” button to the top links:

    HTML Code:
    <reference name=”top.links”>
    <action method=”addLink” translate=”label title” module=”customer”> <label> Log In </ label> <url helper=”customer/getLoginUrl”/> <title> Log In </ title> <prepare /> <urlParams/> <position> 100 </ position> </ action>
    <action method=”addLink” translate=”label title” module=”customer”> <label> register </ label> <url helper=”customer/getRegisterUrl”/><title>register</title><prepare/><urlParams/><position>10</position></action>
    </ reference>
    </ customer_logged_out>

    View more threads in the same category:

  2. #2
    Junior Member
    Join Date
    Mar 2015
    hà nội việt nam
    Thanked 3 Times in 3 Posts


    Thank you for this post, It was a great read which was extremely helpful

Tags for this Thread


Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts