Mostrar el catálogo completo de productos es el paso que conecta la narrativa de tu tienda: el visitante entra, explora, elige y compra. Aquí aprenderás a crear una página index en Astro que renderice todos los productos de una colección usando getCollection, un componente reutilizable y un template de HyperUI con Tailwind.

¿Cómo se crea la página index para listar productos en Astro?

La idea es dejar de navegar por URL directa y construir una vista que liste todo el catálogo. Para eso, dentro de la carpeta pages/product/ se crea un archivo index.astro que se encarga del render general.

En el bloque de lógica de Astro se importa getCollection desde astro:content y se obtienen todos los elementos de la colección products. Es la misma función que ya usabas para un solo producto, pero ahora aplicada al conjunto completo [01:30].

astro

import { getCollection } from 'astro:content';

const products = await getCollection('products');

¿Qué hace getCollection en Astro? Es una función que devuelve todos los archivos de una colección de contenido. Le pasas el nombre de la carpeta (por ejemplo, products) y obtienes un array con cada entrada lista para iterar.

¿Por qué usar await con getCollection?

Porque la lectura de archivos es asíncrona. El await espera la respuesta antes de continuar, así garantizas que products ya tenga la información cuando llegues al render.

Desde aquí también puedes aplicar reglas: ordenar por fecha para mostrar primero los más recientes, filtrar por categoría o no aplicar nada. Todo depende de cómo quieras manipular la información [03:15].

¿Cómo integrar el template de HyperUI con Tailwind?

El punto de partida es un template de HyperUI que ya trae la estructura visual: encabezado de la colección, descripción, menú de vista (lista o cuadrícula) y un selector de orden. Copias el HTML y lo pegas fuera del bloque de lógica, en la zona del template de Astro.

Dentro de ese template hay varios bloques que conviene identificar antes de tocar nada:

• La sección product-collection con su título y descripción.
• Los botones de cambio de vista, lista o visual.
• El bloque de sort para ordenar.
• La lista ul con los li de cada producto.

El template original trae cuatro productos hardcodeados. Solo necesitas uno, porque ese li será la plantilla que se repita por cada elemento de la colección [05:00].

¿Cómo iterar los productos con map en Astro?

Dentro del ul, eliminas los li extra y dejas uno solo. Luego envuelves ese li en un map sobre products para que se renderice un ítem por cada entrada de la colección.

astro

<ul> {products.map((product) => ( <li> <h3>{product.data.title}</h3> <time>{product.data.pubDate}</time> <p>${product.data.price}</p> </li> ))} </ul>

Fíjate en el detalle: los campos no se acceden con product.title, sino con product.data.title. Lo mismo para pubDate y price. Esto pasa porque Astro guarda el frontmatter del archivo dentro de la propiedad data de cada entrada [06:30].

¿Qué campos del producto se renderizan en la lista?

Con el componente conectado, cada tarjeta muestra tres datos básicos extraídos del frontmatter de tus archivos de contenido.

• title: el nombre del producto, que reemplaza el texto Lorem del template.
• pubDate: la fecha de publicación, útil para ordenar por novedad.
• price: el precio, antecedido por el símbolo de dólar.

La imagen se queda con la del placeholder por ahora, así puedes validar que la estructura ya funciona sin distraerte con assets [07:45].

¿Por qué uso product.data y no product directamente? Porque getCollection devuelve objetos donde el frontmatter vive dentro de la clave data. La raíz del objeto trae metadatos como el slug o el id, no los campos que tú definiste.

¿Cómo verificar que el listado funciona?

Guarda el archivo, abre el navegador y elimina el slug de la URL para entrar a /product/. Deberías ver la colección completa con nombre, precio y la estructura visual del template de HyperUI.

Si ves los productos listados, el render con getCollection y map está funcionando correctamente. A partir de aquí puedes sumar imágenes, ordenamiento por pubDate y filtros por categoría.

¿Qué retos puedes sumar a tu página de productos?

Con la base lista, hay dos mejoras que elevan la experiencia del sitio y la persistencia visual entre páginas.

• Crea un componente de header y otro de footer y úsalos en este template para mantener la navegación consistente.
• Llena la colección con más productos para probar cómo escala la vista y prepárate para sumar paginación.

¿Hasta dónde piensas llevar tu catálogo? Comparte un screenshot de tu listado en los comentarios y cuéntame qué filtros te gustaría implementar primero.