Comment afficher des cateristiques produit regroupées par thématique

Comment afficher des cateristiques produit regroupées par thématique

Le commit

J’ai été contributeur de la version 1.7.4 de PrestaShop. Le commit est visivible ici, il contient juste une ligne, et permet de faire des regroupements thématique des caractéristiques sur la page produit.

commit-9356

C’est un peu tricky la première fois. Mais une fois qu’on l’a installé une première fois, je suis persuadé que ça sera super simple de l'utiliser une seconde fois sur une autre boutique.

Le problème

Tout le monde ne rencontre pas forcément ce problème. J’en ai déjà parlé ici. Avoir une fiche produits parfaitement remplies, avec les features et caractéristiques vérifiées, etc... c’est juste un exploit.

Donc, pour tous ceux qui ont accompli cet exploit, et qui ont un max de caractéristiques, le problème, c’est que ça devient vite illisible. Surtout, quand vous avez des caractéristiques qui sont un peu de même nature, que tous est mélangé, et qu'en plus, on essaye de comparer les produits. Ici, on peut avoir un sérieux problème d'UX.

Des solutions pour réaliser la même fonction existent, mais cependant, il faut ajouter un peu de Js.

L’idée ici, c’est que:

  • ça soit automatique (enfin presque), que ça marche sur toutes les pages.
  • on n’ajoute pas de js. Cependant, vous pourrez ajouter un peu de CSS.

Avec ce commit, il n’y a que des conditions à ajouter dans votre fichier TPL. C’est pratique et rapide à mettre en place.

C’est quoi le principe

En fait, suivant la position de votre caractéristique sur la page des caractéristiques, cette caractéristique appartiendra à un range de valeurs.

Ici, la valeur, qui déterminera les ranges, c'est la position.

range de valeurs sur la bo catactéristique

La proposition

Vous avez déjà compris, je pense. Dans le fichier catalog/_partials/product-details.tpl, vous avez juste à mettre un

{foreach from=$product.grouped_features item=feature}
    {if (int)$feature.position > 0 && (int)$feature.position <= 10 && $flag_general}

        {assign var=flag_general value=false}
        {l s='thematic-one' d='Shop.Theme.Catalog'}

    {elseif (int)$feature.position > 13 && (int)$feature.position <= 16 && $flag_proc}

        {assign var=flag_proc value=false}
        {l s='thematic-two' d='Shop.Theme.Catalog'}

    {/if}
    {$feature.name}
    {$feature.value|escape:'htmlall'|nl2br nofilter}
{/foreach}
Range des thématiques

Bref, en fait c’est tellement simple, qu’il n’y a pas forcement besoin d’expliquer plus. Il faut juste bien calculer ses ranges.

Le résultat

Vous aurez des caractéristiques beaucoup plus lisibles pour vos clients

Ces quelques lignes de code vont, je pense, grandement améliorer votre UX.