Préparer les options d’un composant pour un client
Un bon composant laisse votre client modifier ses contenus sans reconstruire son design. Vous préparez le modèle en mode Expert, avec les commandes visuelles du builder. Le client personnalise ensuite chaque utilisation grâce aux propriétés proposées.
Une propriété est un champ du modèle. La créer ne suffit pas à la faire apparaître dans la page : elle doit aussi alimenter un texte, un réglage, une condition ou une liste du composant.
1. Préparer les champs utiles
Sélectionnez une instance, ouvrez Modifier le composant, puis Ajouter une propriété. Dans Propriétés, donnez un nom court au champ, choisissez son type et saisissez une description utile. Cliquez sur Créer.
Préférez des noms stables et compréhensibles, par exemple titre, duree ou atouts. Les espaces du nom deviennent des underscores ; utilisez la description pour expliquer ce que votre client doit saisir. Les cartes Alma de la démonstration emploient les noms title, description et duration.
| Besoin | Type à choisir |
|---|---|
| Un titre court | Texte : une ligne |
| Une présentation | Texte : multi-lignes ou texte enrichi |
| Une durée entière | Nombre sans décimale |
| Un montant | Nombre décimal |
| Activer ou désactiver une option | Interrupteur ou Vrai/Faux |
| Une valeur parmi plusieurs | Sélectionner |
| Plusieurs valeurs ensemble | Sélection multiple |
| Plusieurs éléments structurés | Groupe : liste d’éléments |
Préparez une valeur par défaut pertinente. Une carte insérée pour la première fois doit déjà donner un aperçu utile du résultat.
2. Préparer les choix
Lecture impossible. Réessayez avec les commandes vidéo.
Créez une propriété Sélectionner, puis ouvrez-la dans la liste des propriétés. Dans Options, cliquez sur Ajouter pour chaque choix et saisissez son libellé. La vidéo prépare Individuel et En duo.
Pour proposer plusieurs réponses, choisissez le type Sélection multiple. Ses options se préparent de la même manière. Les libellés sont destinés au client ; les identifiants des options sont gérés par le builder.
Préférez renommer un libellé plutôt que supprimer puis recréer une option déjà utilisée. Après un changement, vérifiez les valeurs par défaut et les instances existantes. L’option de couleur sert à distinguer les choix dans leur interface ; elle ne colore pas automatiquement les éléments de votre page.
3. Préparer une liste visuelle
Créez une propriété Groupe : liste d’éléments, puis ouvrez-la. Dans Champs de chaque élément, utilisez Ajouter un champ. Donnez-lui un libellé et choisissez son type : texte court, texte sur plusieurs lignes, nombre entier ou interrupteur.
Dans la démonstration, chaque avantage possède un champ Intitulé. Sous la valeur par défaut, cliquez sur Ajouter un élément, puis saisissez Accompagnement attentif.
Chaque élément possède ses champs. Les flèches changent l’ordre ; la corbeille retire l’élément. Vous n’avez pas de JSON à écrire. Pour un composant affichant plusieurs avantages, reliez ensuite cette propriété à sa boucle visuelle, puis les champs de l’élément courant aux textes de la carte.
La clé affichée sous le libellé reste stable après un renommage. Cela permet de conserver les valeurs et leurs liaisons. Évitez de supprimer un champ utilisé par le design sans préparer son remplacement.
4. Relier les propriétés au résultat
Dans l’édition du modèle, sélectionnez le texte ou le réglage à personnaliser. Ouvrez le sélecteur de données de ce champ et choisissez la propriété du composant. Enregistrez, puis testez une instance.
Pour une liste, sélectionnez le groupe à répéter et configurez sa boucle sur la propriété de liste. Dans cette boucle, les textes doivent utiliser les champs de l’élément courant. Une liste préparée dans le panneau ne répète pas automatiquement une section.
Pour une condition d’affichage, sélectionnez l’élément concerné et ajoutez Condition dans les réglages. Choisissez la propriété qui doit commander l’affichage avec le sélecteur de données. Testez les deux situations : valeur activée et valeur désactivée. Utilisez une propriété booléenne quand le besoin est simplement de montrer ou masquer une partie.
La création des liaisons et des conditions est détaillée dans les articles consacrés aux données et à l’affichage conditionnel. Les vidéos de cette page se concentrent sur la préparation des champs et leur utilisation sur les instances.
5. Autoriser la traduction
Pour les types qui proposent Localisable, activez Autoriser la traduction sur les contenus qui doivent varier selon la langue, par exemple le titre et la présentation. Les réglages propres au type apparaissent après la création de la propriété.
Ce réglage autorise la traduction ; il ne traduit pas le contenu à votre place. Enregistrez, rouvrez la propriété et vérifiez que le réglage est conservé. Contrôlez ensuite les langues réellement utilisées par votre site et les textes plus longs sur téléphone.
6. Vérifier le parcours de votre client
Quittez le modèle et sélectionnez une instance. Modifiez son titre, sa durée, un choix et sa liste. Vérifiez que la seconde instance conserve ses valeurs. Réinitialisez un champ pour retrouver le défaut du modèle ou de la variante.
Passez en Facile pour vérifier ce que votre client peut réellement sélectionner et modifier. Ne livrez pas seulement un modèle qui fonctionne en Expert : vérifiez aussi la sélection, les commandes disponibles et le résultat dans le mode prévu pour le client.
Enregistrez, rechargez et contrôlez le site en préproduction, sur ordinateur et téléphone. Pour une condition, une liste ou une liaison au CMS, testez aussi une valeur vide et une valeur renseignée.