Comment trier dynamiquement une collection CMS Webflow ?
Apprenez à ajouter un tri dynamique sur vos collections CMS Webflow avec Finsweet CMS Sort : attributs et boutons de tri.
Dans ce tutoriel, Sandro cofondateur de l'agence Webflow Gemeos vous montre comment permettre aux utilisateurs de trier dynamiquement une collection CMS Webflow.
| Option de tri | Attribut fs-cmssort | Type de champ CMS |
|---|---|---|
| Alphabétique A-Z | name:asc | Texte |
| Alphabétique Z-A | name:desc | Texte |
| Prix croissant | price:asc | Nombre |
| Prix décroissant | price:desc | Nombre |
| Plus récent | date:desc | Date |
1. Ajoutez le script Finsweet CMS Sort
<script src="https://cdn.jsdelivr.net/npm/@finsweet/attributes-cmssort@1/cmssort.js" defer>script>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
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.
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.
