Comment créer un système de tags avec filtres dans Webflow CMS ?
Apprenez à créer un système de tags avec filtres dans Webflow CMS avec Finsweet CMS Filter : champ Option, Multi-Reference et tags dynamiques.
Dans ce tutoriel, Sandro cofondateur de l'agence Webflow Gemeos vous montre comment créer un système de tags avec filtres dans Webflow CMS.
| Attribut Finsweet | Élément | Valeur |
|---|---|---|
| fs-cmsfilter-element | Collection List Wrapper | list |
| fs-cmsfilter-element | Form Block (zone de filtres) | filters |
| fs-cmsfilter-field | Tag/Checkbox/Radio dans le form | Nom du champ CMS à filtrer |
| fs-cmsfilter-element | Compteur de résultats | results-count |
1. Créez le champ Tags dans votre CMS
Dans votre collection, ajoutez un champ de type Option (pour un seul tag) ou créez une collection "Tags" séparée avec un champ Multi-Reference (pour plusieurs tags par item). La Multi-Reference est plus flexible mais nécessite une collection supplémentaire.
2. Ajoutez le script Finsweet CMS Filter
<script src="https://cdn.jsdelivr.net/npm/@finsweet/attributes-cmsfilter@1/cmsfilter.js" defer>script>3. Créez les boutons de tags dans un Form Block
Ajoutez un Form Block avec l'attribut fs-cmsfilter-element="filters". À l'intérieur, créez des checkboxes ou des radio buttons pour chaque tag. Sur chaque checkbox, ajoutez fs-cmsfilter-field="[nom-du-champ-cms]" et renseignez la valeur du champ comme valeur de la checkbox.
4. Affichez les tags depuis le CMS (dynamique)
Pour générer les boutons de tags automatiquement depuis le CMS, ajoutez une Collection List de votre collection Tags dans votre Form Block. Chaque item de cette liste devient un bouton de filtre avec la valeur du tag correspondant. Les nouveaux tags ajoutés au CMS apparaissent automatiquement.
Conclusion
Un système de tags améliore la navigation et la découverte de contenu. Cas d'usage :
- Blog avec filtres par thématique
- Catalogue produit avec filtres par caractéristiques
- Répertoire de ressources filtrables par type et niveau
bon à savoir
Heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
.avif)
Lorem ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
