Menu vertical magento : comment lister les catégories et sous catégories

novembre 2, 2009 35 Commentaires

Nous allons voir dans ce tutoriel comment ajouter un menu vertical à magento grâce au code. L’autre application possible est de lister les catégories et sous catégories de magento dans une page spécifique (la page catégorie par exemple).

Code de Déclaration du block dans une catégorie

Accéder à une catégorie admin => catalogue => gérer les catégories. Dans l’onglet design personnalisé => XML d’agencement de mise à jour.
Rajoutez ce code

<reference name="left">
	  <block type="catalog/navigation" before="-" name="navlateral" template="catalog/navigation/navlateral.phtml"/>
</reference>

Créer le template

Placez le template navlateral.phtml dans : app\design\frontend\default\default\template\catalog\navigation\ Copiez collez ce code :

<div class="box base-mini mini-navigation">
    <div><h4><?php echo "navigation" ;?></h4></div>
    <div>
 
	  <?php // liste category mère ?>
	  <p> liste category mère </p>
	   <ul class="nav">
        <?php foreach ($this->getStoreCategories() as $_category): ?>
            <?php echo $this->drawOpenCategoryItem($_category) ?>
        <?php endforeach ?>
        </ul>
 
	 <?php //liste category et sous category  ?>
	  <p> liste category mère et sous catégory </p>
     	<ul class="nav">
        <?php foreach ($this->getStoreCategories() as $_category): ?>
            <?php echo $this->drawItem($_category) ?>
        <?php endforeach ?>
        </ul>
    </div>
</div>

Explication

Le code xml permet de lier le block « catalog/navigation » à un nouveau template que nous créons « navlateral.phtml ». Le block catalog/navigation est situé dans le core de magento.

\magento\app\code\core\Mage\Catalog\Block\Navigation.php

Le template aura donc accès aux méthodes de cette classe ainsi que toutes les classes étendues par celle-ci. Les méthodes qui nous intéressent pour ce tutoriel, sont drawn et drawOpenCategoryItem qui renvoient les catégories et sous catégories en mode Html, avec des liens vers celle-ci. Voici le résultat du menu vertical en image.
J’ai fait une présentation sommaire en CSS, libre à vous de l’améliorer. J’ai simplement ajouté ce code dans le CSS de mon thème ( tutoriel CSS et magento).

.nav {margin:5px;}
.nav li { padding:10px;}

Menu vertical magento liste les catégories et sous catégories

Liens complémentaires

Menu magento

$_imgHtml = ''; if ($_imgUrl = $_category->getImageUrl()) { $_imgHtml = 'htmlEscape($_category->getName()).'" title="'.$this->htmlEscape($_category->getName()).'" />'; $_imgHtml = $_helper->categoryAttribute($_category, $_imgHtml, 'image'); }

helper('catalog/output'); ?> getStoreCategories() as $_category): ?> load($_category->getId()); $layer = Mage::getSingleton('catalog/layer'); $layer->setCurrentCategory($cur_category); if ($_imgUrl = $this->getCurrentCategory()->getImageUrl()) { $_imgHtml = 'htmlEscape($_category->getName()).'" title="'.$this->htmlEscape($_category->getName()).'" />'; } ?>

35 commentaires : “Menu vertical magento : comment lister les catégories et sous catégories”

Mickael dit :

18 novembre 2009 à 11 h 05 min

bonjour
super tutoriel
j’aimerai faire la même chose mais sur la page d’accueil de magento comment je pourrai faire ?
admin dit :

18 novembre 2009 à 19 h 18 min

Salut,
c’est le même principe pour la page d’accueil de magento. Il faut que ta home soit avec des colonnes ici pour respecter le tutoriel avec une colonne droite.
wanted971 dit :

29 décembre 2009 à 7 h 34 min

Hello, je continue le fil de ma discusion ici, désolé, je n’avais pas vu ce tuto qui est clair comme de l’eau de roche.
Malgré sa clarté ^^, je rame toujours. Rajout du code et création phtml ok. Rajout en « test » également sur page index mais rien n’y fait. J’ai toujour cette pub et newsletter dans ma colonne de gauche et rien d’autre. Test fait sur template default et Hardwood. Je dois louper ZE truc essentiel mais je ne vois pas lequel. Merci d’avance
wanted971 dit :

29 décembre 2009 à 8 h 27 min

Merci pour ton tuto, je l’avais zappé celui-là.
Donc, modification de la page index partie design perso effectué et création du phtml également. Heuréka un début de modif est visible, bien entendu, direct bon aurait été trop simple ^^. Voilà ce que j’ai sur ma colonne de gauche :
navigation
liste category mère

liste category mère et sous catégory

Mieux que rien mais pas vraiment le résultat recherché. Merci par avance pour ton aide
cédric rousset dit :

29 décembre 2009 à 10 h 22 min

Salut,
je vois que tu avance
Tu voulais les catégories sur la colonne de droite non ?
Quel résultat recherche tu ?
wanted971 dit :

29 décembre 2009 à 11 h 47 min

J’avance j’avance lol vite dit, j’ai fait une boulette dans la gestion des magasins et j’ai des 404 partout, donc réinstallation totale car je n’ai plus acces à rien. Sinon, pour revenir au sujet, home page et les pages de catégories – articles devraient avoir sur la colonne de gauche la liste des catégories avec un explode des sous catégories si click et également un menu similaire mais reprenant les boutiques (fournisseurs chez moi). Je commence à comprendre la structure c’est déjà pas mal ^^
cédric rousset dit :

29 décembre 2009 à 12 h 51 min

Des que tu as re installé magento, envois le lien je regarderai ce que tu as fait avec menu vertical.
wanted971 dit :

29 décembre 2009 à 19 h 02 min

Voilà, réinstallé, il ne donne pas l’impression de trouver ma catégorie de test (lien à mon pseudo)
cédric rousset dit :

29 décembre 2009 à 19 h 18 min

Je pense que c’est normal tu as aucune catégorie active , si c’était le cas elle serait en haut dans la barre de navigation. Vérifie que ta catégorie est active dans le back-office de magento.
wanted971 dit :

29 décembre 2009 à 20 h 02 min

Que néni ^^ Si si activée, enfin sauf si il exite 2 endroits mais j’ai renomé pour le test la catégorie racine, elle est bien active et porte l’id 2 et l’article test y est lié. Bon je continue à fouiller
cédric rousset dit :

30 décembre 2009 à 15 h 55 min

Ha bon c’est quenini ^^
Avant de vouloir ajouter un menu vertical il faut régler ton problème de catégorie qui ne s’affiche pas dans la barre menu.
ta catégorie ajoute la a la catégorie mère de Magento celle que tu avais après l’installation. C’est peut être aussi a cause de ton thème essaye de remettre le thème défaut pour voir si ta catégorie apparaît dans la barre de menu. Si ça marche pas reprends un chocolat c Noël. Non mais le ça va marcher.
wanted971 dit :

2 janvier 2010 à 9 h 51 min

bon, j’avance, réussis à mettre une catégorie à gauche donc elles sont bien actives. En fait au niveau config magasin j’ai changé la catégorie par défaut. Rien dans le header par contre.
cédric rousset dit :

2 janvier 2010 à 16 h 45 min

Bravo je vois les catégories sur le cotes gauche. Tu as as réussi le menu vertical. En haut c’est peut être ton thème qui désactive le menu horizontal. Mais avoir deux menu cest pas l’idéal c’est soit vertical soit horizontal. Tu as gagne ta première étoile Magento.
cat dit :

3 mars 2010 à 9 h 30 min

si dans admin => catalogue => gérer les catégories => design personnalisé, on ne voit pasd’onglet ‘XML d’agencement de mise à jour’ (je le vois dans =>CMS gestion des pages). est ce un bug de magento (Version 1.4.0.1)?
Merci
cédric rousset dit :

3 mars 2010 à 9 h 42 min

Bonjour,
Dans la version 1.4 ça ce trouve dans onglet design personnalisé => Custom Layout Update. Je n’ai pas essayer le tutoriel avec la version 1.4
merci de repasser pour le dire si ça marche
Yohan dit :

24 mars 2010 à 13 h 29 min

Merci beaucoup pour ce tutoriel. Bonne continuation !
choussamaster dit :

9 avril 2010 à 22 h 11 min

merci pour ce tuto
comment on peut donner une class différente a chaque lien du menu?
merci
cédric rousset dit :

10 avril 2010 à 6 h 17 min

Bonjour,
Il faut allez dans le core de magento et modifier la méthode
drawItem ou drawOpenCategoryItem
Le faire proprement sous forme de module.
choussamaster dit :

10 avril 2010 à 16 h 14 min

j’ai copié
\app\code\core\Mage\Catalog\Block\Navigation.php
dans
\app\code\local\Mage\Catalog\Block\Navigation.php
et fait la modication sur le fichier dans local et c’est parfait mais est ce que ce fichier sera conservé même après mise a jour?
Merci
cédric rousset dit :

10 avril 2010 à 16 h 30 min

Tu pourrais mettre les modifications que tu as faites, si d’autres lecteurs cherchent à faire pareil, ils bénéficieront de ton retour

Pour les mises a jours oui pas de problème, le seul souci serait que magento modifie ou change de place le fichier navigation.php de place (mais peut probable). Vérifie quand même avant une mise à jour de magento.
choussamaster dit :

11 avril 2010 à 17 h 46 min

pour ceux que ça intéressera de donner une id différente a chaque lien du menu pour le personnaliser
copier
\app\code\core\Mage\Catalog\Block\Navigation.php
dans
\app\code\local\Mage\Catalog\Block\Navigation.php
cherchez public function drawOpenCategoryItem($category) {
un peu plus bas (ligne289 environ)
remplacez
$html.= ‘getCategoryUrl($category).’ »>’.$this->htmlEscape($category->getName()).’‘. »\n »;

par

$html.= ‘htmlEscape($category->getId()).’ » href= »‘.$this->getCategoryUrl($category).’ »>’.$this->htmlEscape($category->getName()).’‘. »\n »;

Par exemple la catégorie dont l’id et 2 aura comme id= »cat2″ que vous pouvez sélectionner par le css
#cat2{..}
dAvydAv dit :

30 avril 2010 à 12 h 50 min

Bonjour,

Plutot que de mettre une mise à jour du layout, si j’insere la commande xml dans catalog.xml, ca marche aussi??

Merci pour la qualité de ton blog , au passage.
cédric rousset dit :

1 mai 2010 à 5 h 52 min

Bonjour dAvydAv,
Oui tu peux le mettre dans catalog.xml, dans ce cas le code s’appliquera à toutes les catégories de magento ( ça dépends dans quel noeaud xml tu mets le code).
dAvydAv dit :

8 mai 2010 à 7 h 46 min

Ok, merci Cédric,

cela fonctionne très bien, merci!
Tremblay dit :

21 mai 2010 à 13 h 19 min

Bonjour,
J’ai donc bien réussi à afficher mes catégories sur ma page Home mais j’aimerais beaucoup aussi afficher les images de ces catégories ! J’ai donc repris le code du template ‘catalog>category>view.phtml’ :
```
$_imgHtml   = '';
    if ($_imgUrl = $_category->getImageUrl()) {
        $_imgHtml = 'htmlEscape($_category->getName()).'" title="'.$this->htmlEscape($_category->getName()).'" />';
        $_imgHtml = $_helper->categoryAttribute($_category, $_imgHtml, 'image');
    }
```
J’ai essayé de l’adapter à ton code mais je n’arrive pas du tout à récupérer la moindre image ! Au début je pensais que c’était à cause de mon problème d’images mais enfait non car elles s’affichent bien sur les pages de catégories !

Merci beaucoup ! Bonne journée ensoleillée !

Tremblay dit :

24 mai 2010 à 14 h 19 min

Résolu, voici le code pour ceux qui en auraient besoin :

Bonne journée !

adriencigo dit :

1 octobre 2010 à 11 h 14 min

une question j’aimerai faire des catégories accessibles par un lien direct mais qui ne soient pas visible dans la liste pour ça je met Include in Navigation Menu à non mais les catégories apparaissent toujours comment faire pour ne pas les afficher?
car si je les sort de la catégorie racine par défaut de magento les lien me donnent une erreur 404
cédric rousset dit :

1 octobre 2010 à 11 h 50 min

Bonjour,
Le cache à été vidé ? ça devrait fonctionner.
voir aussi le re index des données.
Petergreenman dit :

6 mai 2011 à 21 h 01 min

Merci de m’indiquer comment faire pour afficher le menu sur la colonne de gauche de la page d’accueil

Merci par avance
cédric rousset dit :

7 mai 2011 à 7 h 08 min

Bonjour,
il faut suivre le tuto et coller le 1er code (reference name…) dans CMS page > la page accueil > habillage personnalisé > XML de mise à jour d’agencement. Si tu n’es pas a l’aise avec le code magento utilise un module. Tu en trouvera plein sur magento connect pour gérer un menu vertical, un ex :
http://www.magentocommerce.com/magento-connect/Pixel+Vietnam/extension/2201/vertical-sidebar-menu
yannick dit :

15 octobre 2011 à 12 h 32 min

Bonjour,

Merci pour ce tuto, c’est exactement ce que je recherchais, mais maintenant mon problème est que j’aimerais différencier visuellement par css les catégories et les sous-catégories, mais je ne vois pas comment repérer d’une part la catégorie et de l’autre la sous-catégorie dans ton code, pourtant quand on voit la capture d’écran de ta navigation on voit que tu les a différencier par mais dans ton code ça ne ce voit pas. J’espère avoir était clair dans ma demande. Merci
cédric rousset dit :

16 octobre 2011 à 8 h 10 min

Bonjour,
Tu as 2 class ul=nav, change le nom des classes et affecte à la première une classe pour styliser tes catégories
nav.li{…}
mousse dit :

26 novembre 2012 à 0 h 46 min

Bonjour et merci pour ce tuto !
=> ca marche nickel mais je souhaiterais afficher les categories lorsque je suis dans une sous categorie.( oula je suis pas clair là…)

1) mes categories : a b c d
2) sous categories : a1 a2 b1 b2…

qd je suis dans a1, je souhaiterais afficher a1 a2 et là ca ne marche pas… une idée ?

merci !
indioline dit :

6 mai 2014 à 10 h 14 min

Bonjour, comment masquer une catégorie dans la barre de menu, qu’elle soit uniquement accessible par une icône placée sur la page d’accueil.
Cordialement, JJB
cédric rousset dit :

7 mai 2014 à 7 h 28 min

Bonjour,
Il faut allez dans la catégorie options inclure dans le menu > non
Ensuite il faut copier coller l’url de la catégorie ( voir le champ url )
sur la page d’accueil faire le liens vers cette catégorie

Menu vertical magento : comment lister les catégories et sous catégories

Code de Déclaration du block dans une catégorie

Créer le template

Explication

Liens complémentaires

35 commentaires : “Menu vertical magento : comment lister les catégories et sous catégories”

Poster un commentaire

Articles récents

Liens

Suivez-nous

Intégrateur magento payé au ko

Module versionning pour les pages CMS et les Blocs statiques

Commentaires récents