Drupal - Création d'une vue avec filtres exposés / scroll infini

1. Création de la vue des contenus

Lors de la création d’une vue, il faut réfléchir au préalable au type d’entité qui sera affiché et aux différents filtres que l’on souhaite afficher. Une fois déterminé, on peut se lancer dans la création de la vue depuis “Structure” ⇒ “Vues”, ici on prendra un exemple simple avec un type de contenu “Article” que l’on souhaite filtrer sur un champ “tag”.

On choisit également l’affichage “Accroche” pour notre type de contenu, qui consiste en un mode d'affichage teaser de notre contenu.

2. Mise en place des filtres exposés

Une fois notre vue créée, on va ensuite créer les filtres qui seront exposés à l’utilisateur. Pour se faire, on ajoute un “critères de filtre” que l’on configure avec l’option “Exposer ce filtre aux visiteurs …”. Dans notre exemple nous allons exposer le filtre sur le champ “Tags” de nos articles.

On peut ensuite aller tester notre filtre exposé en accédant à notre vue, on peut observer que le filtre fonctionne avec un paramètre en get, qui prend le nom défini dans le critère de filtre. Par défaut le format est [nom_du_champ]_target_id lorsque l’on cible une entité (ici un terme de taxonomie), on a donc l’url suivante lorsque l’on filtre : /blog?field_tags_target_id=2.

Pour rendre notre vue plus dynamique et agréable nous allons utiliser le module Drupal Better Exposed Filters et utiliser AJAX pour la mise à jour des résultats de notre vue.

Installation du module Drupal :

composer require drupal/better_exposed_filters
vendor/bin/drush en better_exposed_filters -y

On active ensuite l’utilisation de l’AJAX sur notre vue.

Au changement de filtre, on peut observer un loader attendant la réponse AJAX pour remplacer les résultats.

Dans la console, on peut observer l’appel AJAX, l’AJAX Command remplace la div de la vue via l’id généré par Drupal, il est donc important si jamais on souhaite créer une template custom de laisser cet id généré, autrement les résultats ne seront jamais mis à jour.

On a désormais une vue dynamique permettant de filtrer par tag nos articles, avec mise à jour automatique des contenus au changement de filtres, sans rechargement de la page.

3. Ajout du scroll infini

L’ajout du scroll infini permet également une meilleure expérience utilisateur lors de l’utilisation de notre vue et de ses différents filtres. Pour se faire nous allons utiliser le module Drupal Infinite Scroll.

Installation du module Drupal :

composer require drupal/views_infinite_scroll
vendor/bin/drush en views_infinite_scroll -y

Dans la section pagination, il nous suffit de sélectionner et configurer le scroll infini pour un chargement automatique des contenus au scroll de l’utilisateur.

De la même manière que pour la mise à jour des contenus au changement de filtres, on peut observer l’AJAX Command d’Infinite Scroll, conditionné par la présence de l’attribut “data-drupal-views-infinite-scroll-content-wrapper” sur notre vue.

Notre vue est maintenant dynamique, permettant de filtrer par tag nos articles, la mise à jour automatique des contenus au changement de filtres et chargement des pages suivantes au scroll de l’utilisateur sans rechargement de la page.