0

I am using Magento 1.8.1, and I couldn't find any solution to replace the text links 'My Account', 'My Wishlist', 'My Cart', 'Log In', Log Out' for icons/image links for my Mobile responsive version.

When I inspect my page hint path I have these files that appears: - header.phtml file [/app/design/frontend/default/[Theme]/template/page/html] in which I have the following code that I cannot replace text link by images since my Text links are not directly explicitly mentioned here (so I cannot call a class in my css):

    <?php echo $this->getChildHtml('store_switcher') ?>
        <div class="form-language">
        <?php echo $this->getChildHtml('store_language')?>  
        </div>  
        <div class="currency">
        <?php echo $this->getChildHtml('custom_currency_selector') ?>
        </div>  
        <div class="minicart">
        <?php echo $this->getChildHtml('top_cart') ?>
        </div>

        <div class="clear"></div>   
        <?php echo $this->getChildHtml('topLinks') ?>                   
  • From links.phtml [/app/design/frontend/default/[Theme]/template/page/template] I have the following code that also appear when I do a code inspection:

    <?php $_links = $this->getLinks(); ?>
    <?php if(count($_links)>0): ?>
    <ul class="links"<?php if($this->getName()): ?> id="<?php echo $this->getName() ?>"<?php endif;?>>
    <?php foreach($_links as $_link): ?>
        <?php if ($_link instanceof Mage_Core_Block_Abstract):?>
            <?php echo $_link->toHtml() ?>
        <?php else: ?>
            <li
            <?php if($_link->getIsFirst()||$_link->getIsLast()): ?> 
                class="<?php if($_link->getIsFirst()): ?>first<?php endif; ?><?php if($_link->getIsLast()): ?>last<?php endif; ?>"
            <?php endif; ?>
            <?php echo $_link->getLiParams() ?>>
            <?php echo $_link->getBeforeText() ?><a href="<?php echo $_link->getUrl() ?>" title="<?php echo $_link->getTitle() ?>" <?php echo $_link->getAParams() ?>><?php echo $_link->getLabel() ?></a><?php echo $_link->getAfterText() ?>
                </li>
        <?php endif;?>
    <?php endforeach; ?>
    </ul>
    

Which is impossible to retrieve the relevant class to call it on my css file in order for me to put an image. Note I believe text links are called with the following code:

.links { text-align: right; }
.links li { display:inline; padding: 1px 10px 1px 5px; background: url(../images/toplinksap.png) no-repeat center right; }
.links li.first { padding-left:0 !important; }
.links li.last { background:none !important; padding-right:0 !important; }

In which xml file such as customer.xml [app/design/frontend/default/blanco/layout] gives the position of the links for example for 'My Account' I have the following code:

<default>
    <!-- Mage_Customer -->
    <reference name="top.links">
        <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>
</default>

So my questions are how can I replace the label "My Account" by an image? (code if not relevant which file should I modify with which code + images path for uploading purpose are appreciated).

1

I explain this question by using CSS as technique to answer.

The addLink action inside the layout XML is a little bit tricky and before changing the corresponding list entry you need to remove it and add it again to change it as you want.

Remove the link entry (I take 'My Account' as example). In your template's local.xml add:

<default>
    <reference name="root">
    ...
        <reference name="top.links">
            <action method="removeLinkByUrl"><url helper="customer/getAccountUrl"/></action>

Notice we are using the method removeLinkByUrl which is Magento core.

After that you can add 'My Account' by the following layout XML:

             <action method="addLink" translate="label title" module="customer">
                <label>My Account</label>
                <url helper="customer/getAccountUrl"/>
                <title>My Account</title>
                <prepare/>
                <urlParams/>
                <position>1</position>
                <liParams/>
                <aParams>class="top-link-account"</aParams>
            </action>
        ...
        </reference>
    ...
    </reference>
...
</default>

Note you are able to set a CSS class for your newly added 'My Account' link. Now you are set to do your CSS magic for your responive design.

@media only screen and (max-width: 767px) {
    .links li a.top-link-account {
        font-size: 0 !important;
        ...
    }
    .links li a.top-link-account:before {
        content: "\f084";     # fontawesome unicode (fa needs to be present)
        ...
    }
...
}

Be aware that Magento uses different states for the current user session. So the login link entry is not handled inside the default XML node but inside <customer_logged_in> and <customer_logged_out>.

The wishlist link entry is handled inside wishlist.xml. Look at the node <customer_account>. I'm sure you can change it by yourself by now (but use your local.xml)...

Edit: Well, this won't help you, as it only addresses the link list inside the customer account page. The wishlist link is added by:

...
<reference name="top.links">
    ...
    <action method="addLinkBlock"><blockName>wishlist_link</blockName></action>
...

inside wishlist.xml. Fortunately addLinkBlock supports <aParams>. So remove the added blocklink and add again, with a needed CSS class like:

...
    <action method="removeLinkBlock"><blockName>wishlist_link</blockName></action>
...

and add it again with:

...
    <action method="addLinkBlock"><blockName>wishlist_link</blockName><aParams>class="top-link-wishlist"</aParams></action>
...

Now we come to the 'My Cart' link. Look into checkout.xml and find that the cart link is added with:

<default>
    <!-- Mage_Checkout -->
    <reference name="top.links">
        <block type="checkout/links" name="checkout_cart_link">
            <action method="addCartLink"></action>
            <action method="addCheckoutLink"></action>
        </block>
    </reference>

That's a tough one? Well, luckily it already has the CSS class top-link-cart, so do some CSS magic I mentioned above. The next level would be to add the number of items inside your cart to your icon. Please add another question for that, because this would be another story (also applies to the wishlist link). The most templates I know don't use the 'My Cart' link to avoid this at all.

I hope that helped and gave you some more insides on Magento's layout XMLs.

  • Thank you very much Ni Ge for the time spent on it, As I am not familiar with XML my question may sounds stupid, I would like to know what it is expected to have in "...", and should I leave "root" as you mentioned?: <default> <reference name="root"> ... <reference name="top.links"> <action method="removeLinkByUrl"><url helper="customer/getAccountUrl"/></action If you can clarify according to my directory path mentioned in my post it would be really useful – Joel Sep 15 '15 at 10:55
  • First, you don't need to copy any of Magento's XML files inside your template folder. Simply use local.xml and reference to the according block you want to rebuild/change/delete. After <layout> start with <default> to reference to the default (standard) view. Be sure to rebuild the XML hierarchy so your layout updates find the right block. If you don't have a local.xml yet just ignore the ... and build it from scratch like described. To make it clear: put everything inside your local.xml. More info inchoo.net/magento/… – Nicolas Sep 15 '15 at 19:04
  • Hello Ni Ge!!!! Sorry for late reply it works!!!! Thanks a lot!!!! – Joel Sep 26 '15 at 13:59
  • Yes sure, beside I have a question for the wishlist in which the code is not working, should I post two others questions on Stackexchange for 'Wishlist' and 'My Cart'? – Joel Sep 26 '15 at 16:25
  • Here is the post for the Wishlist if you can answer: stackoverflow.com/questions/32799624/… – Joel Sep 26 '15 at 17:02

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.