[PrestaShop 1.7] Comment afficher la liste produits avec une grille responsive ?

Intégration, PrestaShop
  • Accueil
  • Blog
  • [PrestaShop 1.7] Comment afficher la liste produits avec une grille responsive ?

La liste produits de base de PrestaShop est classique et sans attrait particulier puisqu’on a juste 3 à 4 produits par ligne par défaut, avec toutes les photos produits de même taille. Voyons comment changer cela.

Tuto PrestaShop : Comment afficher la liste produits avec une grille dynamique ?

La véritable question est plutôt : comment obtenir une belle liste avec des photos produits en partant de l’affichage des produits par défaut de PrestaShop 1.7 ?
grille dynamique gridzy prestashop
La réponse est simple : il va falloir mettre les mains dans le code et faire un peu d’intégration PrestaShop !
Pourquoi afficher les produits avec une grille responsive ? Dans le cadre d’une boutique de photos, les formats de visuels peuvent être différents. Avec cet affichage vous n’avez plus aucun problème concernant les formats portrait ou paysage par exemple. C’est aussi très qualitatif pour une boutique de luxe ou pour avoir un rendu s’approchant de Pinterest.
 

L’idée est ici d’offrir une expérience utilisateur forte pour fidélisez les clients via une navigation fluide et un rendu propre. Vous augmentez aussi votre notoriété avec une boutique visuellement différente.

 

Etape 1 : préparez PrestaShop pour l’intégration

Si vous voulez éviter de vous arracher les cheveux car vos modifications ne sont pas prises en compte, alors lisez ce paragraphe.
Rendez-vous dans le back office de PrestaShop, dans la partie Performances et :

  • Forcez la complication des fichiers du thème.
  • Désactivez le cache de PrestaShop.

liste produits grille responsive prestashop 0
 

Etape 2 : téléchargement et installation du script Gridzy

Gridzy est un script permettant d’avoir une galerie ou grille complètement responsive et personnalisable. Sympa mais comment lier le script à PrestaShop ?
D’abord, rendez-vous sur la fiche produit du script sur Code Canyon https://codecanyon.net/item/gridzy-fully-responsive-and-customizable-gallery/9991061 et achetez le script qui ne coûte que $10 soit environ 8,70€. Ce n’est pas un grand investissement quand on voit que ce type de module coûte environ une trentaine d’euros.
Voici également la documentation complète du plugin jQuery : https://wandls.net/products/gridzy/documentation
Une fois l’archive .zip sur votre bureau, décompressez-là. Ouvrez le dossier contenant les fichiers. Vous devez avoir un dossier nommé /gridzy/ (en orange sur ma capture d’écran).
liste produits grille responsive prestashop 1
Vous allez copier respectivement les fichiers :

  • gridzy-1.3.min.js dans le dossier www/themes/classic/assets/js/
  • gridzy-1.3.css dans le dossier www/themes/classic/assets/css/

A présent, vous allez appeler le fichier script de Gridzy via le fichier www/themes/classic/templates/_partials/javascript.tpl en ajoutant les 2 dernières lignes :

{foreach $javascript.external as $js}
<script type="text/javascript" src="{$js.uri}" {$js.attribute}></script>
{/foreach}

{foreach $javascript.inline as $js}
<script type="text/javascript">
{$js.content nofilter}
</script>
{/foreach}

{if isset($vars) && $vars|@count}
<script type="text/javascript">
{foreach from=$vars key=var_name item=var_value}
var {$var_name} = {$var_value|json_encode nofilter};
{/foreach}
</script>
{/if}

<!-- Ajout du script Gridzy sur les pages PrestaShop -->
<script type="text/javascript" src="{$urls.theme_assets}js/gridzy-1.3.min.js"></script>

Vous allez ensuite appeler le fichier css de Gridzy dans PrestaShop en modifiant le fichier via le fichier www/themes/classic/templates/_partials/stylesheets.tpl en ajoutant les 2 dernières lignes :
{foreach $stylesheets.external as $stylesheet}
<link rel="stylesheet" href="{$stylesheet.uri}" type="text/css" media="{$stylesheet.media}">
{/foreach}

{foreach $stylesheets.inline as $stylesheet}
<style>
{$stylesheet.content}
</style>
{/foreach}

<!-- Ajout de la feuille de style Gridzy sur les pages PrestaShop -->
<link rel="stylesheet" href="{$urls.theme_assets}css/gridzy-1.3.css" type="text/css" media="all">

Vous devez voir dans le code source vos 4 lignes ajoutées dans les 2 fichiers tpl. J’utilise pour ma part pour intégrer sous PrestaShop l’outil de debug de Google Chrome (clic droit dans la page web > inspecter). Vous obtenez ceci :
liste produits grille responsive prestashop 2
Si c’est bon pour vous, on peut continuer !
 

Etape 3 : modification de l’apparence des listes produits

Vous allez modifier l’apparence de la liste produits pour la rendre compatible avec Gridzy et ainsi obtenir une liste de visuels produits dans une grille responsive.
Ouvrez le fichier www/themes/classic/templates/catalog/_partials/products.tpl et ajoutez les classes CSS “gridzy gridzyClassic gridzyLightProgressIndicator gridzyAnimated” à la balise comme suit :


<div id="js-product-list">
<div class="products row gridzy gridzyClassic gridzyLightProgressIndicator gridzyAnimated">
{foreach from=$listing.products item="product"}
{block name='product_miniature'}
{include file='catalog/_partials/miniatures/product.tpl' product=$product}
{/block}
{/foreach}
</div>

{block name='pagination'}
{include file='_partials/pagination.tpl' pagination=$listing.pagination}
{/block}

<div class="hidden-md-up text-xsright up">
<a href="#header" class="btn btn-secondary">
{l s='Back to top' d='Shop.Theme.Actions'}
<i class="material-icons"></i>
</a>
</div>
</div>

Une fois la modification en place, éditez le fichier www/themes/classic/assets/js/custom.js et ajoutez les lignes suivantes :
$(document).ready(function(){

// Appel de Gridzy
$('.gridzy').gridzy({
spaceBetweenElements: 10,
desiredElementHeight: 300,
preventInitialAnimation: true
});

});

Note : vous pouvez modifier les options du script Gridzy en vous aidant de la documentation indiquée précédemment dans cet article. Dans l’exemple, on indique un espace de 10 pixels entre les blocs de la grille et une hauteur de bloc de 300 pixels.
A ce stade, l’intégration de la grille responsive sous PrestaShop est déstructurée et part dans tous les sens. Vous allez corrigez ce problème avec un peu de CSS.
Vous allez donc apporter des modifications dans le fichier www/themes/classic/assets/css/custom.css en ajoutant les lignes suivantes :
/*Style pour la liste avec Gridzy*/
#products .products, .featured-products .products, .product-accessories .products, .product-miniature .products{
display: block;
}
#products .product-miniature, .featured-products .product-miniature, .product-accessories .product-miniature, .product-miniature .product-miniature{
margin: 0;
}
#products .thumbnail-container, .featured-products .thumbnail-container, .product-accessories .thumbnail-container, .product-miniature .thumbnail-container{
width: 100%;
height: auto;
}
#products img, .featured-products img, .product-accessories img, .product-miniature img{
width: 100%;
height: auto;
}
#products .product-miniature .discount-percentage, #products .product-miniature .on-sale, #products .product-miniature .online-only, #products .product-miniature .product-flags .new, .featured-products .product-miniature .discount-percentage, .featured-products .product-miniature .on-sale, .featured-products .product-miniature .online-only, .featured-products .product-miniature .product-flags .new, .product-accessories .product-miniature .discount-percentage, .product-accessories .product-miniature .on-sale, .product-accessories .product-miniature .online-only, .product-accessories .product-miniature .product-flags .new, .product-miniature .product-miniature .discount-percentage, .product-miniature .product-miniature .on-sale, .product-miniature .product-miniature .online-only, .product-miniature .product-miniature .product-flags .new{
left: .4375rem;
}
#products .product-description, .featured-products .product-description, .product-accessories .product-description, .product-miniature .product-description{
width: 100%;
}
#products .highlighted-informations, .featured-products .highlighted-informations, .product-accessories .highlighted-informations, .product-miniature .highlighted-informations{
width: 100%;
}

Si vous avez tout suivi à la lettre, vous devriez vous retrouver avec une grille responsive pour les listes produits dans PrestaShop 1.7 ! Voici une capture d’écran du rendu en version ordinateur, tablette et mobile. Aucun travail d’intégration responsive à faire puisque tout est géré via Gridzy, au top !
grille produits responsive prestashop ordinateur
Grille responsive sur ordinateur

 
grille produits responsive prestashop tablette
Grille responsive sur tablette

 
grille produits responsive prestashop mobile
Grille responsive sur mobile

Il se peut que vous ayez besoin d’adapter un peu plus le style selon le thème PrestaShop utilisé mais a priori le tuto devrait se fondre globalement avec n’importe quel template PrestaShop.
 

Etape 4 : modifier les modules PrestaShop

Les modules Produits phares, Nouveautés ou Promotions affichent des listes produits également. Vous allez modifier les fichier d’apparence de ces modules pour afficher les listes produits avec la même grille responsive. Pour ce faire, c’est très simple : pour le module Produit phares par exemple, vous ouvrez le fichier www/themes/classic/modules/ps_featuredproducts/views/templates/hook/ps_featuredproducts.tpl et vous ajoutez les classes à la balise comme à l’étape 3 ce qui donne :

<section class="featured-products clearfix">
<h1 class="h1 products-section-title text-uppercase">
{l s='Popular Products' d='Shop.Theme.Catalog'}
</h1>
<div class="products gridzy gridzyClassic gridzyLightProgressIndicator gridzyAnimated">
{foreach from=$products item="product"}
{include file="catalog/_partials/miniatures/product.tpl" product=$product}
{/foreach}
</div>
<a class="all-product-link float-xs-left float-md-right h4" href="{$allProductsLink}">
{l s='All products' d='Shop.Theme.Catalog'}<i class="material-icons"></i>
</a>
</section>

Les noms des modules à éditer avec le thème Classic par défaut sont :
  • ps_featuredproducts
  • ps_newproducts
  • ps_specials

 

Etape 5 : passez en environnement de production

Une fois le travail d’intégration responsive sous PrestaShop terminé, revenez dans le back office, section Performances et :

  • Ne jamais recompiler les fichiers de templates.
  • Activez le cache de PrestaShop.

Et pour les plus novices, voici le dossier contenant les fichiers modifiés dans ce tuto PrestaShop : téléchargez les modifications PrestaShop 1.7.
C’est terminé, j’espère que ce tuto PrestaShop 1.7 vous a plu, laissez un commentaire ou juste un merci 😉
 

14 commentaires sur “[PrestaShop 1.7] Comment afficher la liste produits avec une grille responsive ?

  1. Bonsoir,
    Merci pour ce super tuto qui répond exactement à une de mes recherches.
    Simplement 2 questions.
    Est-ce valable pour n’importe quelle version 1.7 et en l’occurrence pour moi en 1.7.6.7 ?
    Et ces modifications effectuées sur la template source sont elles valables quel que soit la template installée ?
    Merci encore.

    1. Bonjour Jean-Marc,
      Le tuto est pour PrestaShop 1.7 donc doit fonctionner sur la version 1.7.6.7 sans trop de changement.
      Il faut faire les modifications dans les fichiers du thème utilisé.
      Postez le lien en commentaire lorsque vous avez terminé 😉

  2. Merci pour ce tuto très clair. Je ne connaissais pas du tout. Est-il possible de créer des grilles différentes selon la page ? Par exemple une grille pour le bloc featured product en home et une pour la page de telle catégorie, une autre pour telle autre catégorie ? Le but est de sortir un peu de la sempiternelle grille de prestashop 🙂 Je vais voir la doc complète, j’y trouverai sans doute la réponse. Ainsi que la façon de faire une grille avec une grande imlage à gauche et 4 petites à droite. Merci encore !

    1. Bonjour Kiang,
      Avec plaisir, c’est ce type de commentaire qui motive à écrire d’autres tutos 😉
      Le plugin cité propose une mise en page aléatoire selon l’image fournie donc rien à faire et vous aurez des grilles de produits “déstructurées” presque sans rien faire !

  3. Bonjour,
    Tout d’abord, merci pour ce tuto très bien expliqué, c’est exactement ce que je cherchais.
    Je pense avoir suivi toutes les étapes mais j’ai un soucis d’affichage des produits.
    Les produits s’affichent en ligne et avec de toutes petites images.
    Voici l’url du site:
    http://www.montrecalvinklein.com/19-boutique
    Peut être ai-je manqué quelque chose.
    Par avance merci pour votre aide.

    1. Bonjour Bruno,
      Dans ce cas, je peux vous proposer d’installer le captcha via la réservation d’un ticket si vous le souhaitez en cliquant sur le lien : ticket intervention PrestaShop.
      Bonne journée 🙂

  4. Bonjour,
    je cherche à modifier le nombre de produits par ligne dans le catalogue sous prestahop 1.7
    Initialement prévu pour 3 produits par ligne, je souhaiterai avoir 5 ou 6 articles par ligne.
    J’ai juste à modifier le CSS afin de réduire legerement la taille d’affichage de mes produits ( jusque la aucun soucis ) , par contre je suis bloqué concernant la marche à suivre pour modifier le nombre de produits par ligne.. )
    J’ai cherché longuement dans le product-list.tpl mais rien de concluant..
    Merci pour ce tuto concernant l’implantation de gridzy, ca me sera fort utilise sur mon prochain projet.
    Merci de m’avoir lu.
    Cordialement.

    1. Bonjour Gau,
      Donc si j’ai bien compris vous avez réussi à afficher le nombre de produits voulus par ligne avec ce tuto ?
      A bientôt 🙂

  5. Bonjour,
    Après des recherches pour l’intégration du script gridzy, je suis tombé sur votre article.
    Je souhaiterais appliquer exactement les mêmes modifications que votre tuto prestashop mais sur un site woocommerce.
    Auriez-vous de bons conseils à me fournir sur ce sujet ?
    Merci de votre retour

    1. Bonjour Greg,
      Déjà c’est tout à fait possible, il faut ajouter les sources css et js puis appliquer les modifications sur les fichiers d’apparence des listes produits.
      A bientôt 🙂

  6. Bonjour,
    J’ai tout bien suivi à la lettre et ça ne marche pas, les produits ne s’affichent plus du tout…
    Que faire?

    1. Bonjour,
      Quelle est l’url de votre site web ?
      Avez-vous bien les produits dans le listing, dans votre code source ?

  7. Hello,
    Voilà une librairie que je ne connaissais pas, la manière de faire est intéressante.
    Est-ce que tu penses que ce type d’affichage à un impact plus marquant pour l’acheteur ?
    Bon tout dépendra des images, mais ça pourrait-être pas mal d’utiliser ce type de présentation pour faire “rêver” l’acheteur tout en occultant la partie des prix.
    A bientôt et merci pour le tutoriel !

Laisser un avis

Consultez les autres articles