Filtre à facettes pour Prestashop

Prestashop 1.7 – Navigation à facettes (ép. 35)

Je me souviens encore quand cette fonction filtre à facettes est sortie… tout le monde s’extasiait (sous Prestashop 1.4). Maintenant, cette option fait partie des standards… voyons comment l’utiliser au mieux pour qu’elle soit utile.

Filtrer pour mieux trouver !

Le module navigation à facettes est souvent bien pratique lorsqu’on a beaucoup de produits avec des déclinaisons… cela permet de rapidement dégrossir le catalogue pour tomber sur ce que l’on cherche. Avant d’activer toutes les options à dispositions… il est très important de vous poser la question pour chaque option de filtre… si celle-ci est vraiment utile ou si vous devez la désactiver.

Il faut savoir que le plus gros potentiel se trouve sur la gestion des caractéristiques… en fait plus vous utilisez les caractéristiques sur vos produits, plus vous aurez la possibilité d’exploiter des filtre élaborés. Trop souvent cette option est oubliée ou mise de côté… je conseille vivement à tous les e-commerçant de mettre en place des caractéristiques sur leurs produits… déjà rien que pour utiliser le module filtre à facettes de Prestashop.

Les clients recherchent aussi par envie… par intérêt et pour ça les caractéristiques peuvent être très utiles. Ne pensez pas juste à « diamètre », « hauteur »… imaginez des filtres qui sortent un peu de l’ordinaire. Par exemple si on cherche un cadeau sur un site on aimerait pouvoir dire… pour qui on cherche ? « Un ado ? », « Un bébé ? », « Un jeune couple ? »… Cadeau Maestro le fait par exemple sur son site… vous pouvez utiliser le même concept sur votre e-commerce avec la notion des caractéristiques.

Dans ce tutoriel j’ai vu certains points qui ne semblent pas encore fonctionner à 100% (l’ordre du tri + la glissière des prix)… peut-être que c’est la version Prestashop 1.7 qui mérite encore d’être approfondie, je verrai avec les prochaines mises à jour du module pour voir ce que ça donne.

Ressources

Aucun fichier n’est nécessaire pour ce tutoriel, seul le module natif sera utilisé.

Résumé de la vidéo : filtrer ses produits sous Prestashop

  • Utilité du module navigation à facettes ?
  • Zalando le propose sur son site, vous aussi vous pouvez le faire… et en plus c’est très simple, pourquoi s’en priver ?
  • Plus vos fiches produits sont complètes, plus vous pourrez avoir de critères de filtres à disposition… prenez le temps de les ajuster à 100%.
  • Limitez-vous à un modèle de filtre… testez l’affichage des différentes options et activez uniquement les critères de filtres indispensables.
  • Ajoutez des options de filtres qui sortent de l’ordinaire comme par exemple « Look » si vous êtes un site e-commerce dédié au textile.
  • N’oubliez pas de mettre en place des tâches planifiées qui vont actualiser régulièrement votre module navigation à facettes.
  • La mise en place des caractéristiques est une arme « ultime » à la disposition de tous… mais peu de marchands l’exploitent… soyez les premiers et prenez de l’avance.
  • Si vous avez trop de problèmes avec le module natif, ne perdez pas de temps à débuguer… prenez le module Advanced Search 4 de PrestaModule.

BOUM !

1 seul mail par semaine - pas de publicité

31 commentaires sur “Prestashop 1.7 – Navigation à facettes (ép. 35)”

  1. Bonjour Germain,

    J’ai voulu jouer avec le module de filtres, mais en supprimant tous les filtres existant je pense avoir brisé la machine. Je fais un nouveau filtre et j’enregistre mais il n’apparait pas dans ma fenêtre et le seul filtre qui reste visible je ne parviens pas à le supprimer.
    je recois une exception prestashop

    Selected categories value must be an array
    at line 258 in file classes/helper/HelperTreeCategories.php

    253. }
    254.
    255. public function setSelectedCategories($value)
    256. {
    257. if (!is_array($value)) {
    258. throw new PrestaShopException(‘Selected categories value must be an array’);
    259. }
    260.
    261. $this->_selected_categories = $value;
    262. return $this;
    263. }

    As-tu une idée de ce qui se passe?

    1. Hello,

      Comme ça difficile à dire… encore plus d’ailleurs quand il s’agit du module navigation à facettes, peut-être désinstaller le module et le réinstaller pour voir si le bug survient encore. Clairement ici un a un problème dans les données… mais ça implique un débugage précis et pas à pas… pour comprendre pourquoi les valeurs fournies ne sont pas en tableau.

      A bientôt !

        1. Bonjour Germain,

          Tout d’abord je tiens à te remercier, j’ai depuis un bon moment mis en application certain de tes tutos.

          Pour le filtre j’ai une question, comment peut-on limiter l’affichage du nombre de couleurs.
          C’est très désagréable à scroller et moche visuellement.

          D’avance merci
          Excellent weekend à tous.
          Martial

          1. Hello,

            Eventuellement il est possible de changer l’affichage dans le filtre à facette (en back-office) on peut dire si on veut « liste déroulante » ou « case à cocher ». Il me semble aussi qu’on peut désactiver dans le groupe d’attribut, le mode « couleur » si besoin.

            A bientôt !

  2. Bonjour,

    J’ai bien mis les caractérise sur oui dans mon modèle de filtre mais il ne s’affiche pas sur le site ( alors que les attributs pour les déclinaisons fonctionne ).
    Avez-vous une idée d’où cela peut venir ?

    Merci !

    1. Bonjour,

      A vérifier que vous avez bien relancé l’indexation dans le module de filtre et que tous les caches Prestashop sont désactivés. Essayez de le faire au moins sur 2 articles, j’ai vu que parfois quand il y’a 1 seul produit traité dans le filtre, cela peut causer problème.

      A bientôt !

  3. Hello Webbax,

    juste pour te dire que je suis assez fan de tes videos qui m’aident de plus en plus chaque jour. Je suis en train de construire un Prestashop et malheureusement je suis face à un soucis avec le filtre. En effet dans la recherche à facette par couleur quand je sélectionne une couleur de produits, par exemple la couleur camel, l’image du produit qui s’affiche ne correspond pas à la couleur choisie : l’image sera une chaussure noire (alors qu’elle est également disponible en camel).

    merci beaucoup pour ton retour.

    1. Hello,

      Merci pour ta demande.

      Je pense que cela est le comportement normal de Prestashop, il montre toujours l’image de produit « déclinaison principale » (ce qui n’est pas vraiment logique effectivement). Pour palier à ce problème il faudrait pouvoir faire afficher plusieurs images du produit dans le listing de la catégorie lorsqu’il s’agit d’un produit avec variantes (ce serait un 1er compromis).

      A voir si sur Prestashop Addons un tel module existe…

      A bientôt !

  4. Bonjour Webbax,
    Tout d’abord un grand merci pour tout tes tutos mis à notre disposition. Je progresse jour après jour.
    J’ai suivie parfaitement ton tuto et modifié quelques règles CSS et le rendu est très sympa.
    En revanche pour mon site, il est inutile d’avoir la navigation a facette des sous categories, donc je les ai désactivées. En revanche ma page entière se retrouve décaler à gauche.
    Que puis-je faire pour la recentrer uniquement sur écran PC. J’ai fait quelques test de replacement mais tout les devices repondent. Je suis perdu. Aurais-tu une solution pour me dépanner.

    Merci!

    1. Hello,

      Temporairement pour éviter de devoir trop modifier la mise en page, je conseille d’activer le bloc des catégories à gauche. Sinon dans les paramètres du thème de Prestashop il est possible de régler le nombre de colonnes affichées (ex. mono-colonne).

      A bientôt !

  5. Bonjour Germain et tout d’abord bravo pour toutes ces vidéos !
    J’ai un souci avec la navigation à facettes qui ne s’affiche pas sur 2 de mes pages.
    Sur toutes les autres pages elle s’affiche.
    J’ai vidé le cache, sans succès
    j’ai désinstallé le module, sans succès
    Si vous avez une solution
    merci

    1. Bonjour,

      Difficile de répondre, s’il s’agit de nouvelles catégories (faites après-coup)… il faut parfois retourner dans le module « re-modifier » le filtre et il se peut que ces catégories ne soient pas cochées.

      A bientôt !

  6. Bonjour,

    Déjà un grand merci et un grand bravo pour les vidéos qui sont d’une très grande utilité.

    Concernant la navigation à facette, j’ai vu qu’il y avait un problème au niveau de la mise en page du filtre de prix sur la vidéos. En fait, cela est du au texte qui est trop long et le bouton se met au mauvais endroit. Cela fait la même choses quand on crée des caractéristiques trop longues (de plus de 20 caractère). Cela me pose aussi un problème. Je ne sais pas comment régler ce soucis.

    En fait il faudrait forcer le bouton de sélection à rester à gauche devant le texte et à faire un sorte qu’il y est un retour à la ligne à la fin du texte. J’espère avoir été claire dans mes explications.

    Je suis très embêté par ce soucis car j’ai des caractéristiques parfois longues.

    Merci par avance pour ton aide.

    Mickaël

    1. Hello,

      Peut-être qu’un début de solutions simple serait de jouer avec l’affichage CSS en modifiant sur le filtre (la taille du texte, ou diminuer les marges). Franchement à expérimenter… car ce module est assez touffu pour les retouches…

      A bientôt !

  7. Bonjour,

    A t’on des nouvelles du bug du tris par prix dans la navigation à facette ?
    Car j’ai le problème avec toute les caractéristiques.. Même après désinstallation complète du module pour de la réinstallation. C’est un problème d’affichage et je n’arrive pas à trouver la solution sur PS 1.7.5 module 3.4.0.
    Merci d’avance pour votre aide.

    1. Bonjour,

      Je n’ai pas eu vraiment de nouvelles concernant ce problème sous Prestashop, peut-être que vous pouvez ouvrir un topic sur le forum officiel pour voir si d’autres personnes ont déjà solutionné ce cas de figure.

      A bientôt !

  8. Bonjour,
    Merci pour cette vidéo très intéressante, et toutes les autres !
    Pour ma part, j’ai bien configuré le module en suivant toutes les étapes, enregistré plusieurs caractéristiques par produits, et vice-versa. Mais ça ne fonctionne pas en front office.
    Il apparaît bien une colonne à gauche : « filtrer par », avec plusieurs onglets « prix », « modèle », « composition »… Mais rien dans ces onglets, et il ne se passe rien si on clique dessus. Voir ici par exemple : https://immashop.fr/108-statues.
    J’ai tout essayé, vidé le cache, réinitialisé le module, le mettre à jour, etc… Rien n’y fait.
    Pensez-vous que cela puisse être lié à mon thème (lifestyle) qui n’est pas le thème par défaut ?
    Auriez-vous une idée de solution ?
    D’avance un grand merci de vos conseils !
    Cécile

    1. Bonjour,

      Chez-vous il semble y avoir un problème dans les règles CSS, car des éléments de la navigation à Facette de Prestashop sont masqué avec « display:none!important; » (mais les filtres sont bien dans la page). Il serait préférable de demander conseil à l’auteur du thème Prestashop.

      A bientôt !

  9. Bonjour, merci pour cette vidéo.
    J’utilise Prestashop 1.7 Cloud, avec le module navigation à facettes je voudrais utiliser le filtres horizontalement. Dans mon thème les produits utilisent la largeur de la page. Les filtres apparaissent bizarrement à gauche. Quelle solution ?
    Philippe

    1. Bonjour,

      A ma connaissance le module Prestashop de base pour le filtre, se fait uniquement à la verticale. Pour un filtre horizontal, il faudrait regarder du côté du module payant : « Module Advanced Search 4 ».

      A bientôt !

  10. Bonjour,

    Savez vous s’il est possible de créer des filtres sur des intervalles de valeurs, tout en saisissant une valeur de caractéristique exacte dans la fiche produit ?
    cela éviterait d’avoir des listes à rallonge dans la colonne de gauche.
    exemple :
    Puissance : 5000 W – 7500 W
    au lieu de 1 case à cocher 5000 W et 1 case à Cocher 7500 W

    Merci de votre aide

  11. Merci Germain, ta vidéo est précieuse ! En revanche, j’ai installé une navigation à facette avec un filtre de plus d’une centaines de caractéristiques pour des produits sous la forme de liste déroulante, mais la liste dépasse largement la hauteur du site :/ y-a-t-il moyen de limiter la hauteur de la liste ? j’ai testé avec un overflow:auto et un max-width de 200px, mais cela n’est pas pris en compte ??? Merci d’avance, ce serait super si tu me trouvais une solution 😉 Pascal

    1. Peut-être en mettant l’overflow à hidden (+ mettre la mention !important à la règle CSS pour être sûr qu’elle s’applique).

  12. Merci Germain, j’ai trouvé là où ça pêchait :/ ce n’est pas du max-width, mais bien du max-height, et il faut mettre l’overflow à auto, parce qu’avec hidden, il n’y a plus moyen de faire défiler à l’intérieur du sous-menu… et il fallait aussi que je vide le cache de mon navigateur pour que cela soit bien pris en compte 😀

  13. Bonjour Germain,
    Merci pour ton aide au travers de ces différents tutos et vidéos
    J’avais un question, à savoir si il est possible de limiter l’affichage dans cette colonne (admettons les tailles dans une catégorie de produit) pour n’afficher que les tailles disponibles. Existe-t-il une variable pour afficher ou pour plutôt ne pas afficher les éléments indisponibles dans un filtre de la colonne ?
    Merci Laurent

  14. Bonjour,
    Tout d’abord merci pour ces vidéos qui m’ont déjà permis de bien customiser le theme de bas sur mon prestashop, j’ai finis par comprendre une partie du code qu’on pouvait mettre sur le custom Css …

    Pour revenir à mon souci concernant le filtre à facettes, j’ai un shop de vêtements, dont certaines sous catégories portent le même nom et posent souci au filtre apparemment.
    Ex. vêtements femmes : si je sélectionne une sous-catégorie, pas de souci mais si je passe par le filtre par exemple « vestes » le filtre affiche les vestes hommes. Par contre bizarrement il met bien le nombre de vestes femmes dans son affichage avant le clic. J’ai remarqué pareil pour « sacs femmes » et mallettes … mais j’imagine qu’il y en a d’autres.
    J’ai déjà tout réindexé … que puis-je faire à ton avis ?

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *