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

18 juillet 2017

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 ?

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.

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

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 :

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">&#xE316;</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 responsive sur ordinateur

Grille responsive sur tablette

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">&#xE315;</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 😉

Mots clés : grille responsive, intégration prestashop, prestashop, responsive