Listas de colección

Una lista de colección repite su primer hijo una vez por cada ítem de una fuente. Diseña una tarjeta; la lista hace el resto, con item e index en el ámbito de cada enlace de datos que haya adentro.

Configurar una lista

1. Insértala

   Elige Collection list en el grupo CMS del menú de inserción. Empieza con tu primera colección del CMS o, si el sitio no tiene ninguna, con la primera consulta de la página. El menú solo la ofrece cuando el sitio ya tiene una colección del CMS o una consulta. Dale estilo a la lista como a cualquier frame; un grid funciona bien para tarjetas.

2. Elige una fuente

   CMS query lista los ítems de una colección con filtros, ordenamientos y un límite (hasta 100). Expression repite cualquier arreglo, como queries.products.data o vars.cart.

3. Enlaza la plantilla

   Enlaza textos, imágenes y enlaces dentro del primer hijo a item.*. Usa index para numerar y parent.item dentro de listas anidadas.

4. Maneja los resultados vacíos

   Define el texto de estado vacío que se muestra cuando no hay ítems.

"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
    }
  }
}

Enlaza cada ítem a su página

Para que cada tarjeta abra su propia página, la colección necesita una página plantilla, como /blog/:slug.

1. Convierte la tarjeta en un enlace

   Selecciona los elementos dentro del primer hijo, haz clic derecho y elige Wrap in link. O inserta un Link block en el primer hijo y mueve el contenido dentro. El primer hijo en sí no se puede envolver.

2. Enlaza la URL

   Selecciona el enlace. En la sección Link, presiona en la fila Bound URL y elige la página plantilla en Item page. Los campos de referencia agregan sus propias páginas, como Author page.

La opción escribe una expresión normal construida a partir de la ruta de la página, así que /blog/:slug se convierte en `/blog/${item.slug}`. Edítala a mano si lo necesitas. Un botón dentro del ítem puede enlazar de la misma forma.

Filtros y ordenamientos

Los filtros del CMS comparan un campo con un valor usando eq, neq, gt, gte, lt, lte, contains, in y exists. Los valores se pueden enlazar, por ejemplo a una variable de categoría, para que la lista se actualice a medida que los visitantes filtran.

Animar los ítems

Apunta a la tarjeta en una interacción y cada ítem repetido se anima. Agrega un stagger para lograr una cascada.