Productos relacionados

No hay un componente de relacionados, y es a propósito: la rejilla es un bucle de Etch con tu propia tarjeta — la misma que ya usa tu catálogo, si quieres que las dos se parezcan. Lo que pone el plugin es la lista: {this.fecommerce.related_ids}, los productos relacionados que elige WooCommerce para el producto que se está viendo —mismas categorías o etiquetas, visibles, y con existencias cuando la tienda esconde lo agotado—, hasta ocho.

1. Un bucle que reciba los ids. Añade un bucle WP Query con estos argumentos:

{
  "post_type": "product",
  "post_status": "publish",
  "post__in": "$ids",
  "orderby": "post__in",
  "posts_per_page": "$count ?? 4",
  "ignore_sticky_posts": true
}

$ids tiene que ser el argumento entero, como arriba: sólo así Etch pasa una lista como lista. Escrito dentro de un texto más largo llega como texto, y post__in no puede usarlo.

2. En la plantilla del producto, coloca el bucle y dale a su $ids el valor this.fecommerce.related_ids. Llama this al elemento del bucle y una tarjeta hecha para el catálogo funciona dentro tal cual: sus componentes ya leen {this.fecommerce.*}.

3. Envuelve la sección en una condición sobre this.fecommerce.related_ids. Un producto sin relacionados tiene la lista vacía, y WordPress lee un post__in vacío como «cualquier producto»: la condición esconde el encabezado y la rejilla.

La lista sólo se calcula para el producto que se está viendo: dentro de un bucle de tarjetas está vacía, así que un listado nunca paga una consulta que ninguna tarjeta enseña. En el editor también está, para poder estilizar la sección.

Un enlace de «Ver todos» va a la categoría del producto, que es de donde salen los relacionados. Etch da todas las categorías de un producto; cuál es la categoría —«Camisetas», no «Ropa»— se publica para cada producto:

Campo	Ejemplo
{this.fecommerce.category_name}	Camisetas
{this.fecommerce.category_url}	La página de la categoría
{this.fecommerce.category_id}	34

Es la categoría con la que terminan las migas, elegida como la elige WooCommerce —una hija antes que su madre—, y woocommerce_breadcrumb_main_term cambia las dos a la vez.

¿Elegidos a mano en vez de calculados? {this.fecommerce.upsell_ids} son las «ventas dirigidas» de WooCommerce —los productos que la tienda eligió en Datos del producto → Productos enlazados—, ya filtrados a los que un comprador puede alcanzar. El mismo bucle y la misma tarjeta.