.svg)
.svg)
Plusieurs use cases peuvent conduire à un besoin de placer et de mettre à jour dynamiquement les options d'un champ Select en se basant sur un attribut d'une collection CMS. Nous verrons dans cet article comment mettre en place cette fonctionnalité sur notre site Webflow.
Ce tutoriel vous accompagnera dans la mise en place d'un champ select dynamique basé sur une collection CMS. Chez Elias, nous avons besoin de proposer à l'utilisateur de sélectionner un un job parmi la liste des jobs présents dans notre collection CMS. Nous allons donc mettre en place ensemble un formulaire qui contiendra un champ Select, qui lui-même ira piocher ses valeurs (<option>) dans notre base de données.
Mise en place du Select connecté au CMS
Plusieurs méthodes, aussi simples les unes que les autres, existent pour mettre cette fonctionnalité en place. Merci Webflow ;)
Un peu de JS ?
La première méthode est d'ajouter du Custom Code avant la balise <Body/> de notre page.
Il nous faudra dans un premier temps ajouter deux classes aux éléments suivants :
- Champ Select de notre formulaire
- Texte connecté au champ CMS auquel nous voulons faire référence
Une fois les classes ajoutées, voici le peu de custom code qu'il vous faudra ajouter pour que la magie opère. Rendez-vous dans les paramètres de votre page Webflow et copiez-y le code suivant :
<script>
$('.select-text').each(function(){
var s = $(this).text();
$('.select-item').append('<option value="'+s+'">'+s+'</option>');
})
</script>
Ce code vous permettra de trouver sur votre page votre élément select et de le remplir avec tous les éléments CMS dont le nom contient la classe '.select-item'.
La méthode Finsweet
Vous vous doutez bien qu'une fonctionnalité si pratique, si utilisée par la communauté Webflow, et si rapide à mettre en oeuvre aura forcément intéressé nos amis chez Finsweet.
Ces derniers ont donc mis en place un tutoriel en 3 étapes, tout aussi simple que la méthode custom code javascript.
Ajouter le script Finsweet pour targeter les items CMS et les ajouter à un champ select
<!-- [Attributes by Finsweet] CMS Select -->
<script async src="https://cdn.jsdelivr.net/npm/@finsweet/attributes-cmsselect@1/cmsselect.js"></script>
Utiliser les attributs HTML des éléments Select et Text
Il ne vous restera plus qu'à publier votre site, et le tour est joué !
En résumé
Il ne vous aura fallu que quelques minutes pour mettre en place une fonctionnalité bien pratique sur votre site Webflow. Vous pourrez désormais utiliser n'importe quel champ de n'importe laquelle de vos collections CMS pour remplir un champ Select dans vos formulaires.
Pour plus de Tips et Tutoriels Webflow, n'hésitez pas à aller visiter notre blog ou à nous poser votre question directement sur elias.studio/contact
.jpeg)
.jpeg)
.jpeg)
.jpeg)
.jpeg)
.jpeg)
