Comment trier dynamiquement une collection CMS Webflow ?

Dans ce tutoriel, Sandro cofondateur de l'agence Webflow Gemeos vous montre comment permettre aux utilisateurs de trier dynamiquement une collection CMS Webflow.

1. Ajoutez le script Finsweet CMS Sort

2. Configurez votre Collection List

Sur votre Collection List Wrapper, ajoutez l'attribut fs-cmssort-element="list". Sur chaque champ CMS à utiliser comme critère de tri, ajoutez fs-cmssort-field="[nom-du-champ]" dans l'élément correspondant.

3. Créez les boutons de tri

Créez des boutons ou liens pour chaque option de tri. Ajoutez sur chacun l'attribut fs-cmssort-field="[nom-du-champ]:[asc/desc]". Exemple : fs-cmssort-field="name:asc" pour trier par nom A-Z.

4. Stylez l'état actif

Finsweet ajoute automatiquement la classe fs-cmssort-active sur le bouton de tri actif. Ciblez cette classe dans vos styles Webflow pour indiquer visuellement l'option sélectionnée.

Conclusion

Le tri dynamique améliore l'expérience sur les catalogues et listings. Cas d'usage :

• Catalogue de produits triables par prix
• Répertoire d'articles triables par date
• Liste de membres triables alphabétiquement