Filtres à Facettes AJAX pour PrestaShop — Documentation

Ce guide couvre l’installation, la configuration et l’exploitation du module Filtres à Facettes AJAX pour PrestaShop 8 et 9. Le module remplace la recherche à facettes native par une navigation AJAX plus rapide, un slider de prix avec histogramme et un contrôle fin de l’indexation SEO des pages filtrées.

Installation

Depuis votre back-office, ouvrez Modules > Module Manager, cliquez sur Installer un module et déposez le fichier dffacetedfilter.zip. À l’installation, le module effectue automatiquement trois actions :

• il crée ses tables et son onglet d’administration ;
• il synchronise une première fois les facettes à partir de votre catalogue ;
• il préchauffe l’index de prix (dans la limite de quelques secondes).

Première configuration

Rendez-vous dans Catalogue > Filtres à facettes. Vous y trouvez la liste des facettes, un tableau de bord de synthèse et les réglages généraux et SEO.

Synchroniser les facettes

Le bouton Synchroniser depuis le catalogue crée automatiquement les facettes manquantes à partir de vos groupes d’attributs, de vos caractéristiques et des facettes intégrées (prix, marque, promotions, disponibilité, état). Les facettes existantes ne sont jamais modifiées : vous pouvez relancer la synchronisation sans risque après avoir ajouté un attribut ou une caractéristique.

Reconstruire l’index de prix

Le bouton Reconstruire l’index prix recalcule les bornes de prix de tous les produits, par lots, avec une barre de progression. Lancez-le après l’installation puis après tout import massif de produits.

Gérer les facettes

Chaque ligne de la liste peut être réordonnée par glisser-déposer (l’ordre définit l’ordre d’affichage en front et l’ordre normalisé des URLs), activée ou désactivée, et éditée.

Options d’une facette

• Libellé : le nom affiché, traduisible par langue.
• Affichage : cases à cocher, pastilles couleur / texture, ou liens simples. Les groupes de couleurs héritent automatiquement de l’affichage en pastilles.
• Multi-sélection : autorise la sélection simultanée de plusieurs valeurs d’une même facette, combinées par un OU.
• Afficher les compteurs : affiche le nombre de produits en face de chaque valeur.
• Masquer les valeurs vides : masque les valeurs à zéro produit au lieu de les afficher grisées.
• Repliée par défaut : la facette s’affiche fermée, l’internaute la déplie au clic.
• Valeurs avant « Voir plus » : nombre de valeurs visibles avant le bouton d’expansion (0 = tout afficher).

Le slider de prix et son index

La facette Prix s’affiche sous forme d’un double curseur. Au-dessus, un histogramme de répartition des produits sur douze tranches aide l’internaute à situer les prix. Ces données proviennent d’un index de prix dédié, distinct des tables PrestaShop, pour rester rapide même sur un gros catalogue.

Maintenance de l’index

L’index est mis à jour en temps réel par des hooks lorsqu’un produit, un prix spécifique ou une déclinaison change. Pour une reconstruction complète planifiée, utilisez l’endpoint cron affiché en back-office :

/module/dffacetedfilter/cron?token=VOTRE_JETON

L’appel traite l’index par tranches avec une garde-temps d’environ 20 secondes ; s’il reste des produits, la réponse fournit l’URL de continuation à rappeler. Un appel nocturne quotidien suffit dans la plupart des cas.

La facette Promotions

La facette En promo filtre les produits actuellement en réduction : produits marqués « en soldes » ou couverts par un prix spécifique actif (réduction en cours, dans la plage de dates, pour la devise, le pays et le groupe courants). Elle est créée activée par défaut lors de la synchronisation.

Disponibilité et état

Deux facettes intégrées complémentaires sont créées désactivées, à activer selon vos besoins :

• Disponibilité : une valeur « En stock » qui tient compte de votre réglage de commande en rupture de stock.
• État : neuf, occasion, reconditionné.

Restreindre une facette à des catégories

Par défaut, une facette s’affiche sur toutes les pages de listing. Le formulaire d’édition propose deux champs pour changer cela : une règle de catégories et l’arbre des catégories sur lequel elle s’applique.

• Afficher uniquement sur les catégories ci-dessous : la facette n’apparaît que sur les catégories cochées et leurs sous-catégories. C’est le bon réglage pour n’afficher « Pointure » que sous Chaussures, ou « Taille écran » que sous High-tech.
• Afficher partout sauf sur les catégories ci-dessous : la facette s’affiche sur tout le site, à l’exception des catégories cochées et de leurs sous-catégories. C’est le bon réglage pour masquer « Type de vin » sur Vins Rouges et Vins Blancs, où la facette n’apporte rien, tout en la gardant ailleurs.

Le SEO des facettes

C’est l’un des points forts du module : vous décidez précisément quelles pages filtrées peuvent être indexées. Les URLs de filtres sont lisibles et suivent le format :

/categorie?dff=couleur:rouge,bleu-marine/prix:10,50/marque:nike

Le paramètre s’appelle q au lieu de dff en mode Creative Elements complet ; le format, lui, est identique. Les facettes sont séparées par une barre oblique, le slug de la facette et ses valeurs par deux-points, et les valeurs entre elles par une virgule. L’ordre des facettes et le tri des valeurs sont normalisés afin qu’une même combinaison produise toujours une seule URL canonique.

Réglages SEO

• Indexable (par facette) : une facette non indexable force la page filtrée en noindex, follow et ajoute rel="nofollow" sur ses liens.
• Nombre max. de valeurs indexables : au-delà de ce seuil de valeurs sélectionnées, la page passe en noindex, follow. La valeur 1 est la plus sûre contre l’explosion du budget de crawl.
• Canonical auto sur les pages indexables : les pages indexables reçoivent une balise canonical pointant vers leur propre URL de filtre normalisée. Le canonical du thème est retiré côté front pour éviter les doublons.
• Tout passer en noindex : force le noindex, follow sur toutes les pages filtrées, quels que soient les réglages par facette.

Modes AJAX

Le réglage Mode AJAX détermine comment la page se met à jour au clic sur un filtre :

• Thème (événements natifs) — recommandé : le module émet l’événement natif de PrestaShop et laisse le cœur et le thème rafraîchir la liste, les facettes et l’historique du navigateur. C’est le mode le plus compatible avec les thèmes basés sur classic.
• Autogéré : pour les thèmes non standards, le module récupère lui-même la page en AJAX et remplace les blocs concernés. À utiliser seulement si le mode Thème ne rafraîchit pas correctement la page.

Tenir les robots à l’écart des filtres

Une balise noindex empêche l’indexation, pas le chargement : le robot doit d’abord récupérer la page pour lire la balise. Pour qu’il ne charge plus les combinaisons de filtres, il faut qu’il ne les découvre pas. Deux réglages s’en chargent, dans Catalogue > Filtres à facettes.

• Liens de filtres explorables : Facettes indexables uniquement garde un vrai lien sur les facettes que vous avez déclarées indexables et transforme les autres en liens pilotés par JavaScript. Vos clients cliquent exactement comme avant, mais les robots ne trouvent plus ces combinaisons dans la page.
• Anciennes URL de filtres natives (?q=) : les URL laissées par la recherche à facettes native de PrestaShop, du type ?q=Marque-..., peuvent recevoir une réponse 410 Gone avant même qu’une requête catalogue soit lancée, ou une redirection 301 vers le listing non filtré. La 410 est la réponse la moins coûteuse pour le serveur et celle qui fait abandonner l’URL aux moteurs. Ce réglage ne s’applique ni en mode Creative Elements complet, où q est le paramètre du module, ni à la page de recherche.

Panneau de filtres mobile et filtres actifs

Sous une certaine largeur d’écran, la barre de filtres est masquée et s’ouvre en panneau depuis un bouton « Filtres ». Le réglage Panneau de filtres en dessous de (px) fixe ce seuil : 767 correspond aux téléphones, 1024 convient quand votre mise en page déplace aussi la colonne de filtres sur tablette. Le panneau se ferme par son bouton « Voir les résultats », par un clic à l’extérieur ou par la touche Échap.

Le réglage Libellé des filtres actifs choisit ce qu’affiche chaque puce de filtre actif : la facette et la valeur (« Couleur : Rouge ») ou la valeur seule (« Rouge »). Les lecteurs d’écran reçoivent toujours les deux.

Compatibilité Creative Elements

Creative Elements (WebshopWorks) ne lit pas le bloc de facettes rendu par un module. Ses widgets Filtres, Filtres actifs et son bouton Filtres mobile reconstruisent leur propre affichage à partir de la collection de facettes native portée par le résultat de recherche. Depuis la version 1.3, le module publie cette collection : les trois widgets fonctionnent et conservent l’intégralité de leurs contrôles de design, pastilles couleur et slider de prix compris.

Les deux réglages

Dans Catalogue > Filtres à facettes > Compatibilité Creative Elements :

• Mode de compatibilité : Complet, quand Creative Elements est installé, Complet, toujours, Partiel ou Désactivé. Le mode complet utilise les widgets de filtres de Creative Elements et des URL en ?q= ; le mode partiel garde les URL en ?dff= et utilise les blocs du module (voir plus bas).
• Bloc de filtres rendu par : Automatique confie la barre latérale à Creative Elements sur les listings dont il pilote le gabarit, et conserve le bloc du module partout ailleurs. Choisissez Ce module si votre gabarit Creative Elements ne contient pas de widget Filtres et que vous voulez garder la barre latérale DataFirefly.

En mode complet, le paramètre d’URL devient q

Creative Elements code en dur le paramètre q, dans ses widgets comme dans le script de son slider de prix. En mode complet, le module s’aligne donc sur q au lieu de dff :

/categorie?q=couleur:rouge,bleu-marine/prix:10,50/marque:nike

Le format lui-même ne change pas, seul le nom du paramètre. Les URLs déjà générées en dff sont redirigées en 301 vers leur équivalent en q : rien de ce qui est indexé ou mis en favori n’est perdu.

Mode partiel : garder les URL en dff

En mode partiel, le module ne publie pas ses facettes pour les widgets de filtres de Creative Elements, qui restent vides, et les URL gardent le paramètre ?dff=. Vous placez à la place les blocs du module dans votre gabarit de listing avec le widget Module de Creative Elements : sélectionnez le module, puis saisissez l’un de ces noms de hook.

• displayDffFacets : la barre de filtres (c’est aussi ce qui s’affiche si le champ hook reste vide) ;
• displayDffActiveFilters : les filtres actifs et le lien « Tout effacer » ;
• displayDffFiltersButton : un bouton « Filtres » qui ouvre le panneau mobile.

Pour garder la main sur le design du bouton, vous pouvez aussi utiliser un widget Bouton de Creative Elements et lui ajouter la classe CSS dff-open-filters dans son onglet Avancé : il ouvre alors le même panneau. Les widgets Creative Elements de liste de produits, pagination, tri et compteur continuent de fonctionner normalement. En contrepartie, l’apparence des filtres se règle par la couleur d’accent du module et votre propre CSS, et non par l’onglet Style de Creative Elements.

Bon à savoir

• Gardez le mode AJAX « Thème ». Creative Elements s’appuie sur l’événement natif de PrestaShop et renvoie ses propres blocs rendus ; le mode autogéré ne saurait pas les remplacer.
• À partir de Creative Elements 3.x, les liens de facettes ne sont plus de vrais liens mais des éléments pilotés en JavaScript. C’est une bonne nouvelle pour votre budget de crawl : les combinaisons de filtres ne sont plus découvrables par un robot. En contrepartie, le filtrage devient strictement dépendant de JavaScript dans son interface.
• Évitez un caractère / dans le libellé de votre facette Prix : le slider de Creative Elements construit son URL côté client à partir de ce libellé.

Cache des compteurs

Le calcul des compteurs disjonctifs peut être coûteux sur un gros catalogue. Le module met leur résultat en cache pour une courte durée configurable (300 secondes par défaut). Ce cache est invalidé automatiquement à chaque changement de catalogue et à chaque modification d’une facette. Un bouton Vider le cache des compteurs est disponible en back-office.

Statistiques d’usage

Le tableau de bord, en haut de la page d’administration, résume l’activité des 30 derniers jours : produits indexés, nombre de vues de pages filtrées, part du budget de crawl gardée hors index (pages filtrées servies en noindex) et un classement des facettes les plus utilisées. Le trafic des robots est exclu de ces chiffres, qui décrivent donc le comportement de vos clients. Vous pouvez désactiver l’enregistrement des statistiques dans les réglages de performance.

Pages prises en charge

Les facettes s’appliquent aux pages de catégorie, marque, fournisseur, nouveautés, meilleures ventes, promotions et résultats de recherche (en respectant le classement natif de PrestaShop). La facette Marque est automatiquement masquée sur une page de marque, et la facette scoping-catégorie sur une page de recherche.

Désactiver la recherche à facettes native

Le module prend la priorité sur ps_facetedsearch, mais nous recommandons de désactiver ce dernier pour éviter un double travail d’indexation. Un avertissement vous le rappelle en back-office s’il reste actif.

Dépannage

• Les facettes n’apparaissent pas : lancez une synchronisation, vérifiez qu’au moins une facette est active, et que vous êtes bien sur une page de listing prise en charge.
• Le slider de prix est absent : reconstruisez l’index de prix ; la facette Prix se masque tant que l’index est vide pour la catégorie affichée.
• La page ne se rafraîchit pas en AJAX : passez le mode AJAX en « Autogéré » si votre thème ne suit pas le standard de PrestaShop.
• Après un clic, les cases ne se cochent pas et un second filtre remplace le premier : corrigé en 1.4.3. Le bloc de facettes n’était pas rafraîchi après le filtrage AJAX. Dans la console du navigateur, dffFaceted.listening() doit renvoyer true.
• Les filtres s’affichent sous la liste de produits sur mobile : corrigé en 1.4.1 pour les thèmes Bootstrap 5 comme Hummingbird. Vérifiez aussi le réglage du seuil du panneau de filtres.
• L’ordre des facettes ne se sauvegarde pas : corrigé en 1.3.1. Avant cette version, PrestaShop postait le glisser-déposer sous une clé que le module ne lisait pas ; la notification annonçait une réussite mais rien n’était écrit.
• Une facette s’affiche sur une catégorie que j’ai décochée : décocher ne masque pas. Cochez cette catégorie et choisissez la règle « Afficher partout sauf sur les catégories ci-dessous ».
• Les widgets Creative Elements restent vides : en mode complet, vérifiez que le mode de compatibilité est bien réglé sur un mode « Complet » et que le module est en mode AJAX « Thème ». En mode partiel, c’est normal : ces widgets sont remplacés par les blocs du module placés avec le widget Module.
• La barre de filtres apparaît en double : votre gabarit Creative Elements contient un widget Filtres et le module rend aussi le sien. Passez Bloc de filtres rendu par sur Automatique ou Widget Creative Elements.
• Trop de pages indexées : abaissez le nombre max. de valeurs indexables, rendez non indexables les facettes à forte cardinalité (couleur, taille), ou activez « Tout passer en noindex » le temps de reprendre la main.

Le code source est fourni non chiffré. Vous bénéficiez de 12 mois de mises à jour de compatibilité et d’un support sous 24 h.

Nouveautés de la version 1.4

Mode Creative Elements partiel

Les URL gardent ?dff=, et les filtres, filtres actifs et bouton mobile du module se placent dans la mise en page avec le widget Module de Creative Elements. Voir la section Compatibilité Creative Elements.

Contrôle du crawl

Les liens de facettes peuvent être réservés aux facettes indexables, et les anciennes URL ?q= de la recherche native peuvent recevoir une 410 avant toute requête catalogue. Voir la section Tenir les robots à l’écart des filtres.

Panneau mobile et filtres actifs

Le panneau de filtres mobile ne dépend plus des classes utilitaires du thème, absentes des thèmes Bootstrap 5 comme Hummingbird, et suit un seuil de largeur réglable. Les filtres actifs peuvent n’afficher que la valeur.

Rafraîchissement AJAX

Le module rafraîchit lui-même ses facettes et ses filtres actifs après chaque filtrage, sans dépendre des sélecteurs du thème. Deux défauts qui empêchaient ce rafraîchissement sont corrigés : l’abonnement aux événements de PrestaShop avait lieu trop tôt pour aboutir (1.4.3), et le basculement automatique en mode autogéré après 900 ms laissait les widgets de page builder sur l’état précédent (1.4.1).

Nouveautés de la version 1.3.1

Deux correctifs signalés en production.

L’ordre des facettes se sauvegarde. PrestaShop poste le glisser-déposer sous l’identifiant privé de son préfixe id_, soit facet, et non sous le nom de la table. Le module lisait la mauvaise clé et n’écrivait rien, tout en laissant le navigateur afficher une confirmation. L’ordre est désormais reconstruit intégralement depuis la liste reçue, ce qui rend l’écriture idempotente, et l’appel renvoie un vrai statut.

Règle de catégories « sauf ». La restriction par catégories était une liste blanche seule : on pouvait limiter une facette à certaines catégories, jamais l’en exclure. Voir la section Restreindre une facette à des catégories plus haut.

Nouveautés de la version 1.3

Compatibilité Creative Elements

Le module publie désormais ses facettes sous forme de collection native, la structure que le page builder attend. Ses widgets Filtres, Filtres actifs, son bouton Effacer et son bouton Filtres mobile fonctionnent avec le module et gardent tous leurs contrôles de design. Voir la section Compatibilité Creative Elements plus haut, en particulier le changement de nom du paramètre d’URL.

Performance sous le trafic des robots

La navigation à facettes s’effondre sous le trafic automatisé parce que chaque combinaison distincte est un défaut de cache. Cette version supprime le travail par requête qui ne dépend pas de la sélection :

• Cartes de valeurs mutualisées : les valeurs possibles de chaque facette dépendent du catalogue, pas de la sélection. Elles sont chargées en une seule entrée de cache au lieu d’une requête et de plusieurs accès disque par facette à chaque page.
• Cache des compteurs protégé : au-delà de trois facettes ou six valeurs, une combinaison est calculée mais plus stockée. Ce sont celles que génèrent les robots, elles ne sont jamais relues et ne faisaient que gonfler la table. Les deux seuils sont réglables.
• Visibilité catalogue : la sous-requête de contrôle des groupes clients, rejouée dans chaque requête de comptage, est supprimée sur les pages catégorie lorsque aucune catégorie active n’est restreinte pour les groupes du visiteur.
• Landing pages sans requête : l’ensemble des cibles actives est conservé sous forme d’index compact, donc la réponse négative, qui est le cas de loin le plus fréquent, ne coûte plus rien.
• Statistiques : plus aucune écriture pour les robots.

Nouveautés de la version 1.2

Landing pages SEO

Dans Catalogue > Filtres à facettes > Landing pages SEO, transformez une combinaison de filtres précise (par exemple Chaussures × Couleur : rouge × Marque : Nike) en véritable page d’atterrissage : meta title, meta description, H1 et introduction éditoriale, par langue. Pour cibler une combinaison, copiez la valeur du paramètre dff (ou q en mode Creative Elements complet) depuis une URL filtrée de votre boutique et collez-la dans le formulaire.

Toutes les landings actives sont listées dans un sitemap XML dédié, avec alternates hreflang, à soumettre dans Search Console :

/module/dffacetedfilter/sitemap

Autres nouveautés

• Facette Sous-catégories : propose les sous-catégories directes de la catégorie affichée ; le listing inclut alors automatiquement tout le sous-arbre.
• Tri des valeurs par facette : position catalogue, alphabétique ou nombre de produits décroissant.
• Pastilles couleur en grille ou en liste : chaque facette couleur peut s’afficher en grille horizontale de pastilles ou en liste verticale avec libellés et compteurs.
• Masquer les facettes à valeur unique : une facette dont l’unique valeur couvre tout le listing n’apporte aucun pouvoir de filtrage ; ce réglage l’écarte automatiquement.
• Couleur d’accent : choisissez au sélecteur la couleur des cases cochées, interrupteurs, slider et badges ; le contraste du texte est calculé automatiquement.
• AJAX résilient : si le thème ne répond pas à l’événement natif, le module bascule automatiquement en mode autogéré ; la position de scroll est préservée après chaque filtrage et les filtres mobiles s’ouvrent dans un modal plein écran.
• 8 langues front : FR, EN, ES, DE, IT, PL, PT, NL livrées dans le module.