Afficher les produits dans le menu de navigation principale

  • De le 30 mai 2010
  • Difficulté : 3/4

Afficher les produits dans le menu de navigation principale Les menus déroulants sur les sites e-commerce se complexifient de plus en plus. Outre la traditionnelle hiérarchisation et classification des catégories, il n'est pas rare d'y voir apparaître offres promotionnelles et produits. Ces menus s'élargissent et prennent parfois la totalité de l'espace disponible (Cdiscount, Tati...).

Ce module ne fonctionnera plus pour les versions de Magento supérieure à la 1.7.0.0. Magento utilise maintenant la classe Mage_Page_Block_Html_Topmenu pour l'affichage du menu.

Utiliser le menu de navigation principale pour communiquer autour d'une offre promotionnelle ou d'un produit phare (nouveauté, promotion, bestseller...) est un excellent moyen d'attirer et de guider l'internaute vers un produit incontournable qu'il ne doit pas manquer. C'est une technique à la mode, très bien exploitée sur le site de Tati ouvert récemment (Tati.fr) :

Tati

Tati offre ici un menu de navigation géant sur lequel il est facile de s'orienter, et auquel vient s'ajouter pour chacune des catégories un produit sélectionné pour son prix plutôt attractif. C'est également un excellent moyen d'égayer le menu et d'appuyer l'intitulé de la catégorie par un visuel des produits qu'elle contient.

Le développement d'un petit module pour Magento peut nous permettre d'associer et d'afficher facilement un produit dans les catégories du menu de navigation principale. L'idée est d'ajouter sur la fiche produit de l'administration une nouvelle option nommée "Activer dans le menu". Le produit apparaîtra alors dans la catégorie correspondante.

Affichage d'un produit dans le menu

Architecture du module

  • app/code/local/Magentix/NavigationProduct/Block/
  • Navigation.php
  • app/code/local/Magentix/NavigationProduct/etc/
  • config.xml
  • app/code/local/Magentix/NavigationProduct/sql/navigationproduct_setup/
  • mysql4-install-0.1.0.php
  • app/etc/modules/
  • Magentix_NavigationProduct.xml

Développement du module

Dans un premier temps nous allons surcharger le bloc utilisé pour l'affichage du menu principale. Il s'agit du bloc Mage_Catalog_Block_Navigation. L'objectif est d'y ajouter une méthode permettant de récupérer un produit spécifique en fonction de la catégorie à laquelle il est associé.

Le bloc Mage_Catalog_Block_Navigation présente une fonction récursive nommée drawItem chargée d'établir la hiérarchisation du menu. Nous allons la modifier afin de permettre l'ajout d'un produit en bas de la liste des sous-catégories.

app/code/local/Magentix/NavigationProduct/Block/Navigation.php

<?php

class Magentix_NavigationProduct_Block_Navigation extends Mage_Catalog_Block_Navigation {

     public function drawItem($category, $level=0, $last=false) {
          $html = '';
          if (!$category->getIsActive()) {
               return $html;
          }

          /* ... (Voir app/code/core/Mage/Catalog/Block/Navigation.php) */

          if ($hasChildren){

               $j = 0;
               $htmlChildren = '';
               foreach ($children as $child) {
                    if ($child->getIsActive()) {
                         $htmlChildren.= $this->drawItem($child, $level+1, ++$j >= $cnt);
                    }
               }

               if (!empty($htmlChildren)) {
                    $html.= '<ul class="level' . $level . '">'."\n"
                              .$htmlChildren
                              /***** Ajout *****/
                              .$this->getProduct($category,$level)
                              /* ************* */
                              .'</ul>';
               }

          }
                
          $html.= '</li>'."\n";
          return $html;
     }

}

Une fois la méthode drawItem modifiée, il ne reste plus qu'à écrire la méthode getProduct. Celle ci accepte en paramètre la catégorie actuelle et le niveau (level) du menu. Dans notre exemple seule la catégorie de niveau 0 pourra afficher un produit.

app/code/local/Magentix/NavigationProduct/Block/Navigation.php

<?php

class Magentix_NavigationProduct_Block_Navigation extends Mage_Catalog_Block_Navigation {

     public function drawItem($category, $level=0, $last=false) {

          /* ... */

     }

     public function getProduct($category,$level) {
          $product = '';
        
          if($level == 0) {
               $category = Mage::getModel('catalog/category')->load($category->getId());
        
               $_productCollection = Mage::getResourceModel('catalog/product_collection')
                         ->addAttributeToSelect('name')
                         ->addAttributeToSelect('small_image')
                         ->addAttributeToFilter('product_navigation',1)
                         ->addCategoryFilter($category)
                         ->setPageSize(1);
                        
               foreach($_productCollection as $p) {
                    $product = '<li class="nav-product">
                              <a href="'.$p->getProductUrl().'"><img src="'.Mage::helper('catalog/image')->init($p, 'small_image')->resize(150).'" alt="'.$p->getName().'" class="nav-product-img" /></a>
                              <a href="'.$p->getProductUrl().'"><span>'.$p->getName().'</span></a>
                              </li>';      
               }
                
          }
                
          return $product;
     }
}

Nous récupérons une collection de produits filtrés sur la catégorie et sur un nouvel attribut appelé product_navigation. Le nombre de produit est limité à 1 grâce à la méthode setPageSize. Nous parcourons ensuite la collection comportant un unique produit, puis établissons son affichage. Dans cet exemple nous ne souhaitons afficher que le nom du produit et son visuel, il est bien sûre possible de sélectionner d'autres attributs au sein de la collection (addAttributeToSelect).

Il nous faut ensuite définir le nouvel attribut product_navigation. Celui ci sera ajouté lors de la première initialisation du module dans Magento :

app/code/local/Magentix/NavigationProduct/sql/navigationproduct_setup/mysql4-install-0.1.0.php

<?php

$installer = $this;

$installer->startSetup();

$installer->addAttribute('catalog_product', 'product_navigation', array(
                        'type'              => 'int',
                        'backend'           => '',
                        'frontend'          => '',
                        'label'             => 'Activer dans le menu',
                        'input'             => 'boolean',
                        'global'            => 1,
                        'visible'           => 1,
                        'required'          => 0,
                        'user_defined'      => 1,
                        'default'           => 0,
                        'searchable'        => 0,
                        'filterable'        => 0,
                        'comparable'        => 0,
                        'visible_on_front'  => 0,
                        'unique'            => 0,
                    ));

$installer->endSetup();

Nous pouvons enfin éditer le fichier de configuration afin de spécifier la surcharge du bloc et le setup à exécuter :

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

<?xml version="1.0"?>
<config>
     <modules>
          <Magentix_NavigationProduct>
               <version>0.1.0</version>
          </Magentix_NavigationProduct>
     </modules>
     <global>
          <blocks>
               <catalog>
                    <rewrite>
                         <navigation>Magentix_NavigationProduct_Block_Navigation</navigation>
                    </rewrite>
               </catalog>
          </blocks>
          <resources>
               <navigationproduct_setup>
                    <setup>
                         <module>Magentix_NavigationProduct</module>
                         <class>Mage_Catalog_Model_Resource_Eav_Mysql4_Setup</class>
                    </setup>
                    <connection>
                         <use>core_setup</use>
                    </connection>
               </navigationproduct_setup>
          </resources>
     </global>
</config>

Puis on active le module :

app/etc/modules/Magentix_NavigationProduct.xml

<?xml version="1.0"?>
<config>
    <modules>
        <Magentix_NavigationProduct>
            <active>true</active>
            <codePool>local</codePool>
             <depends>
                 <Mage_Catalog />
             </depends>
             <version>0.1.0</version>
        </Magentix_NavigationProduct>
    </modules>
</config>

Une fois le module déclaré à Magento, il est nécessaire d'associer le nouvel attribut product_navigation aux groupes d'attributs produit.

Groupe d'attributs

Il suffit ensuite d'activer le produit depuis sa fiche :

Activation du produit

Note : le menu est mis en cache par Magento, pour que les modifications soient prises en compte il est nécessaire d'actualiser le cache.

On peut finalement intégrer visuellement le produit depuis le fichier CSS du template. Le code HTML généré ici est le suivant :

Code HTML généré

<li class="nav-product">
     <a href="/produit-1.html"><img src="..." alt="Plateau aromatique" class="nav-product-img"></a>
     <a href="/produit-1.html"><span>Plateau aromatique</span></a>
</li>
commentaires

Commentez cet article : Afficher les produits dans le menu de navigation principale