Des templates spécifiques aux catégories pour les pages listes et détail dans Magento

De base, Magento propose un template de page liste (list.phtml) et de page détail (view.phtml) par défaut pour l’ensemble de vos catégories. Nous avons donc été très rapidement confrontés à un problème de mise en place d’une structure et d’un design différent selon les catégories. Il existe un certain nombre de techniques différentes, de code éparpillé sur différents blogs pour pallier à ce problème. Voila la technique que nous avons choisi d’utiliser à chaque nouveau projet sous Magento à Canal-web.

Pour une meilleur compréhension de cette article, nous partons du principe que vous utilisez déjà un module vous permettant de surcharger le Core de Magento. Si ce n’est pas le cas je vous renvoie à ce très bon article qui vous permettra de comprendre l’utilité d’un tel module et qui vous expliquera la marche à suivre pour le mettre en place : Magento – utiliser un module local de surcharge

Les templates de liste (list.phtml) sont configurables depuis le back office

La méthode que nous utilisons pour mettre en place un template différent pour nos pages de listes selon la catégorie est une technique assez classique. Elle utilise le système de surcharge des layouts via le back office de Magento.

Une fois connecté à votre back office, dans la page d’édition de votre catégorie (Catalogue ->Gérer les catégories -> Sélectionner la catégorie voulue), accédez à l’onglet « Design personnalisé ».  A cette endroit, Magento vous propose de modifier le design, l’agencement des pages, etc (…) selon votre catégorie sélectionnée. Ici, seul le champ « Custom Layout Update » nous est utile.

Voici un exemple de code qui nous permettra de lier un template de list.phtml à notre catégorie :

<br />
&lt;reference name=&quot;product.info&quot;&gt;<br />
	&lt;action method=&quot;setTemplate&quot;&gt;<br />
		&lt;template&gt;catalog/product/list-custom.phtml&lt;/template&gt;<br />
	&lt;/action&gt;<br />
&lt;/reference&gt;<br />

Voila ce que cela donne dans Magento :

Visiter le site de Canal E-commerce

Vous souhaitez en savoir d'avantage sur les différentes solutions e-commerce que propose Canal-web ?

Visiter Canal E-commerce

Les templates de détail (view.phtml) sont également configurables depuis le back office…

Au départ nous utilisions la même méthode que pour la page list.phtml, en ajoutant ce genre de code au même endroit que ci-dessus :

<br />
&lt;reference name=&quot;product.info&quot;&gt;<br />
	&lt;action method=&quot;setTemplate&quot;&gt;<br />
		&lt;template&gt;catalog/product/view-custom.phtml&lt;/template&gt;<br />
	&lt;/action&gt;<br />
&lt;/reference&gt;<br />

Par contre pour que le champ « Custom Layout Update » soit pris en compte sur la page détail il faut sélectionner « oui » dans le champ « Apply To Products ».

Mais cette technique à montré très rapidement ses limites : nous voulions mettre en place un template de page view.phtml selon la catégorie, mais avec un agencement différent de la page liste. Or, le fait d’appliquer ces design personnalisé au produit (Aply to products) ne permet pas de différencier un agencement entre la page liste et la page détail.

…mais la méthode par les layouts nous semble plus judicieuse

Après avoir fouillé un peu sur le web, nous nous sommes rendu compte que Magento donne la possibilité, dans les layout, d’utiliser les handle suivant :

<br />
&lt;PRODUCT_TYPE_simple&gt;<br />
code actif pour les produits simple<br />
&lt;/PRODUCT_TYPE_simple&gt;<br />

 

<br />
&lt;PRODUCT_44&gt;<br />
code actif pour le produit ID = 44<br />
&lt;/PRODUCT_44&gt;<br />

Magento définit ce système de handle dans app/code/core/Mage/Catalog/Helper/Product/view.php, à la ligne 59 et 60…

<br />
$controller-&gt;addActionLayoutHandles();</p>
<p>$update-&gt;addHandle('PRODUCT_TYPE_' . $product-&gt;getTypeId());<br />
$update-&gt;addHandle('PRODUCT_' . $product-&gt;getId());</p>
<p>$controller-&gt;loadLayoutUpdates();<br />

…il nous suffit donc de surcharger cette class, dans le module de surcharge, pour y ajouter cette ligne :

<br />
$controller-&gt;addActionLayoutHandles();</p>
<p>$update-&gt;addHandle('PRODUCT_TYPE_' . $product-&gt;getTypeId());<br />
$update-&gt;addHandle('PRODUCT_' . $product-&gt;getId());<br />
$update-&gt;addHandle('PRODUCT_CATEGORY_' . $product-&gt;getCategoryId());</p>
<p>$controller-&gt;loadLayoutUpdates();<br />

Ce code va nous donner la possibilité d’avoir un handle du type :

<PRODUCT_CATEGORY_id-de-votre-categorie>

Ce qui nous permet d’écrire un  xml personalité pour notre page détail de catégorie.

Exemple de code pour une catégorie ayant l’ID 3 :

<br />
&lt;PRODUCT_CATEGORY_3&gt;<br />
  &lt;reference name=&quot;product.info&quot;&gt;<br />
    &lt;action method=&quot;setTemplate&quot;&gt;<br />
     &lt;template&gt;catalog/product/view-produit.phtml&lt;/template&gt;<br />
    &lt;/action&gt;<br />
  &lt;/reference&gt;</p>
<p>  &lt;reference name=&quot;root&quot;&gt;<br />
   &lt;action method=&quot;setTemplate&quot;&gt;&lt;template&gt;page/1column.phtml&lt;/template&gt;&lt;/action&gt;<br />
  &lt;/reference&gt;<br />
  &lt;reference name=&quot;head&quot;&gt;<br />
   &lt;action method=&quot;addJs&quot;&gt;&lt;script&gt;js-dossier/nom-du-js.js&lt;/script&gt;&lt;/action&gt;<br />
  &lt;/reference&gt;<br />
&lt;/PRODUCT_CATEGORY_3&gt;<br />


Vous pouvez retrouver le module de surchage complet avec la surchage de la class en téléchargeant cette archive.

Des templates spécifiques aux catégories pour les pages listes et détail dans Magento 5.00/5 (1 vote)

A propos de Pierre Albert

Chef de projet web & développeur à Canal Web depuis plus de 5 ans. Pierre à eu l'occasion d'accompagner des projets comme Sparknews, TennisLeader ou encore Citroen Retail France.

Laissez un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *


Vous pouvez utiliser ces balises et attributs HTML : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>