Système de gestion de contenu (CMS) : Ajouter et configurer une barre de défilement de gamme
5 min
Permettez aux visiteurs de filtrer les éléments qui apparaissent sur votre site en faisant glisser des curseurs pour sélectionner une plage de valeurs. Par exemple, si vous gérez une boutique en ligne, vous pouvez utiliser une barre de défilement pour permettre aux clients de filtrer les articles par prix, ce qui leur permet de trouver plus facilement des éléments dans leur budget.
Après avoir ajouté une barre de défilement à la plage, connectez-la à un ensemble de données qui se connecte au répéteur ou à la galerie que vous souhaitez que les visiteurs filtrent. Sélectionnez ensuite un type de champ numérique à utiliser pour le filtre et la condition. La condition détermine s'il faut afficher les éléments dont les valeurs de champ sont compris entre la plage sélectionnée ou en dehors de la plage. Enfin, personnalisez le titre du champ et la mise en page et le design de l'élément du curseur.
Tous les filtres ou tris que vous appliquez à l'ensemble de données s'applique également aux éléments connectés. Cela signifie que vous pouvez ajouter des filtres à l'ensemble de données pour exclure des éléments de l'apparition et ajouter des tris pour contrôler leur ordre.
Important :
Le curseur de plage n'est pas disponible dans l'éditeur Studio.
Avant de commencer :
- Assurez-vous d'ajouter le CMS à votre site si vous ne l'avez pas déjà fait.
- Assurez-vous que vous avez une collection avec les autorisations nécessaires pour stocker les envois à partir de l'élément de saisie Curseur.
Pour ajouter et configurer un curseur de gamme :
- Accédez à votre Éditeur.
- Ajoutez l'élément de saisie curseur de plage :
- Accédez à la page ou à la section où vous souhaitez que les visiteurs filtrent le contenu en fonction d'une valeur numérique.
- Cliquez sur Ajouter des éléments
à gauche de l'éditeur. - Cliquez sur Saisie.
- Cliquez sur Curseur .
- Faites défiler jusqu'à Curseurs de plages, puis cliquez et faites glisser le curseur de plage de votre choix sur la page.
- Connectez le curseur de plage au système de gestion de contenu (CMS) :
- Cliquez sur l'icône Connecter au CMS
sur le curseur de plage. - Sélectionnez Filtrer le contenu dans le panneau Connecter le curseur de plage à la droite.
- Cliquez sur le menu déroulant Choisir un ensemble de données et sélectionnez le même ensemble de données qui se connecte aux éléments (ex. répéteur, galerie, tableau) pour lequel vous souhaitez que les visiteurs filtrent.
- Cliquez sur le menu déroulant Filtrer le contenu par et sélectionnez le champ de nombre que les visiteurs utiliseront pour filtrer le contenu.
Suggestion : Pour ajouter un nouveau champ à votre collection et l'utiliser pour filtrer le contenu, sélectionnez Ajouter un nouveau champ, puis saisissez le nom du champ et cliquez sur Ajouter. Vous pouvez ajouter du contenu au champ dans votre collection du système de gestion de contenu (CMS) plus tard. - Cliquez sur le menu déroulant Condition et sélectionnez la condition correspondante :
- Entre : Affichez les éléments qui ont une valeur de champ de nombre connectée qui se trouve entre les poignées du curseur de plage.
- En dehors de : Affichez les éléments dont la valeur de champ de nombre est connectée et qui est en dehors des poignées du curseur de plage.
- Cliquez sur l'icône Connecter au CMS
- Personnalisez l'élément saisie curseur de plage :
- Cliquez sur Paramètres pour personnaliser les éléments suivants :
- Titre du champ : Modifiez le nom qui s'affiche sur le curseur de plage et permet aux visiteurs de savoir ce qu'il fait.
- Type de curseur : Choisissez un type de curseur en continu ou par étape :
- En continu : Les visiteurs peuvent sélectionner n'importe quelle valeur dans la plage définie.
- Par étape : Les visiteurs peuvent sélectionner des valeurs spécifiques et incrémentées dans la plage définie. Configurez les options suivantes :
- Définir les étapes par : Cliquez sur le menu déroulant et sélectionnez la manière dont vous souhaitez définir les étapes :
- Nombre d'étapes : Vous choisissez le nombre d'étapes qui apparaissent dans le curseur de la plage. Saisissez le nombre d'étapes dans le champ Étapes.
- Valeur de l'étape : Vous choisissez les incréments de valeur de chaque étape, jusqu'à 100. Saisissez la valeur des incréments dans le champ Valeur.
- Libellés de la valeur : (Facultatif) Saisissez un préfixe dans le champ Préfixe pour le faire apparaître avant la valeur (ex. €). Vous pouvez également saisir un suffixe dans le champ Suffixe pour qu'il apparaisse après la valeur.
- Définir les étapes par : Cliquez sur le menu déroulant et sélectionnez la manière dont vous souhaitez définir les étapes :
- Cliquez sur l'icône Mise en page
pour ajuster les éléments suivants :
- La taille et la forme des poignées de votre curseur de plage.
- La hauteur (épaisseur) de la barre sur laquelle les poignées défilent.
- Choisissez une direction d'affichage de gauche à droite ou de droite à gauche.
- Ajustez l'alignement, le décalage et l'espacement autour du titre du champ.
- (Étapes uniquement) Choisissez une mise en page : Lignes ou Points.
- Cliquez sur l'icône Design
pour sélectionner un design prédéfini et le personnaliser davantage.
- Cliquez sur Paramètres pour personnaliser les éléments suivants :
- Cliquez sur Aperçu pour tester votre curseur de plage.
- Cliquez sur Publier si vous êtes prêt à mettre en ligne les modifications.