Dans cet article, nous allons voir comment combiner deux listes de collections dans Webflow, une fonctionnalité qui n'est pas disponible nativement. Grâce à Finsweet Attributes, vous pouvez facilement combiner ces listes sans écrire une seule ligne de code. Cela peut être utile pour des projets où vous devez mixer différents contenus, comme des produits ou des articles de blog, et les afficher ensemble sur une même page.

Pourquoi combiner deux listes de collections ?

Webflow ne permet pas directement de combiner plusieurs listes de collections. Cependant, cela peut s’avérer indispensable dans de nombreux cas, notamment lorsque vous souhaitez créer un système de filtres avancé, afficher des articles de plusieurs catégories ou regrouper des produits dans un seul bloc de contenu. Heureusement, Finsweet Attributes propose une solution simple et gratuite.

Étapes pour combiner deux listes de collections avec Finsweet Attributes

Voici les étapes à suivre pour fusionner deux listes de collections dans Webflow grâce à Finsweet CMS Combine.

1. Intégrer le script CMS Combine

La première étape consiste à intégrer le script fourni par Finsweet dans le head de votre page Webflow.

• Rendez-vous sur le site Finsweet Attributes et recherchez la fonctionnalité CMS Combine.
• Copiez le script disponible sur la page.

<script src="https://cdn.jsdelivr.net/gh/finsweet/attributes-cmscombine@1/cms-combine.js"></script>


• Dans Webflow, ouvrez les paramètres de la page sur laquelle vous voulez combiner vos listes.
• Collez ce script dans la section Head de la page.
• Cliquez sur Save pour sauvegarder les modifications.

2. Ajouter les attributs aux listes de collections

Après avoir intégré le script, vous devez ajouter des attributs HTML à vos deux listes de collections pour que Finsweet puisse les combiner.

• Sélectionnez la première liste de collections.
• Dans les paramètres, ajoutez l’attribut suivant dans Custom Attributes :
  • Nom : fs-cmscombine
  • Valeur : list
• Répétez la même opération pour la deuxième liste de collections.

3. Publier votre site

Une fois que vous avez appliqué les attributs aux deux listes de collections, il ne vous reste plus qu'à publier votre site.

• Cliquez sur Publish.
• Allez sur la page publiée pour vérifier si les deux listes se combinent bien en une seule.

Utilisations possibles

Voici quelques exemples d’usages où combiner des listes de collections dans Webflow peut être utile :

• Combiner des produits de différentes catégories dans un même catalogue.
• Fusionner plusieurs listes d’articles de blog pour créer une page de recommandations variées.
• Créer des systèmes de filtres avancés en combinant plusieurs types de contenus à filtrer ensemble.

Bonus : Ajout d'un filtre à votre liste combinée

Une fois que vous avez combiné vos listes, vous pouvez aller plus loin en intégrant un système de filtre avec Finsweet CMS Filter. Cette fonctionnalité vous permet de filtrer les éléments de votre liste combinée selon différents critères, améliorant ainsi l’expérience utilisateur.

‍

En combinant deux listes de collections dans Webflow grâce à Finsweet Attributes, vous pouvez personnaliser vos pages de manière beaucoup plus flexible. Cette technique est particulièrement utile pour les boutiques en ligne, les blogs, ou tout projet où vous devez regrouper plusieurs catégories de contenu. Grâce à ces outils, vous pouvez gérer vos contenus plus efficacement sans avoir besoin de coder.