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

novembre 2, 2009 33 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

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

Liens complémentaires

Menu magento

Code
33 commentaires : “Menu vertical magento : comment lister les catégories et sous catégories”
  1. Mickael dit :

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

  2. admin dit :

    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.

  3. wanted971 dit :

    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

  4. wanted971 dit :

    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

  5. cédric rousset dit :

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

  6. wanted971 dit :

    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 ^^

  7. cédric rousset dit :

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

  8. wanted971 dit :

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

  9. cédric rousset dit :

    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.

  10. wanted971 dit :

    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

  11. cédric rousset dit :

    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.

  12. wanted971 dit :

    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.

  13. cédric rousset dit :

    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.

  14. cat dit :

    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

  15. cédric rousset dit :

    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 :)

  16. Yohan dit :

    Merci beaucoup pour ce tutoriel. Bonne continuation !

  17. choussamaster dit :

    merci pour ce tuto
    comment on peut donner une class différente a chaque lien du menu?
    merci

  18. cédric rousset dit :

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

  19. choussamaster dit :

    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

  20. cédric rousset dit :

    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.

  21. choussamaster dit :

    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{..}

  22. dAvydAv dit :

    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. ;)

  23. cédric rousset dit :

    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).

  24. dAvydAv dit :

    Ok, merci Cédric,

    cela fonctionne très bien, merci!

  25. Tremblay dit :

    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 !

  26. Tremblay dit :

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

    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()).'" />';
    				}
    	?>

    Bonne journée !

  27. adriencigo dit :

    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

  28. cédric rousset dit :

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

  29. Petergreenman dit :

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

    Merci par avance

  30. cédric rousset dit :

    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

  31. yannick dit :

    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

  32. cédric rousset dit :

    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{…}

  33. mousse dit :

    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 !

Poster un commentaire

(obligatoire)

(obligatoire)