Dans ce tutoriel Webflow, je vous guide pas à pas pour installer les attributs de Finsweet et ainsi, filtrer vos collections Webflow en toute simplicité. Vous pouvez retrouver l'ensemble des informations sur le site Attributes.
Créez Votre Collection CMS
Cela pourrait sembler évident, mais sans collection, rien à filtrer ! Assurez-vous donc d'avoir une collection prête sur votre site.
Ajoutez un Élément Form :
L'attribut Filter CMS de Finsweet fonctionne à partir d'un élément form. Il est donc indispensable de le configurer. Notez bien, vous ne pouvez avoir qu'un seul élément form sur votre page.
Nettoyez et Stylez votre Élément Form :
- Suppression : Débarrassez-vous des éléments inutiles, comme le bouton submit.
- Ajout d'Inputs : Ajoutez les inputs de votre choix. Dans cet exemple, j'ai opté pour des checkboxes, mais sachez que tous les inputs de Webflow sont compatibles.
- Stylisation : Stylez votre formulaire pour qu'il se marie harmonieusement avec le design existant de votre site. Et n'oubliez pas de vérifier le rendu en version responsive !
Connectez les Attributs Finsweet :
La mise en place est un jeu d'enfant et se déroule en quatre étapes simples :
a. Ajoutez le Code Custom pour le Form Field.
Pour cette première étape, vous devez selectionner votre element form et lui ajouter l'attribut suivant : fs-cmsfilter-element="filters"
b. Ajoutez l'Attribut pour la Collection List.
Rien de plus simple, sélectionnez la collection list que vous souhaitez filtrer et appliquez lui l'Attribut personnalisé suivant : fs-cmsfilter-element="list"
c. Ajoutez les Identifiants.
Cette étape est en deux parties mais reste extrêmement simple.
Dans un premier temps, vous allez selectionner dons votre formulaire les champs que vous avez mis en place. Dans notre exemple, nous sommes sur des checkbox. Il est important de sélectionner l'élement texte.
Et vous allez simplement lui appliquer l'Attribut suivant : fs-cmsfilter-field='IDENTIFIER"
Ensuite vous allez dans votre collection et vous recherchez l'élement qui va permettre de filtrer. Dans notre cas, il s'agit de l'étiquette contenant la catégorie.
Et vous allez lui ajouter le même attribut : fs-cmsfilter-field='IDENTIFIER"
Petit conseil : Je vous invite à mettre un identifier qui vous parle comme category, price, country, ....
d. Ajoutez le Custom Script.
Ici rien de plus simple. Vous allez vous rendre dans les paramètre de votre page et copier le script mis à disposition par finsweet. Pensez simplement à le coller dans la balise <head>.
<!-- [Attributes by Finsweet] CMS Filter -->
<script async src="https://cdn.jsdelivr.net/npm/@finsweet/attributes-cmsfilter@1/cmsfilter.js"></script>
Et voilà, le tour est joué ! Vous pouvez désormais filtrer votre collection à souhait. Avec un peu de pratique, vous serez en mesure de créer des filtres très élaborés.
Explorez les Options Finsweet :
Finsweet offre une multitude d'options très utiles. Voici celles que je trouve particulièrement pratiques :
- Clear : Pour réinitialiser les filtres.
- Empty : Gestion des éléments vides.
- Item Count : Comptage des éléments.
- Result Count : Comptage des résultats.
- Anchor Scroll : Navigation ancrée.
- Active Class : Gestion des classes actives.
N'hésitez pas à vous plonger dans les options proposées par Finsweet et à les tester selon vos besoins. Ce guide est votre tremplin vers une gestion de collections Webflow plus efficace et intuitive. Happy filtering !
.png){kind=icon}
.png){kind=icon}
