Ce site est optimisé pour être consulté depuis un navigateur moderne dans lequel JavaScript est activé.

Badges promo personnalisés sur miniatures produit Classic

laura_bordeaux

Bonjour à tous,

J'essaie d'ajouter des badges promotionnels personnalisés (comme 'Bestseller' ou 'Eco') sur les miniatures de produits dans le thème Classic, un peu comme les badges 'Nouveau' ou 'Promo' natifs. Mon idée est de me baser sur une caractéristique produit spécifique que je définirais dans le back-office.

J'ai créé un thème enfant et j'ai copié themes/classic/templates/catalog/_partials/miniatures/product.tpl dans mon thème enfant. J'ai essayé d'insérer une condition simple dans le bloc product_flags mais rien ne s'affiche, ou alors le badge apparaît pour tous les produits sans distinction. Je suis sur PrestaShop 1.7.3.4.

Voici un extrait de mon essai actuel dans themes/classic-child/templates/catalog/_partials/miniatures/product.tpl:

<div class="product-thumbnail">
  {block name='product_flags'}
    <ul class="product-flags">
      {if $product.id == 123}
        <li class="product-flag badge-bestseller">Bestseller</li>
      {/if}
      {$product.flags nofilter}
    </ul>
  {/block}
  <a href="{$product.url}" class="thumbnail product-thumbnail">

Comment faire pour que ce badge apparaisse conditionnellement en fonction d'une caractéristique produit, par exemple une caractéristique nommée 'Label' avec une valeur 'Bestseller' ?

Milo

Bonjour @laura_bordeaux,

Votre approche d'utiliser un thème enfant est la bonne. Le problème vient probablement de la manière dont vous essayez d'accéder aux caractéristiques du produit dans votre template Smarty. L'objet $product dans product.tpl contient bien la liste des caractéristiques, mais il faut itérer dessus pour trouver celle qui vous intéresse.

Voici comment vous pouvez modifier votre product.tpl pour afficher un badge basé sur une caractéristique nommée 'Label Qualité' avec des valeurs comme 'Eco' ou 'Bestseller'. Vous devrez d'abord créer cette caractéristique et ses valeurs dans votre back-office (Catalogue > Attributs & Caractéristiques > Caractéristiques), puis l'assigner à vos produits.

<div class="product-thumbnail">
  {block name='product_flags'}
    <ul class="product-flags">
      {if $product.features is not empty}
        {foreach from=$product.features item=feature}
          {if $feature.name == 'Label Qualité' && $feature.value == 'Eco'}
            <li class="product-flag badge-eco">Eco</li>
          {/if}
          {if $feature.name == 'Label Qualité' && $feature.value == 'Bestseller'}
            <li class="product-flag badge-bestseller">Bestseller</li>

Explication :

{if $product.features is not empty} : On vérifie si le produit a des caractéristiques assignées.
{foreach from=$product.features item=feature} : On boucle sur chaque caractéristique du produit.
{if $feature.name == 'Label Qualité' && $feature.value == 'Eco'} : À l'intérieur de la boucle, on compare le nom de la caractéristique ($feature.name) et sa valeur ($feature.value) à ce que vous avez défini.
<li class="product-flag badge-eco">Eco</li> : Si la condition est remplie, on affiche le badge avec une classe CSS spécifique (badge-eco ou badge-bestseller) pour le style.

Pensez à bien vider le cache Smarty après avoir appliqué ces modifications et à assigner les caractéristiques à vos produits dans le BO.

laura_bordeaux

Un grand merci @Milo !

Votre solution fonctionne parfaitement. J'avais bien la caractéristique mais ma boucle Smarty n'était pas la bonne pour l'extraire correctement. J'ai appliqué le code que vous avez fourni, vidé le cache Smarty comme @laura_33 l'avait suggéré, et mes badges 'Eco' et 'Bestseller' s'affichent maintenant comme je le voulais, basés sur les caractéristiques produit.

C'est exactement ce qu'il me fallait pour PrestaShop 1.7.3.4. Encore merci pour cette aide précieuse !