Introduction

‍

Comment filtrer vos collections CMS sur Webflow ? Avec les Attributes de Finsweet !

‍

Et oui, il est possible de créer des systèmes de filtrage complexes pour vos collections CMS, sans une seule ligne de code. Uniquement avec Finsweet Attribute ! On vous explique comment les utiliser facilement dans cet article.

‍

‍

Étape #1 - Le script

‍

Rendez-vous sur le site de Finsweet Attributes pour venir copier le script dans le head tag de votre projet Webflow, le head tag de la page concernée !

‍

‍

⚠️ Attention : il est super important de ne pas oublier de copier ce <script> dans le head tag de votre page. Sans ça, vos filtres ne fonctionneront pas !

‍

Étape #2 - Créer vos collections

‍

Créer une collection CMS pour vos Blog posts par exemple, puis créer une deuxième pour vos filtres.

Dans la 1ère collection que vous venez de créer, vos blog posts, vous ajoutez un nouveau champ Multi référence. Vous le liez à votre collection de filtres !

‍

Étape #3 - Structure

‍

Pour créer un système de filtrage CMS, il est obligatoire que vous ajoutiez un Form block comme block parent de vos filtres et de votre ou vos collections CMS :

Le Form block contient : Collection CMS + vos filtres.

‍

Dans notre exemple nous ajoutons donc dans notre form block : nos articles de blog, puis nos filtres !

‍

‍

Vous avez la possibilité d’utiliser plusieurs éléments dans Webflow pour filtrer votre collection comme des Checkboxs, des boutons radios, etc.

‍

Chaque élément à une spécificité différente. Par exemple les boutons radios vous permettent de filtrer votre collection champ par champ, alors qu’avec les checkboxs vous avez la possibilité de sélectionner plusieurs champs (filtres) à la fois.

‍

Pour cet article nous allons utiliser des checkboxs !

‍

Étape #4

‍

Toujours sur le site de Finsweet, vous allez venir copier l’attribute : “fs-cmsfilter-element” et la value “list” dans les paramètres de votre collection list Webflow.

‍

‍

Étape #5

‍

Ajouter ensuite l’attribute à votre Form block : “fs-cmsfilter-element” et la value : “filters”

‍

C’est exactement le même fonctionnement que l’étape précédente, vous allez dans les paramètre de votre form block et vous ajouter l’attribute indiqué !

‍

⚠️ UTILISEZ UN SEUL FORMULAIRE (Form Block). Vous ne devez pas avoir plus d'un composant de bloc de formulaire pour utiliser CMS Filter.

‍

Le mieux c’est parfois de répéter pour que ça rentre, mais n’oubliez pas que toutes les cases à cocher (checkbox), les boutons radios, et votre collection CMS vont à l'intérieur du form block.

‍

Étape #6

‍

C’est grâce à cette dernière étape que vos filtres vont venir communiquer avec votre liste CMS.

‍

Vous allez donc venir copier l’attribute : “fs-cmsfilter-field” avec la valeur (value) “IDENTIFIER”.

‍

Les valeurs IDENTIFIER peuvent être ce que vous voulez, mais elles doivent être descriptives, comme "pays", "région", "Ville", etc. L’idée est de pouvoir les retrouver facilement lorsque vous en avez plusieurs.

‍

Pour cette étape vous coller cet attribute 2 fois, une fois sur l’élément Webflow qui vous sert de filtre (checkbox, bouton radio, etc.), et une deuxième sur l’élément dans votre collection CMS (blog post) que vous souhaitez justement filtrer !

‍

Pour voir le processus en détail, regarder notre vidéo youtube !

‍