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

5 septembre 2017

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 :

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

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 :

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 !

Mots clés : astuce prestashop, astuces prestashop, carctéristiques prestashop, développement prestashop, features prestashop, prestashop, prestashop 1.7, tuto prestashop, tutorial prestashop, tutoriel prestashop