J’ai été confronté à un petit exercice au boulot cette semaine. Il me fallait réaliser un filtre sur des articles émanant d’un site WordPress et ce par leur date de publication. Il fallait le faire via un dropdown, qui reprenait les années des articles sans qu’il n’y ait des doublons. Voilà comment j’ai procédé pour créer un filtre Ajax sur les articles WordPress
Les articles WordPress
J’en ai déjà parlé ici et ici. Mais sachez que WordPress a une API intégrée et permet donc la lecture (entre autre) de ces articles via cette dernière. Ici, c’était très utile pour réaliser un filtre ajax (sans rafraîchissement de la page) pour afficher les posts compris entre 2 dates. Ici, il s’agissait de le faire par année. Mais comment rendre le filtre lui aussi dynamique ? C’est-à-dire, comment obtenir un dropdown des différentes années et cela sans qu’elles se répètent. Pour l’exemple ci-dessous, je n’appelle pas l’API, mais les données sont présentes sous forme d’objet. C’est à la ligne 173 que tout commence. Pour y arriver, je retiendrai 3 fonctions fort utiles.
- La fonction « Push », qui permet d’ajouter des données à un tableau (ligne 162)
- La fonction « getFullYear » qui permet de convertir une date de type : « 2020-10-19T13:39:43 » en « 2020″ (par exemple) (ligne 156)
- et « new Set », qui n’est pas vraiment une fonction mais qui permet de structurer des données uniques, ce qui nous intéresse dans ce cas (ligne 165).
(J’aurais également pu rajouter la fonction « sort », qui permet d’ordonner les données)
Le tout donne comme résultat un tableau qui est ensuite possible de manipuler à sa guise.
Avec une boucle, je peux dès lors afficher les différentes dates dans des éléments HTML comme la balise « option« , pour ainsi créer un dropdown. Et le tour est joué !
Le filtre Ajax
Vous verrez que quand vous changerez les valeurs de la propriété « date », le dropdown changera lui aussi.
Aller plus loin
J’ai été très surpris de voir à quel point WordPress ne proposais pas un plugin gratuit qui permettrait de réaliser des fiiltres Ajax. Bien sûr, il en existe. Y compris via des addOns. Mais aucun d’entre eux ne m’a totalement convaincus pour réaliser ce que je voulais. En tous les cas chez les gratuits et ce qui ne concerne pas Woocommerce. (Dans ce cas-là, vous en trouverez une tonne…) Cela m’a donné l’idée de réaliser un petit plugin qui pourrait à la fois afficher les articles WordPress sans rechargement de page et ce via une série de filtres; eux aussi dynamiques. Je le déposerai sur Github pour permettre son évolution.
D’ici là, merci de m’avoir lu et restez curieux 😉
