Blog >Webflow
>
Ajouter des items CMS à un champ select sur Webflow
Webflow

Ajouter des items CMS à un champ select sur Webflow

L'ajout dynamique d'items CMS Webflow dans un select peut être très utile dans beaucoup de cas.
photo de profil de lucas rietsch
Lucas Rietsch
20 décembre 2022
3
min

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
ajouter une classe au champ select pour le connecter au cms
ajouter une classe au champ cms qui se placera dans le select webflow

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

attriibuts finsweet sur webflow cms dans select
webflow cms in select field with attributes

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

Besoin de (re)lancer votre marque ?
Voyez grand. Très grand.