Comment ajouter une recherche en temps réel dans Webflow ?
Apprenez à ajouter une recherche en temps réel dans Webflow CMS avec Finsweet CMS Search : configuration et attributs.
Dans ce tutoriel, Sandro cofondateur de l'agence Webflow Gemeos vous montre comment ajouter une recherche en temps réel dans Webflow grâce à Finsweet CMS Search.
| Attribut | Élément | Valeur |
|---|---|---|
| fs-cmssearch-element | Input de recherche | input |
| fs-cmssearch-element | Collection List Wrapper | list |
| fs-cmssearch-field | Collection List Item | Champ(s) CMS à indexer |
| fs-cmssearch-element | Message 'Aucun résultat' | empty |
1. Ajoutez le script Finsweet CMS Search
Dans Page Settings > Head, ajoutez :
<script src="https://cdn.jsdelivr.net/npm/@finsweet/attributes-cmssearch@1/cmssearch.js" defer>script>2. Configurez les éléments dans Webflow
Ajoutez un Input Text avec l'attribut fs-cmssearch-element="input". Sur votre Collection List Wrapper, ajoutez fs-cmssearch-element="list". Sur chaque champ CMS que vous voulez indexer (titre, description, tags), ajoutez fs-cmssearch-field="[nom-du-champ]".
3. Ajoutez un message "Aucun résultat"
Créez un Div avec le texte "Aucun résultat" et l'attribut fs-cmssearch-element="empty". Mettez-le en display: none par défaut : Finsweet l'affichera automatiquement quand la recherche ne retourne rien.
4. Combinez avec CMS Filter
CMS Search est compatible avec CMS Filter : les deux peuvent fonctionner simultanément sur la même collection. Les filtres affinent la catégorie, la recherche texte affine les résultats au sein de cette catégorie.
Conclusion
La recherche en temps réel améliore considérablement l'UX sur les catalogues volumineux. Cas d'usage :
- Répertoire de ressources ou d'articles
- Catalogue de produits ou de services
- FAQ avec nombreuses entrées
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.
