Listes de collection

Une liste de collection répète son premier enfant une fois pour chaque élément d’une source. Concevez une carte ; la liste fait le reste, avec item et index disponibles dans chaque liaison à l’intérieur.

Configurer une liste

1. Insérez-la

   Choisissez Collection list dans le groupe CMS du menu d’insertion. Elle démarre sur votre première collection du CMS ou, si le site n’en a aucune, sur la première requête de la page. Le menu ne la propose qu’une fois que le site a une collection du CMS ou une requête. Stylisez la liste comme n’importe quel cadre ; une grille convient bien aux cartes.

2. Choisissez une source

   CMS query liste les éléments d’une collection avec des filtres, des tris et une limite (jusqu’à 100). Expression répète n’importe quel tableau, comme queries.products.data ou vars.cart.

3. Liez le modèle

   Liez les textes, les images et les liens du premier enfant à item.*. Utilisez index pour la numérotation et parent.item dans les listes imbriquées.

4. Gérez les résultats vides

   Définissez le texte d’état vide affiché quand il n’y a aucun élément.

"n_list": {
  "type": "collectionList",
  "children": ["n_card"],
  "props": {
    "query": {
      "collectionId": "col_posts",
      "filter": [{ "field": "featured", "op": "eq", "value": true }],
      "sort": [{ "field": "publishedAt", "dir": "desc" }],
      "limit": 6
    }
  }
}

Lier chaque élément à sa page

Pour que chaque carte ouvre sa propre page, la collection a besoin d’une page modèle, comme /blog/:slug.

1. Faire de la carte un lien

   Sélectionnez les éléments à l’intérieur du premier enfant, faites un clic droit et choisissez Wrap in link. Ou insérez un Link block dans le premier enfant et déplacez le contenu dedans. Le premier enfant lui-même ne peut pas être enveloppé.

2. Lier l’URL

   Sélectionnez le lien. Dans la section Link, cliquez sur dans la ligne Bound URL et choisissez la page modèle sous Item page. Les champs de référence ajoutent leurs propres pages, comme Author page.

Ce choix écrit une expression ordinaire construite à partir du chemin de la page : /blog/:slug devient `/blog/${item.slug}`. Modifiez-la à la main si besoin. Un bouton dans l’élément peut être lié de la même façon.

Filtres et tris

Les filtres du CMS comparent un champ à une valeur avec eq, neq, gt, gte, lt, lte, contains, in et exists. Les valeurs peuvent être liées, par exemple à une variable de catégorie, pour que la liste se mette à jour quand les visiteurs filtrent.

Animer les éléments

Ciblez la carte dans une interaction et chaque élément répété s’anime. Ajoutez un décalage (stagger) pour un effet de cascade.