[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-caracteristiques-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 !

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

  1. Bonjour et merci pour votre tuto,
    Je souhaite placer la ligne {include features.tpl} dans le product.tpl mais je ne comprends pas votre phrase.
    je cite “ajouter avant le de fermeture de”
    Savez vous à quel endroit placer la ligne merci ?
    J’ai essayé plusieurs endroits mais le css n’est jamais chargé
    Merci encore
    Cordialement

    1. Bonjour Toulousain,
      Le plus simple reste de regarder comment le tpl des features est inséré dans product.tpl ou product-details.tpl et de le déplacer où souhaité.
      Cet include ne charge pas le css pour info.
      Bonne journée 🙂

  2. Bonjour Arnaud, ça ne fonctionne pas.
    Pour résumer de ce que j’ai testé :
    la bonne variable du nom de la marque dans la liste de produit est: {$product.manufacturer_name|escape:’html’:’UTF-8′}

    1- ce code affiche uniquement le nom de la marque sur certain produit (pas tous).
    {if $page.page_name == ‘product’}
    {foreach $product.features as $feature key=k}
    {if $feature.name != ‘Couleur’}
    {$product.manufacturer_name|escape:’html’:’UTF-8′}
    {/if}
    {/foreach}
    {/if}

    2- ce code affiche plusieurs fois le nom de la marque (x le nombre de caractéristique) et la couleur.
    {if $page.page_name == ‘product’}
    {foreach $product.features as $feature key=k}
    {if $feature.name != ‘Couleur’}
    {$feature.name} : {$feature.value}
    {$product.manufacturer_name|escape:’html’:’UTF-8′}
    {/if}
    {/foreach}
    {/if}

    Une idée ?
    Encore merci

    1. Bonjour Manu,
      Dans la boucle des {foreach $product.features as $feature key=k}, dans la condition {if $feature.name != ‘Couleur’} il est possible d’ajouter {assign var=nocolor value=1}.
      Puis plus bas {if $nocolor}…{/if}

  3. Merci pour ta réponse.
    As-tu bien compris que si la couleur n’est pas renseignée, je dois afficher la marque ?
    Car don ton code, tu n’affiches plus la valeur de couleur.

    Le bon code pour manufacture
    {$product_manufacturer->name|escape:’htmlall’:’UTF-8′}

    1. Bonjour Manu,
      On teste si la caractéristique “couleur” est utilisée ou non,
      Si non, alors on affiche {$product_manufacturer->name|escape:’htmlall’:’UTF-8′}

  4. Bonjour Arnaud,
    merci pour ton aide, ça fonctionne bien.
    Dans une autre partie, je voudrais ajouter une condition d’affichage, mais je n’y arrive pas.

    J’affiche une caractéristique de couleur, et si le produit n’a pas de couleur, on ajoute la marque du produit.

    J’arrive donc à bien afficher la couleur avec :

    {if $page.page_name == ‘product’}

    {foreach $product.features as $feature key=k}
    {if $feature.name == ‘Couleur’}
    – {$feature.value}
    {/if}

    {/foreach}
    {/if}

    Mais je n’arrive pas à afficher la marque si le produit n’a pas de couleur.

    1. Bonjour Manu,
      Dans votre cas, ceci devrait faire l’affaire :

      [pastacode lang="markup" manual="%7Bif%20%24page.page_name%20%3D%3D%20%E2%80%98product%E2%80%99%7D%0A%7Bforeach%20%24product.features%20as%20%24feature%20key%3Dk%7D%0A%7Bif%20%24feature.name%20!%3D%20%E2%80%98Couleur%E2%80%99%7D%0A%7B%24product.manufacturer_name%7D%0A%7B%2Fif%7D%0A%7B%2Fforeach%7D%0A%7B%2Fif%7D" message="" highlight="" provider="manual"/]

      La condition sur la page produit n’est pas nécessaire si on est sur la fiche produit et à vérifier avec un {debug} si la variable {$product.manufacturer_name} est la bonne syntaxe.

  5. Bonjour,

    Merci pour cet exemple.
    Je cherche à afficher une caractéristique spécifique dans un des onglets de ma fiche produit (et une seule caractéristique, que je définirai, pas toutes).

    J’ai essayé de “bidouiller” le code, mais rien n’y fait.

    Quelqu’un à une idée ?

    Merci 😉

    1. Bonjour Sébastien,
      C’est comme pour Manu mais plus court :

      [pastacode lang="markup" manual="%7Bforeach%20%24product.features%20as%20%24feature%7D%0A%7Bif%20%24feature.name%20%3D%3D%20%22Nom%20de%20la%20caract%C3%A9ristique%22%7D%0A%7B%24feature.name%7D%20%3A%20%7B%24feature.value%7D%0A%7B%2Fif%7D%0A%7B%2Fforeach%7D" message="" highlight="" provider="manual"/]

      Bon courage 😉

  6. Bonjour Arnault,
    ça fonctionne bien.
    Comment procéder pour afficher uniquement une caractéristique suivant une valeur ?
    Exemple, j’ai une caractéristique qui s’appelle ‘produit Personnalisé’, Oui/NON

    Si la sélection est sur oui, on affiche quelque chose, si sur non, on n’affiche rien.
    Je n’ai pas trouvé comment faire.

    Merci pour ton aide

    1. Bonjour Manu,
      C’est assez simple, la logique est la suivante :

      [pastacode lang="markup" manual="%7Bforeach%20%24product.features%20as%20%24feature%7D%0A%7Bif%20%24feature.name%20%3D%3D%20%22Nom%20de%20la%20caract%C3%A9ristique%22%20%26%26%20%24feature.value%20%3D%3D%20%22Valeur%20souhait%C3%A9e%22%7D%0Avotre%20contenu%0A%7B%2Fif%7D%0A%7B%2Fforeach%7D" message="" highlight="" provider="manual"/]

      Bon courage 😉

  7. Salut, super tuto comme d’hab!
    J’ai testé pour afficher 2 caractéristiques, mais ça ne fonctionne pas.
    Ce sont 2 caractéristiques différentes qui ne s’affichent pas sur le même produit…
    l
    Testé avec ce code en changeant les noms de caractéristiques :

    {foreach $product.features as $feature key=k}
    {if $feature.name == ‘Nom de votre caractéristique’}
    {$feature.name} : {$feature.value}

    {/if}
    {if $feature.name == ‘Nom de votre caractéristique 2’}
    {$feature.name} : {$feature.value}

    {/if}
    {/foreach}

    Aurai tu une solution sous ps 1.7.8.2

    1. Bonjour Manu,
      Dans les listes il faut utiliser l’objet $product ce qui donne :

      [pastacode lang="markup" manual="%7Bforeach%20from%3D%24product.features%20item%3Dfeature%7D%0A%20%20%20%20%20%20%3Cp%3E%0A%20%20%20%20%20%20%7Bif%20%24feature.name%20%3D%3D%20'Composition'%7D%0A%20%20%20%20%20%20%20%20%7B%24feature.name%7D%20%3A%20%7B%24feature.value%7D%0A%20%20%20%20%20%20%7B%2Fif%7D%0A%20%20%20%20%20%20%7Bif%20%24feature.name%20%3D%3D%20'Propri%C3%A9t%C3%A9'%7D%0A%20%20%20%20%20%20%20%20%7B%24feature.name%7D%20%3A%20%7B%24feature.value%7D%0A%20%20%20%20%20%20%7B%2Fif%7D%0A%20%20%20%20%20%20%3C%2Fp%3E%0A%20%20%20%20%7B%2Fforeach%7D" message="" highlight="" provider="manual"/]

  8. Bonjour Arnaud,
    Merci pour le petit code qui va bien.
    Une petite question, j’ai plusieurs valeurs dans la caractéristique, ce qui fait afficher la caractérisque 3 fois.
    Pour faire simple, je ne veux afficher que les valeurs de la caracteristique et une seule fois selon le résultat.
    Je ne sais pas si je me fais comprendre.
    Voici un exemple de mon code :
    {block name=’product_features’}

    {if $product.features}

    {foreach $product.features as $feature key=k}
    {if $feature.name == ‘CARACTERISTIQUE 1’}
    {if $feature.value == ‘VALEUR1’}{/if}
    {if $feature.value == ‘VALEUR2’}{/if}
    {if $feature.value == ‘VALEUR3’}{/if}
    {/if}
    {/foreach}

    {/if}

    {/block}

    Le résultat appel 3 fois la caractéristique, voir résultat généré :

    Une idée de comment n’appeler les résultats de la caractéristique qu’une seule fois ?
    Merci d’avance et merci pour le code qui m’a déjà bien avancé.

    1. Bonjour JM,
      Dans votre cas, il faut je pense grouper les résultats dans la fonction qui récupère les données directement dans le ProductController.php
      Ou alors et c’est plus du bricolage, ajouter des conditions dans le foreach sur le nom de la caractéristique.

  9. Bonjour,
    Super tuto, mais malheureusement ne fonctionne pas sur la Version PrestaShop 1.7.7. Avez-vous une solution pour la dernières version de cette dernière? Merci

    1. Bonjour,
      Essayez d’afficher la variable {$product.features|print_r} pour voir si les caractéristiques ressortent ou non déjà.

  10. Bonjour,
    1000 merci pour cet article,
    Le tuto marche très bien,
    Pouvez-vous me dire comment ajouter 2 caractéristiques mais au choix, comme vous l’avez indiqué pour ajouter 1 caractéristique mais pour 2 si c’est possible.
    Dans mon cas concernant le fichier theme.css, ça n’a pas marché pour personnaliser les couleurs et l’ajustement, j’utilise le theme “ZOne” vendu dans la marketplace Prestashop.

    1. Bonjour Ben,
      Avec plaisir 🙂
      C’est tout à fait possible, il suffit d’ajouter une condition sur la valeur comme suit :

      [pastacode lang="markup" manual="%7Bforeach%20%24product.features%20as%20%24feature%20key%3Dk%7D%0A%7Bif%20%24feature.name%20%3D%3D%20'Nom%20de%20votre%20caract%C3%A9ristique'%7D%0A%3Cli%3E%7B%24feature.name%7D%20%3A%20%7B%24feature.value%7D%3C%2Fli%3E%0A%7B%2Fif%7D%0A%7Bif%20%24feature.name%20%3D%3D%20'Nom%20de%20votre%20caract%C3%A9ristique%202'%7D%0A%3Cli%3E%7B%24feature.name%7D%20%3A%20%7B%24feature.value%7D%3C%2Fli%3E%0A%7B%2Fif%7D%0A%7B%2Fforeach%7D" message="" highlight="" provider="manual"/]

      Bon courage 😉

  11. 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 😉

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

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

Laisser un avis

Consultez les autres articles