Comment créer un système de tags avec filtres dans Webflow CMS ?

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.

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