Comment imbriquer des collections CMS Webflow avec Finsweet CMS Nest ?

Dans ce tutoriel, Sandro cofondateur de l'agence Webflow Gemeos vous montre comment utiliser Finsweet CMS Nest pour combiner plusieurs collections CMS Webflow en une seule liste unifiée.

Comprendre le cas d'usage de CMS Nest

Webflow limite les références imbriquées à un seul niveau : vous pouvez accéder aux champs d'une collection liée, mais pas aux champs d'une collection liée à cette collection liée. CMS Nest permet de contourner cette limite en imbriquant des Collection Lists les unes dans les autres, alimentées par des champs Reference ou Multi-Reference.

1. Ajoutez le script dans le head

<script src="https://cdn.jsdelivr.net/npm/@finsweet/attributes-cmsnest@1/cmsnest.js" defer>script>

2. Configurez la Collection List parent

Sur votre Collection List Wrapper parent (ex: Articles), ajoutez fs-cmsnest-element="list". Cette collection doit contenir un champ Reference ou Multi-Reference vers la collection enfant.

3. Ajoutez la Collection List enfant dans le template

Dans le template de votre Collection List parent, ajoutez une nouvelle Collection List liée à la collection enfant. Sur son Wrapper, ajoutez fs-cmsnest-element="list" et fs-cmsnest-collection="[nom-collection-enfant]". Finsweet synchronise automatiquement chaque item enfant avec son parent via le champ Reference.

4. Accédez aux champs de la collection enfant

Dans le template de la Collection List enfant, connectez vos éléments aux champs de la collection enfant normalement. Finsweet injecte les données correspondantes à chaque item parent.

Conclusion

CMS Nest débloque des architectures CMS complexes sans passer par l'API. Cas d'usage :

• Afficher les articles d'une catégorie dans une liste de catégories
• Lister les membres d'une équipe dans une liste de départements
• Afficher les produits d'une marque dans un catalogue de marques