In the first part of the series on toplinks we learned how to add links to the top menu. In this text we’ll show you how to change the position and the look of the links. Let’s get started!
First changes.
Let’s go back to the links.phtml file. Now we’ll do something that will help us understand the discussed objects better: we’ll add our own link to the list of the existing ones. In order to do that, we’ll use the addLink() method.
Type in the following code:
<?php
$label = 'My Link';
$url = '/test.php';
$title = 'My test link';
$this->addLink($label, $url, $title);
?>before the line:
<?php $_links = $this->getLinks(); ?>and save the file. Refresh the page and voilà!
A new link appeared on the list. Pretty good. But why is it at the end of the list? A quick look at the prototype of the addLink() method and we know what we’re missing: the $position parameter.
So we need to change the line:
$this->addLink($label, $url, $title);to the following one:
$this->addLink($label, $url, $title, false, false, 1);And it’s done. Our link is first. Easy!
However, it doesn’t look good. After all, it’s our link – it should be big!… and white. A piece of cake! Let’s take another look at the definition of the method:
public function addLink($label, $url='', $title='', $prepare=false, $urlParams=array(),
$position=null, $liParams=null, $aParams=null, $beforeText='', $afterText='')We’re interested in the $aParams parameter which allows adding any list of attributes in the form of an array to an <a> tag . All of what we’re going to say below concerns also the $liParams and $urlParams parameters – the first of which modifies the list and the second one the URL.
We want to change the font size and its colour. We can either add an adequate class or submit information on styles directly in the ‘style’ attribute. We choose the second option, even though in a real project it would be best to simply add a class and define its look using CSS. Regardless of the choice, the rule is always the same.
Let’s change the previously written code to the following one:
<?php
$label = 'My Link';
$url = '/test.php';
$title = 'My test link';
$aParams = array(
'style' => 'color: white; font-size: 20px',
);
$this->addLink($label, $url, $title, false, false, 1, null, $aParams);
?>We’ve added the parameters as an array. We can submit any number of additional attributes. Every pair key=>value from the submitted array is processed to the syntax attributeName=attributeDefinition. In our case it’s: style=’color: white; font-size: 20px’. In practice, you should also remember to submit the existing path to the $url parameter. Otherwise, you’ll get the 404 error.
Let’s refresh the page now. Our link has changed as expected.
Beautiful, isn’t it? Well… maybe not exactly, but it’s ours. And it works.
Now you know how to add and manipulate links. You know which block provides methods performing the operations.
But still, this is not enough. Where do the links come from? They are defined neither in the block nor in the template. Well, let’s have a closer look at the issue then.
Tell me where you come from and I’ll tell you who you are.
Here is the list of all links and the files with the code that defines them:
| Link Name | Path |
| My Account | app\design\frontend\default\default\layout\customer.xml |
| Wishlist | app\code\core\Mage\Wishlist\Block\Links.php |
| My Cart | app\code\core\Mage\Checkout\Block\Links.php |
| Checkout | app\code\core\Mage\Checkout\Block\Links.php |
| Login/Logout | app\design\frontend\default\default\layout\customer.xml |
Understanding how they have been added is key and we will focus on this issue in the remaining part of the article.
Let’s start from “My Account”, ”Login” and “Logout” links.
<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>
<urlParams/><position>10</position></action>
</reference>
</default>The “Login” and “Logout” links are added in an analogical way.
Top.links is a Mage_Core_Page_Template_Links class. The <action> tag calls the addLink() method of this class. The addLinks() method has the following prototype:
“public function addLink($label, $url=”, $title=”, $prepare=false, $urlParams=array(),
$position=null, $liParams=null, $aParams=null, $beforeText=”, $afterText=”)”
The sequence of the parameters given in the XML block has to be the same as the one written in the prototype. It means that, as in the above example of the “My Account” link, if we want to define the value of the <position> parameter, we have to provide all preceding parameters as defined with a specified value or as self-closing empty tags, e.g. <prepare/>.
All parameters in the addLink() method, except for $prepare, are obvious. The $prepare parameter takes a bool type value and plays a specific role. Let’s take a look at the following:
‘url’ => ($prepare ? $this->getUrl($url, (is_array($urlParams) ? $urlParams : array())) : $url),
This is one of the parameters of an object representing a link. We can see that by setting the prepare value to true we’ll get a URL generated with the getUrl() method. It’s helpful especially when we want to submit the URL together with the parameters. Then, we can do it by submitting them in the form of an array and the getUrl() method will do the rest.
Knowing it all, we can add links to any registered layout file or change the existing ones by modifying relevant parameters without any problems. A piece of cake.
The remaining links (“Wishlist”, “My cart” and “Checkout”) are also added in the relevant XML files: wishlist.xml and checkout.xml, but using the addLinkBlock() method. Their definitions are given in the files specified in the table above; this is also where they should be modified. They inherit after the already known Mage_Page_Block_Template_Links class.
