Modifier les liens du header (top.links)

  • De le 17 septembre 2009
  • Difficulté : 2/4

Modifier les liens du header (top.links) Ajouter, modifier ou supprimer un lien de la référence "top.links" (Mon compte, Ma liste d'envies, Mon panier, Régler mes achats, connexion).

Les liens du header se gèrent simplement depuis les layouts (app/design/frontend/{interface}/{theme}/layout). Nous allons étudier dans un premier temps, pour les liens existants par défaut, la manière de les supprimer ou de les renommer, dans un second temps l'ajout d'un lien permanent statique, et enfin, la création d'un module pour "dynamiser" un lien depuis une méthode.

Supprimer un lien

Les références top.links sont déclarées dans 3 fichiers xml différents :

  • Mon compte / Connexion / Déconnexion : customer.xml
  • Ma liste d'envies : wishlist.xml
  • Mon panier / Régler mes achats : checkout.xml

Dans chacun de ces fichiers, il nous suffira de commenter ou de supprimer la déclarations des références top.links souhaitées.

Par exemple, si nous souhaitons supprimer le lien "Mon compte", nous commenterons simplement les lignes suivantes du fichier customer.xml :

app/design/frontend/{interface}/{theme}/layout/customer.xml

<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/>
          </action>
</reference>

Dans ce même fichier, les liens "connexion" et "déconnexion" sont déclarés distinctement, dans 2 événements différents : customer_logged_in et customer_logged_out. Un moyen simple de ne faire afficher un lien que lorsque l'internaute est connecté.

Modifier l'intitulé des liens

Pour modifier l'intitulé d'un lien existant ou d'un nouveau lien, ayez le réflexe "csv", notamment si votre site est multilingue ou si vous pensez qu'il le deviendra un jour. Les fichiers de langue facilitent également les mises à jour... Ainsi, pour transformer "Mon compte" en "Mon espace client" par exemple, éditez simplement le fichier Mage_Customer.csv :

app/locale/fr_FR/Mage_Customer.csv

"My Account","Mon compte"

De la même manière, pour modifier l'intitulé du lien "Mon panier", le fichier de langue à éditer est Mage_Checkout.csv :

app/locale/fr_FR/Mage_Checkout.csv

"My Cart","Mon panier"
"My Cart (%s item)","Mon panier (%s article)"
"My Cart (%s items)","Mon panier (%s articles)"

Pour finir, "Ma liste d'envies" est éditable depuis le fichier Mage_Wishlist.csv.

Ajouter un nouveau lien avec la méthode addLink

La méthode addLink de la classe Mage_Page_Block_Template_Links gère plusieurs paramètres :

app/code/core/Mage/Page/Block/Template/Links.php

public function addLink($label, $url='', $title='', $prepare=false, $urlParams=array(),
        $position=null, $liParams=null, $aParams=null, $beforeText='', $afterText='')
   {
      /* ... */
   }

Par défaut, si vous n'avez pas modifié le block page/template/links.phtml de votre thème, le paramètre liParams peut être utilisé pour ajouter un id à la balise li enveloppant le lien "Mon compte", et aParams pour le lien lui-même. afterText sera un texte placé à droite du lien (en dehors de la balise a), et beforeText à gauche. label représente l'intitulé du lien et title son titre. Les paramètres doivent être appelés dans l'ordre pour être correctement interprétés (et leur nom n'a en fait pas d'importance)...

app/design/frontend/{interface}/{theme}/layout/{type}.xml

<reference name="top.links">
          <action method="addLink" translate="label title">
                    <label>Nom du lien</label>
                    <url>ma-page.html</url>
                    <title>Titre du lien</title>
                    <prepare/>
                    <urlParams/>
                    <position />
                    <liParams>id="liste"</liParams>
                    <aParams>id="lien"</aParams>
                    <beforeText>Avant</beforeText>
                    <afterText>Apres</afterText>
          </action>
</reference>

Affichage du code sur la page

<li class="first" id="liste">
         Avant
         <a name="lien" title="Titre du lien" href="ma-page.html" id="lien">Nom du lien</a>
         Apres
</li>

Vous pouvez ainsi ajouter aisément un lien dans votre menu, en prenant garde de conserver une certaine logique (ne pas déclarer un lien dans n'importe quel xml).

Ajouter un lien avec une méthode personnalisée

Si l'on observe la déclaration de la référence top.links des liens "Mon panier" et "Ajouter à ma liste d'envie" dans le fichier checkout.xml, on constate qu'ils ne sont pas ajoutés directement depuis la méthode addLink, mais des méthodes addCartLink pour le panier et addCheckoutLink pour la liste d'envies (de la classe Mage_Checkout_Block_Links). Le block est donc de type checkout/links :

app/design/frontend/{interface}/{theme}/layout/checkout.xml

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

app/code/core/Mage/Checkout/Block/Links.php

<?php

class Mage_Checkout_Block_Links extends Mage_Core_Block_Template
{

public function addCartLink() { /* ... */ }

public function addCheckoutLink() { /* ... */ }

}

De cette manière, il est possible pour le lien "Mon panier", d'y juxtaposer dynamiquement le nombre d'articles ajoutés au panier. Pour supprimer ou améliorer cette fonctionnalité, 3 méthodes s'offrent à nous :

  • Déclarer le lien "Mon panier" simplement depuis la méthode addLink
  • Surcharger le block checkout/links
  • Créer un nouveau block depuis un module, avec une méthode personnalisée

Nous allons maintenant créer un nouveau module, qui de la même manière que pour le lien "Mon panier", ajoutera au lien "Mon compte" le nom du client s'il est connecté :

Header Top Links
  • app/code/local/Magentix/MyAccount/etc/
  • config.xml
  • app/code/local/Magentix/MyAccount/Block/
  • Links.php
  • app/ect/modules/
  • Magentix_MyAccount.xml

Déclarons dans un premier temps le nouveau block depuis le fichier de configuration :

app/code/local/Magentix/MyAccount/etc/config.xml

<?xml version="1.0"?>
<config>
    <modules>
        <Magentix_MyAccount>
            <version>0.1</version>
        </Magentix_MyAccount>
    </modules>
    <global>
        <blocks>
            <magentix_myaccount>
                <class>Magentix_MyAccount_Block</class>
            </magentix_myaccount>
        </blocks>
    </global>
</config>

Ajoutons ensuite la méthode qui se chargera de contrôler si le client est connecté ou non, et d'afficher le lien en conséquence (pour les paramètres de la fonction addLink, voir paragraphe "Ajouter un nouveau lien avec la méthode addLink") :

app/code/local/Magentix/MyAccount/Block/Links.php

<?php

class Magentix_MyAccount_Block_Links extends Mage_Core_Block_Template {

        public function addAccountLink() {
                if ($parentBlock = $this->getParentBlock()) {
                        $customer = Mage::getSingleton('customer/session');
                
                        $text = $this->__('My Account');
                        
                        if($customer->isLoggedIn()) $text = $this->__('My Account (%s)', $customer->getCustomer()->getName());
                        
                        $parentBlock->addLink($text, 'customer/account', $text, true, array(), 10, null, 'class="top-link-account"');
                }
                return $this;
        }
}

Nous pouvons enfin déclarer le nouveau module à Magento :

app/ect/modules/Magentix_MyAccount.xml

<?xml version="1.0"?>
<config>
    <modules>
        <Magentix_MyAccount>
            <active>true</active>
            <codePool>local</codePool>
        </Magentix_MyAccount>
    </modules>
</config> 

N'oublions pas d'éditer le fichier de langue Mage_Customer.csv afin d'ajouter la nouvelle entrée :

app/locale/fr_FR/Mage_Customer.csv

"My Account (%s)","Mon compte (%s)"

Retournons maintenant dans notre fichier du layout customer.xml. Pour afficher notre lien "dynamique", il suffit de déclarer le block de type "magentix_myaccount/links", et d'exécuter la méthode addAccountLink :

app/design/frontend/{interface}/{theme}/layout/customer.xml

<reference name="top.links">
    <block type="magentix_myaccount/links" name="myaccount_link">
        <action method="addAccountLink"></action>
    </block>
</reference>
commentaires

Commentez cet article : Modifier les liens du header (top.links)