Le filtrage des produits est une fonctionnalité essentielle pour toute boutique en ligne. Si vous gérez un site e-commerce sur Webflow, vous pouvez créer un système de filtre dynamique, semblable à celui d'Airbnb, sans utiliser de code personnalisé. Dans cet article, nous allons vous montrer comment utiliser la bibliothèque JavaScript Finsweet Attributes pour mettre en place un système de filtre efficace et dynamique.
Étape 1 : Préparer Votre Projet Webflow
Avant de commencer, assurez-vous d'avoir déjà créé une collection de produits ou d'éléments que vous souhaitez filtrer. Dans notre exemple, nous travaillons avec une collection de logements Airbnb.
- Créer la Collection :
- Allez dans le CMS de Webflow et ajoutez une collection avec les informations pertinentes (nom, image, type, prix, etc.).
- Ajoutez plusieurs éléments pour tester le système de filtre.
Étape 2 : Installer la Bibliothèque Finsweet Attributes
Pour permettre à Webflow de gérer les filtres dynamiques, vous allez utiliser la bibliothèque Finsweet Attributes.
- Accéder à Finsweet Attributes :
- Recherchez Finsweet Attributes sur Google et accédez à leur documentation.
- Sélectionnez l’option CMS Filter pour accéder aux fonctionnalités de filtrage.
- Ajouter le Script :
- Copiez le script fourni dans la documentation.
- Collez-le dans la section
<head>des paramètres de votre page Webflow.
Étape 3 : Créer la Section de Filtre
- Ajouter une Section de Filtre :
- Créez une nouvelle
divsur votre page, au-dessus de votre liste de collection, et nommez-lasection-filter.
- Créez une nouvelle
- Ajouter un Formulaire :
- Le système de filtre utilise un formulaire pour gérer les interactions. Ajoutez un formulaire (
form) dans la section créée, et donnez-lui une classe (filter-form). - Supprimez les éléments par défaut du formulaire.
- Le système de filtre utilise un formulaire pour gérer les interactions. Ajoutez un formulaire (
- Ajouter des Catégories Dynamiques :
- Créez une nouvelle collection pour vos catégories, par exemple
Airbnb Categories, avec des champs comme le nom et l’icône de la catégorie. - Ajoutez quelques catégories (par exemple : Camping, Château, Luxe).
- Créez une nouvelle collection pour vos catégories, par exemple
- Ajouter une Liste de Collection dans le Formulaire :
- Insérez une liste de collection (
collection list) dans votre formulaire, et reliez-la à la collection des catégories. - Chaque élément de la liste représentera une catégorie.
- Insérez une liste de collection (
Étape 4 : Ajouter des Boutons Radio
- Ajouter un Radio Button :
- Dans chaque élément de la liste, ajoutez un
radio buttonpour permettre à l'utilisateur de sélectionner une catégorie à filtrer. - Assurez-vous que tous les
radio buttonsont le même nom de groupe pour que la sélection soit exclusive.
- Dans chaque élément de la liste, ajoutez un
- Personnaliser le Radio Button :
- Ajoutez une icône pour chaque catégorie, ainsi qu'un label contenant le nom de la catégorie.
- Utilisez des classes pour styliser ces éléments de manière cohérente avec le reste de votre design.
Étape 5 : Configurer les Attributes Finsweet
- Attribuer les Attributs à la Liste :
- Sélectionnez la liste de collection contenant les produits et ajoutez l’attribut
data-filter="list".
- Sélectionnez la liste de collection contenant les produits et ajoutez l’attribut
- Configurer le Formulaire de Filtre :
- Sélectionnez le formulaire et ajoutez l’attribut
data-filter="filters".
- Sélectionnez le formulaire et ajoutez l’attribut
- Relier les Catégories :
- Dans chaque catégorie, ajoutez un attribut personnalisé
data-filter-category="nom_de_la_catégorie", en utilisant le nom exact de la catégorie pour garantir la correspondance.
- Dans chaque catégorie, ajoutez un attribut personnalisé
Étape 6 : Tester et Finaliser
- Vérifier la Fonctionnalité :
- Publiez votre projet et testez le système de filtre en cliquant sur différentes catégories pour voir si la liste se met à jour correctement.
- Personnalisation Avancée :
- Explorez les autres options de Finsweet Attributes pour des fonctionnalités supplémentaires comme la barre de recherche, les filtres multiples, etc.
Avec ce système de filtre dynamique, vous pouvez offrir une meilleure expérience utilisateur en permettant aux visiteurs de trouver rapidement ce qu'ils cherchent. La bibliothèque Finsweet Attributes simplifie grandement ce processus, sans nécessiter de connaissances avancées en programmation.
.webp)
