[PrestaShop 1.7] Ajouter les caractéristiques dans les listes produits

PrestaShop
  • Accueil
  • Blog
  • [PrestaShop 1.7] Ajouter les caractéristiques dans les listes produits

Nombreuses sont les boutiques PrestaShop qui vendent des produits techniques avec des caractéristiques importantes pour la vente. Voyons comment afficher les caractéristiques des produits dans les listes produits de la page catégorie.

Pourquoi afficher les caractéristiques des produits ?

Quand vous êtes au supermarché, comment comparez-vous les oeufs ?
Quand vous hésitez entre deux pneus neufs pour votre voiture, mis à part la marque, comment déterminez-vous le bon pneu ?
Voici des éléments de réponse en image :

liste produits chronodrive
La comparaison des oeufs chez Chronodrive n’est pas simple car mis à part le prix, la marque et la quantité, il n’y a pas d’autre information affichée. Heureusement que les filtres en temps réels sont là !

allopneus
Allopneus commercialise des produits avec forte valeur ajoutée. Les pictos avec tooltips couplés des avis clients sont là pour aider à choisir le produit adéquat.

saveur-biere
Chez Saveur-Bière, on dispose de toutes les informations nécessaires à l’achat dans les listes produits.

Vous l’aurez compris, les caractéristiques produits aident vos clients à faire le bon choix, facilement et rapidement. Optez donc vite pour :

  • l’affichage des caractéristiques sur les listes produits
  • l’utilisation de la navigation à facettes pour filtrer les produits par caractéristiques

Comment afficher les caractéristiques des produits dans la page catégorie ?

On se repose sur PrestaShop 1.7 dans sa dernière version 1.7.2 dans cet article.
Dans www/themes/transformer/templates/catalog/_partials/miniatures/product.tpl ajouter avant le de fermeture de

:

{include file="catalog/_partials/miniatures/features.tpl"}

Créer le fichier www/themes/transformer/templates/catalog/_partials/miniatures/features.tpl et y coller :
{if $product.features}
 <!-- features -->
 <ul class="p_features">
 {foreach $product.features as $feature key=k}
 {if $k<=3}
 <li>{$feature.name} : {$feature.value}</li>
 {/if}
 {/foreach}
 </ul>
{/if}

La condition {if $k <= 3} signifie qu’on affiche seulement 4 caractéristiques dans le cas où la liste serait longue.
Dans le fichier www/themes/transformer/assets/css/theme.css, ajouter en fin de fichier :
/* Features in product list*/
#products .ajax_block_product .p_features{
position: absolute;
left: 0;
bottom: 0;
height: auto;
width: 100%;
padding: 10px 5%;
text-align: left;
font-size: 14px;
background: rgba(0, 0, 0, 0.9);
color: #fff;
opacity: 0;
transition: all 250ms ease;
}
#products .ajax_block_product:hover .p_features{
opacity: 1;
}

Voici ce que vous devez à présent obtenir sur le front office de PrestaShop :
survol-caractéristiques-prestashop

Comment afficher une seule caractéristique pour tous les produits ?

Toujours dans le fichier www/themes/transformer/templates/catalog/_partials/miniatures/features.tpl utilisez le code avec la condition supplémentaire :

{if $product.features}
 <!-- features -->
 <ul class="p_features">
 {foreach $product.features as $feature key=k}
 {if $feature.name == 'Nom de votre caractéristique'}
 <li>{$feature.name} : {$feature.value}</li>
 {/if}
 {/foreach}
 </ul>
{/if}

Dans ce cas, seule la caractéristique « Nom de votre caractéristique » et sa valeur seront affichés dans les listes produits.

Comment afficher les caractéristiques avec des pictos ?

Webbax a récemment effectué le tutoriel avec ajout des icônes via FontAwesome, voici le lien : https://www.webbax.ch/2017/07/10/prestashop-1-7-ameliorer-caracteristiques-ep-26/
Bonnes ventes !
 

6 commentaires sur “[PrestaShop 1.7] Ajouter les caractéristiques dans les listes produits

  1. Bonjour,
    Je n’arrive pas à trouver un lien de téléchargement pour Template Color Change dont tu parles.
    Si tu pouvais m’aider.
    D’avance, merci

  2. Hello,
    Ce que j’aime dans cette manière de faire c’est la simplicité d’intégration et le résultat que ça donne. Sincèrement c’est une bonne raison de plus pour exploiter les caractéristiques dans sa boutique Prestashop.
    Voilà une bonne pratique, car ce code donne un bon rendu sans forcément toucher à 36 fichiers différents et évite de faire appel à des librairies externes.
    Merci aussi de m’avoir cité c’est sympa… A bientôt !

    1. Salut,
      C’est exactement ça : simple et efficace. Il faut booster les ventes sans pour autant passer beaucoup de temps sur les travaux mis en place pour y arriver.

  3. Bonjour Arnaud
    Je l’ai testé sur des miniatures en page d’accueil et ça marche parfaitement, mais j’aimerai surtout les voir afficher dans la liste des produits du panier, du fichier « cart-detailed-product-line.tpl » du dossier checkout et aussi sur les fichiers commande suivant (important pour le client) ça ne m’affiche que les  » :  » les variables {$feature.name} : {$feature.value} ne sont pas prises en compte ?
    En fait ce sont des produits vendus par carton et il faut que soit affiché la quantité de produits à l’intérieur.
    Je connais le php mais presta c’est une usine.
    En tout cas merci beaucoup

    1. Bonjour Michel,
      Si cette variable n’est pas disponible il faut alors modifier le controller du panier / de la commande pour insérer les $features des produits.
      Le tout a réaliser dans un override 😉

Laisser un commentaire

Consultez les autres articles