#Prestashop : afficher la liste des produits en liste ou grille

Pour proposer ces 2 options, nous allons modifier plusieurs fichiers de notre thème Prestashop. Il existe des modules Prestashop gratuits ou payants, mais tout comme sur WordPress, je préfère modifier le thème plutôt que d’ajouter une multitude de plugins.

Nous travaillerons sur le template Prestashop 1.4.5 et utiliserons un plugin jquery pour gérer les cookies : jquery.cookie.js

Les fichiers du thème à modifier sont :

Fichiers tpl :

  • product-sort.tpl
  • product_list.tpl
  • footer.tpl

Fichier css :

  • product_list.css

DEMO LIVE

HTML et CSS

Ajout des boutons

Commençons par afficher nos boutons grille/liste.

La liste des produits s’affiche dans plussieurs page. Nous devons donc ajouter ces boutons dans un fichier tpl qui est appelé dès que la page présente une liste de produit.

Le fichier product-sort.tpl fera l’affaire.

Au début de ce fichier (avant {if isset($orderby) AND isset($orderway)}) , ajoutez le code html suivant :

 

Pour la mise en forme de ces boutons, j’ai utilisé les boutons d’un kit psd gratuit (ici) :

Grille ou Liste

Cette image est à télécharger dans le dossier img du thème.

Ajoutez les lignes suivantes dans le fichier product_list.css situé dans le dossier css du thème :

 

Affichage en mode grille

Par défaut, l’affichage des produits est en mode liste. Nous devons donc ajouter la css pour l’affichage en mode grille.

Toujours dans le fichier product_list.css, ajoutez ces lignes :

 

Dans le fichier product-list.tpl, ajoutez après la balise /ul:

 

Le code css pour l’affichage grille n’est pas finalisé, je vous laisse le modifier pour un meilleur résultat.

Le javascript

La partie javascript permettra d’avoir les fonctionnalités suivantes :

  • au clic sur un des boutons, la liste des produits change d’affichage
  • ajout d’un cookie pour mémoriser le choix de l’utilisateur

Changement d’affichage

Voici le script pour changer l’affichage (Placer ces lignes dans le fichier footer.tpl, avant la balise </body> et {/if}) :

 

Pour résumer, ce script permet d’ajouter une classe list_l ou grid_l à la liste selon le bouton cliqué.

Jquery : ajout d’un cookie

Pour que l’option grille ou liste soit enregistrée à chaque visite de l’utilisateur, nous devons enregistrer un cookie. Ce cookie sera ensuite lu dans le template product-list.tpl.
Pour travailler avec les cookies et jquery, le plugin jquery.cookie est parfait (téléchargez ici ce plugin).
Enregistrez ce plugin dans le dossier js de votre thème et ajoutez ce plugin au dessus du script précédent :

 

La création d’un cookie est très simple, il suffit de donner un nom au cookie, une valeur et une date d’expiration. par défaut nous attribuons la valeur <em>list_l </em>ce qui correspond à un affichage liste

 

Modifions maintenant notre script d’affichage pour modifier la valeur du cookie au clic sur une des deux options :

 

Passons maintenant à l’étape suivante : lecture du cookie dans le fichier product-list.tpl

Cookie et Smarty

Les modifications effectuées plus haut permettent de proposer 2 modes d’affichage mais lorsque l’utilisateur change de page, l’option n’est pas mémorisée et l’idée ici est de garder “en mémoire” le choix de l’utilisateur d’une page à l’autre et d’une visite à l’autre.

Pour lire la valeur de notre cookie dans un fichier Smarty (tpl), il suffit d’utiliser la variable réservée :

{$smarty.cookies.nom_du_cookie}
Dans le fichier product-list.tpl, ajoutons les ligne suivantes après {if isset($products)} :

 

Quelques explications :

  • si le cookie existe et que sa valeur est grid_l, alors la variable $ul_class=grid_l
  • si la condition précédente n’est pas vérifiée, alors $ul_class=list_l
  • la variable $ul_class est une classe ajoutée à la balise : ul class=”{$ul_class}”

Pour terminer, utilisons la même logique dans le fichier product-sort.tpl pour l’état actif des boutons :

 

La liste complète des modifications

product-list.css

 

footer.tpl

 

product-list.tpl

product-sort.tpl

 

 

  • Pingback: #Prestashop : afficher la liste des produits en liste ou grille | Prestarocket | Prestashop News | Scoop.it()

  • arlaquin

    Bonjour
    Je souhaite mettre les produits uniquement en grille. Cdt

    • http://www.prestarocket.com/ Prestarocket

      Pas besoin de faire toutes ces modifications. 
      Il suffit juste de modifier les css.

  • Salmon Quentin

    Bonjour et félicitations, tout cela fonctionne à merveille.
    Une petite question toutefois, comment forcer l’affichage en grille par défaut, pour tout utilisateurs lambda n’étant jamais allé sur le site, ou y allant pour la première fois?

    Cordialement

    • Guest

      Je suis aussi interressé par cette question …

    • Guest

      Je suis aussi intérressé par cette question …? Une soluce ?

  • Ray

    j’ai un gros souçis, j’ai bien réussit à mettre l’icone cliquable mais rien ne se fait quand je clique et l’affiche de base n’est pas en grille ?
    TUto suivi à la lettre …
    Help possible ?

    • Vincenzo

      Bonjour,

      De même, j’ai fais comme indiqué, sauf que j’ai choisi affichage une colonne (pas de black a gauche ni a droite.

      Mais quand je click ca agit, mais ne se passe rien, ca ne se met pas en grille… :/

    • http://www.prestarocket.com/ Prestarocket

      Bonjour Ray,

      Une url de ta boutique ?

  • Pingback: PrestaShop | Pearltrees()

  • Vincenzo

    Bonjour,

    Ceci fonctionne t’il pour prestashop 1.5 RC actuellement?

    Merci d’avance.

  • Neoray

    Il faut verifier que le cookie existe avant de faire l’initialisation ” 
    $.cookie(‘gridorlist_prestarocket’, ‘list_l’, { expires: 365, path: ‘/’ }); ” si vous voulez pas que le cookie soit reinitialiser a chaque fois. Sinon très bon tuto.

  • Sessem

    Bonjour, et merci pour ce tuto super bien fait.
    Pour moi tous fonctionne mise à part que lorsque je met l’affichage en grille, tous les produits s’affiche l’un en dessous de l’autre au lieu d’y avoir au moins 3 ou 4 produits l’un à coté de l’autre. Pouvez vous me dire où est mon erreur.
    merci d’avance

    • http://www.prestarocket.com/ Prestarocket

      cela doit venir de ton css…

  • Vinzter

    Bonjour merci pour ce code.
    Ca marche pour moi, mais je voudrais en plus avoir un affichage qui change au passage d’une vue ou d’une autre. j’ai essayé ça dans mon fichier tpl mais ca ne fonctionne pas :
    {if isset($smarty.cookies.gridorlist_prestarocket) && $smarty.cookies.gridorlist_prestarocket==”grid_l”}
       code affichage 1
    {else}
      code affichage 2
    {/if}

    mais la page ne se rafraichit pas lors du clic
    Une idée ?
     

  • Jerem

    Bonjour merci pour ce super tuto,

    mais j’ai un petit problème, je l’essaye sur Prestashop 1.5, tout fonctionne sauf le script : $(ul).hide().wrap(”).delay(100).removeClass().addClass(ul_class+’ clear clearfix’).fadeIn(‘fast’,function(){$(this).unwrap()});

    Cette ligne la plante intégralement le site ..

    Une idée ?

    Merci

    • http://www.prestarocket.com/ Prestarocket

      Hello,

      as tu une url ?
      ++
      @prestarocket:twitter

  • http://www.prestarocket.com/ Prestarocket

    N’oubliez pas de mettre le code js dans des balises {literal}{/literal}

  • leglaude51

    Bonjour et merci pour ce super tuto. C’est exactement ce que je recherchais.
    J’ai juste un petit problème:
    Le cookie ne fonctionne pas!!! Je m’explique: Je suis entrain de monter une boutique pour une photographe (je travail en local), et j’ai balancer plus de 300 photos. Je test l’affichage en grille, cela fonctionne, mais lorsque je change de page, l’affichage revient en liste!
    J’ai bien suivi le tuto à la lettre, mais là, je coince…
    Une petite idée?

    Merci d’avance et meilleures salutations

  • Vinc3nzo

    Bonjour,

    Auriez vous des indices pour pouvoir l’adapter sur PS 1.5.2 ??

    Merci d’avance!

  • http://www.facebook.com/Aux.1001.Merveilles.d.Orient Belhidaoui Nourdine

    bonjour,

    j’ai cherché le fichier  product_list.css dans mon thème mais dans le dossier “css” je n’ai qu’un fichier global.css. Par contre dans le thème par défaut de prestashop ce fichier product_list.css est bien présent.

    Est ce dans le thème de base prestashop que je dois modifier ce fichier? Où que soit ce fichier et quel que soit le thème où il se trouve il s’agit bien de ce fichier à modifier n’est ce pas?

    Merci d’avance de me confirmer et merci pour votre contribution à l’amélioration des boutiques de tous ceux qui n’ont pas les moyens financiers pour acheter des modules à tout va.

    • http://www.prestarocket.com/ Prestarocket

      Bonjour,

      Peut être que le css de la page catégorie est le fichier global.css…

  • Pingback: Yann (patanock) | Pearltrees()

  • kenzo

    bonjour,

    j’ai cherché mais pas trouvé de solution pour le moment,

    j’ai suivi votre tuto, (prestashop 1.5.3) mais le script fait planté le site. j’ai vu que le site de demo est en 1.5 donc je suppose que la méthode fonctionne.
    avez vous une idée de la cause de ce disfonctionnement ?

    cordialement

    • http://www.prestarocket.com/ Prestarocket

      Bonjour,
      Vous avez bien mis le srcipt js dans des balises {literal}{/literal}

  • http://www.facebook.com/anthony.doublemart Anthony Doublemart

    Bonjour,

    Merci pour ce tuto super utile ! Pour moi, le cookies n’est pas pris en compte, lorsque je change de page ou que j’effectue un rechargement, il reprend l’affiche par défaut.

    Une idée ?

    Aussi, comment pourrais-je faire afficher la liste en grille par défaut ?

    Merci d’avance. Cordialement

  • http://www.facebook.com/vincent.lemma Vincent Lemma

    Bonsoir,

    Juste pour vous confirmez que ça fonctionne sous Prestashop 1.5.3 :)

    Merci

  • Lev

    Bonjour je suis sur 1.5.3 je suivis votre tuto a la lettre il fais sauter le site avez vous les fichier directement a renplacer ?

  • http://www.facebook.com/lordbdp Bryon Marc

    Ne fonctionne pas sous PS 1.5.4.
    Snif !

    • http://www.prestarocket.com/ Prestarocket

      Bonjour,
      Un tuto pour la version 1.5 de Prestashop est en cours de rédaction.
      ++
      Prestarocket

  • jeckyl

    Bonjour,
    Pour ceux ayant des soucis avec leur bouton qui ne s’initialise pas lors du changement de page il faut remplacer

    {if isset($smarty.cookies.gridorlist_prestarocket) && $smarty.cookies.gridorlist_prestarocket==”grid_l”}
    {assign var=”active_l” value=”grid_active”}
    {else}
    {assign var=”active_l” value=”list_active”}
    {/if}
    {l s=’List’}
    {l s=’grid’}

    par

    {if isset($smarty.cookies.gridorlist_prestarocket) && $smarty.cookies.gridorlist_prestarocket==”grid_l”}
    {assign var=”active_l” value=”grid_l_active”}
    {else}
    {assign var=”active_l” value=”list_l_active”}
    {/if}
    {l s=’List’}
    {l s=’grid’}

    Dans product-sort.tpl