Comment afficher des items CMS aléatoires dans Webflow ?

Dans ce tutoriel, Sandro cofondateur de l'agence Webflow Gemeos vous montre comment afficher des items CMS de façon aléatoire dans Webflow.

Méthode 1 : JavaScript shuffle au chargement

Cette méthode mélange les items déjà affichés dans le DOM à chaque chargement de page. Ajoutez une classe cms-list à votre Collection List Wrapper, puis ce script dans le body :

function shuffleList(list) {
  var items = Array.from(list.children);
  items.sort(function() { return Math.random() - 0.5; });
  items.forEach(function(item) { list.appendChild(item); });
}
document.addEventListener('DOMContentLoaded', function() {
  var list = document.querySelector('.cms-list .w-dyn-items');
  if (list) shuffleList(list);
});

Méthode 2 : Champ ordre aléatoire dans le CMS

Ajoutez un champ Nombre "Ordre" dans votre collection. Renseignez des valeurs aléatoires (1 à 1000). Triez votre Collection List par ce champ de façon croissante. L'ordre sera "aléatoire" mais fixe jusqu'à la prochaine republication. Simple et sans code.

3. Limitez le nombre d'items affichés

Pour afficher uniquement 3 items aléatoires parmi 50, réglez la limite de la Collection List à 3 dans Webflow. Le shuffle JavaScript mélangera les items avant que Webflow n'applique la limite : vous verrez toujours 3 items différents à chaque rechargement.

Conclusion

L'affichage aléatoire améliore la découverte de contenu. Cas d'usage :

• Section "Articles suggérés" en bas d'un article de blog
• Témoignages clients affichés de façon variée
• Mise en avant de produits différents à chaque visite