Depuis la sortie du Loop Grid l’an dernier, l’outil a fait son chemin dans mes projets : boucles d’articles, catalogues produits, annuaires. Une fois la base maîtrisée, la question naturelle qui revient côté client est presque toujours la même : « on peut filtrer par catégorie sans recharger la page ? ». La réponse est oui, et c’est justement ce que je veux détailler dans ce tutoriel plus avancé.
On va voir comment brancher un widget de filtres dynamiques sur un Loop Grid, comment activer la pagination AJAX pour un parcours fluide sans rechargement, et comment affiner la requête avec des réglages moins connus comme l’offset ou l’exclusion d’éléments. Prérequis : maîtriser la création d’un Loop Item de base, que j’avais couverte dans un précédent article.
Mettre en place les filtres dynamiques par taxonomie
Le principe repose sur deux éléments distincts qui doivent être connectés entre eux : le widget Loop Grid qui affiche les résultats, et un widget de filtres qui pilote la requête. Elementor Pro propose un widget dédié à cet effet, qui génère automatiquement une liste de boutons ou d’onglets à partir d’une taxonomie existante (catégories, étiquettes, ou taxonomie personnalisée).
- Ajoutez le widget de filtres sur votre page, au-dessus ou à côté du Loop Grid
- Dans ses réglages, choisissez la taxonomie source (catégorie, étiquette, taxonomie personnalisée)
- Notez ou définissez le Query ID du Loop Grid à cibler
- Renseignez ce même Query ID dans les réglages du widget de filtres, onglet « Connect to »
- Testez en front : cliquer sur un filtre doit rafraîchir uniquement le contenu du Loop Grid
Ce Query ID est la clé de voûte du système. C’est un identifiant texte libre que vous définissez vous-même dans l’onglet Avancé du widget Loop Grid, et qui sert de référence pour que d’autres widgets (filtres, pagination, recherche) sachent à quelle boucle précise ils doivent s’adresser. Sans ce lien explicite, le filtre reste inerte et n’a aucun effet sur la grille.
Cas pratique : filtrer un catalogue par catégorie de produit
Sur un catalogue WooCommerce, j’ai relié un widget de filtres basé sur les catégories de produits à un Loop Grid affichant l’ensemble du catalogue. Résultat : un clic sur « Accessoires » ne conserve que les produits de cette catégorie, sans rechargement de page, avec une transition visuelle fluide gérée nativement par l’éditeur.
Activer la pagination AJAX
Par défaut, la pagination d’un Loop Grid fonctionne comme n’importe quelle pagination classique de WordPress : cliquer sur « page suivante » recharge la page entière. Pour un rendu plus moderne et plus agréable côté utilisateur, Elementor Pro permet d’activer une pagination en AJAX, qui ne recharge que le contenu de la grille.
Ce réglage se trouve dans l’onglet consacré à la pagination du widget Loop Grid. Il suffit de basculer l’option sur le mode adapté pour que les clics suivants sur les liens de pagination (ou le bouton « charger plus », selon le style choisi) déclenchent une requête en arrière-plan plutôt qu’un rechargement complet.
- Le mode « pagination classique » avec des numéros de page fonctionne aussi en AJAX
- Le mode « charger plus » ajoute les résultats suivants à la suite des cartes déjà affichées
- Le mode « défilement infini » charge automatiquement la suite quand l’utilisateur atteint le bas de la grille
Un point à vérifier systématiquement après activation : le comportement du filtre combiné à la pagination. Quand un utilisateur filtre puis navigue en page 2, la requête doit conserver le filtre actif. C’est le cas par défaut grâce au Query ID partagé, mais un test manuel reste indispensable avant mise en production.
Réglages avancés de la requête
Au-delà des filtres et de la pagination, l’onglet Requête du Loop Grid cache quelques réglages précieux pour des mises en page plus fines, notamment lorsqu’on affiche plusieurs boucles différentes sur une même page.
Offset : décaler le point de départ
Le réglage Offset permet de ne pas commencer la boucle au tout premier résultat. C’est utile par exemple pour une page d’accueil où un article est déjà mis en avant manuellement en haut de page dans un widget séparé : on configure le Loop Grid suivant avec un offset de un, pour éviter d’afficher deux fois le même article.
Exclude : éviter les doublons entre sections
Le réglage Exclude va plus loin en permettant d’exclure explicitement certains identifiants d’articles ou de produits de la requête. C’est particulièrement pratique quand plusieurs Loop Grid cohabitent sur une même page avec des rôles différents : un Loop Grid « articles à la une » sélectionné manuellement, suivi d’un Loop Grid « tous les autres articles » qui doit exclure les identifiants déjà utilisés plus haut.
| Réglage | Usage type |
|---|---|
| Query ID | Relier filtres et pagination à un Loop Grid précis |
| Offset | Décaler le début de la boucle pour éviter une répétition |
| Exclude | Retirer des éléments précis déjà affichés ailleurs sur la page |
Notez toujours vos Query ID dans un document de suivi de projet dès qu’une page compte plus de deux Loop Grid. Deux identifiants identiques par erreur, et c’est la mauvaise boucle qui se met à réagir aux filtres.
Points de vigilance avant mise en production
La pagination AJAX et les filtres dynamiques reposent sur du JavaScript exécuté côté navigateur. Sur un site avec beaucoup d’extensions actives, il arrive qu’un conflit de script vienne perturber le comportement attendu : testez toujours sur un environnement propre avant de conclure à un bug de l’outil lui-même. Vérifiez également l’accessibilité du résultat : après un filtrage en AJAX, assurez-vous que le focus clavier et les lecteurs d’écran suivent correctement le nouveau contenu affiché.
Enfin, gardez à l’esprit que ces fonctionnalités, aussi pratiques soient-elles, ne remplacent pas un moteur de recherche à facettes complexe avec croisement de plusieurs critères simultanés. Pour ce niveau d’exigence, un plugin spécialisé reste parfois plus adapté.
En résumé
Avec les filtres dynamiques, la pagination AJAX et les réglages avancés de requête comme l’offset ou l’exclusion, le Loop Grid gagne un niveau de maturité qui permet de couvrir une large majorité des besoins de boucles dynamiques sans sortir de l’éditeur Elementor. La clé de voûte reste le Query ID : une fois qu’on a compris son rôle de connecteur entre les widgets, l’ensemble du système devient logique et prévisible. Prenez le temps de bien nommer vos identifiants de requête dès le départ, ça vous fera gagner un temps précieux sur les pages qui combinent plusieurs boucles.
