Tarjetas de producto en un bucle

La rejilla del catálogo, una fila de productos destacados en la portada, los relacionados debajo de un producto: todo es un Loop de Etch que recorre productos y dibuja una tarjeta que diseñas tú. No hay un componente de rejilla, a propósito: el bucle ya lo es. Lo que añade Fancy Etch es lo que va dentro de la tarjeta: el precio, las etiquetas, las estrellas, el stock, el selector de variaciones y el botón de añadir al carrito, cada uno del producto de su tarjeta.

La única regla: llama this al elemento

Al añadir el bucle, ponle this como nombre a su elemento. No hay que configurar nada más.

Todos estos componentes leen {this.fecommerce.*} de fábrica —los mismos datos que leen en una ficha de producto—, así que dentro de un bucle cuyo elemento se llama this cada uno sigue al producto de su tarjeta sin tocar ni una prop.

Con otro nombre, los componentes salen vacíos

Si llamas al elemento de cualquier otra forma —product, item— nada les dice a los componentes de qué producto hablan. Cámbialo a this, o pon en cada componente las props que dicen «Comes from the product being shown» apuntando a tu nombre: {product.fecommerce.id} en vez de {this.fecommerce.id}.

Qué bucle usar

Dónde	El bucle
La tienda, sus categorías y etiquetas, las búsquedas, las páginas de atributo	El bucle Main Query de Etch. Reutiliza la consulta de la propia página: sus productos, su orden, sus filtros y sus páginas. Cualquier otro bucle ignoraría los filtros y la paginación.
Una portada, una landing, una sección en cualquier sitio	Un bucle WP Query de productos, acotado como quieras.
Debajo de un producto: relacionados, upsells	Ver Productos relacionados.

Un bucle WP Query de productos destacados, por ejemplo:

{
  "post_type": "product",
  "post_status": "publish",
  "posts_per_page": 8,
  "tax_query": [
    { "taxonomy": "product_visibility", "field": "name", "terms": "featured" }
  ]
}

Para una categoría, la cláusula es { "taxonomy": "product_cat", "field": "slug", "terms": "hoodies" }.

Montar la tarjeta

Una tarjeta son elementos normales de Etch con los componentes colocados entre ellos. En el orden que usa la tarjeta de la demo:

Pieza	Cómo
Foto	Un elemento de imagen con src {this.image.sizes.woocommerce_thumbnail.url}, srcset {this.image.srcset} y alt {this.title}. Añádele el atributo data-fe-woo-variation-image y el selector de variaciones la cambia por la foto del color elegido.
Nombre y enlace	{this.title} y {this.permalink.full}.
Etiquetas	Product Badges. Nada que configurar.
Estrellas	Product Rating, dentro de una condición sobre this.fecommerce.rating, para que un producto sin reseñas no deje una fila vacía. Apaga Show the text beside the stars para dejar sólo las estrellas.
Precio	Product Price. En una rebaja enseña solo el par de antes y ahora.
Stock	Stock Status, si la tarjeta lo quiere.
Opciones	Variation Picker, dentro de una condición sobre this.fecommerce.needs_selection, para que sólo lo lleve un producto con algo que elegir. Pon Presentation en Swatches, compact y apaga Show the selection message: el precio de arriba ya cambia.
Botón	Add to Cart, con Size preset en Compact, for a card y Show the quantity label apagado.

Deja la foto, el precio, el selector y el botón dentro del mismo elemento de la tarjeta. Un color elegido en una tarjeta cambia el precio y la foto de esa tarjeta, y su botón añade esa variación: el selector los busca dentro de la tarjeta, hasta donde empieza el botón de otro producto.

Conviene saber

• Filtrar y paginar sin recargar necesita la barra, la rejilla y la paginación dentro de un elemento con data-fe-woo-results: ver El catálogo.
• Cuántos productos enseña una página se decide una vez: el «posts per page» del bucle Main Query, o Fancy Etch → Shop.
• Product Gallery también sigue al producto de cada tarjeta, pero una tarjeta suele querer una sola foto: una galería en cada tarjeta carga las fotos de todos los productos.