Recommendations

Configura las recomendaciones después de sincronizar tus datos. Elige las experiencias con las mejores prácticas de Recommendations, luego adapta su ubicación y contexto a tu tema.

Crear Elementos #

Cada Element combina una lógica de producto, un Diseño y configuraciones para determinar dónde aparece.

1. Ve a Recommendations > Designs > New Design y elige una plantilla de Product Slider. Configúrala en el Editor de Diseño o utiliza un Diseño de código.
2. Ve a Recommendations > Elements > New Element.
3. Asigna al Element un nombre descriptivo y elige su Element type, Diseño y cantidad de productos.
4. Guárdalo en In preview.
5. Abre Insert into website y elige inyección o código embebido.

Un Diseño puede servir para varios Elementos. Usa el código embebido generado y el ID de Element de tu propia tienda. Los IDs como @product-page-alternatives son ejemplos, no son nombres requeridos ni IDs de módulos de ideal.shop.

Identifica el Contexto #

Las recomendaciones de producto, categoría, artículo y cesta requieren IDs que coincidan con los registros importados. Encuentra la fuente del ID por separado del selector que controla la ubicación.

1. Abre la página relevante de la tienda y revisa su HTML con las herramientas de desarrollador del navegador.
2. Busca un atributo que contenga el ID del producto, categoría o artículo actual. Para cestas, inspecciona cada fila de producto.
3. Encuentra el registro correspondiente en Clerk.io y compara los IDs. No sustituyas por un SKU, slug de URL o ID de línea de cesta a menos que también sea el ID del registro importado.
4. Repite en otra página y después de navegar para confirmar que el valor cambia correctamente.

Ejemplos de Temas #

Estos selectores y atributos se identificaron en el tema de Fodmagasinet. Revísalos en tu tienda antes de ingresarlos en la configuración del ID de inyección del Element.

Por ejemplo, la página Gehwol Lipidro expone el ID de producto 262327. Verifícalo con tu propio registro importado en lugar de copiar el valor.

No asumas que body[data-page-id] contiene un ID de producto o de categoría. Verifica su significado en cada tipo de página. Donde la integración establezca un contexto fiable de Clerk.js, también puedes utilizar el contexto de Clerk.js como fuente del ID.

IDs de Cesta #

Un ID de línea de cesta identifica una entrada de cesta; puede diferir del ID de producto importado por Clerk.io. En el ejemplo de Fodmagasinet, data-basket-id es un ID de línea y data-item-id es el ID de producto.

En la configuración de la inyección, utiliza el selector de producto de cesta y el atributo de producto aquí indicados. La extracción de múltiples IDs recopila los IDs de productos coincidentes en una sola lista para ventas cruzadas.

Para inspeccionar la lista en las herramientas de desarrollador, este ejemplo de solo lectura recopila IDs únicos de ese tema:

const productIds = [...new Set(
  [...document.querySelectorAll('#basket_container .basket-item-tr[data-item-id]')]
    .map(row => row.getAttribute('data-item-id'))
    .filter(Boolean)
)];
console.log(productIds);

Para el código embebido, proporciona los IDs actuales como un array JSON, por ejemplo data-products='[123,456]'. Actualízalos y refresca el Element a través de la integración documentada cuando cambie la cesta; no dejes una lista de ejemplo fija en producción.

Falta de Contexto #

Si no existe un ID fiable, solicita al desarrollador del tema que exponga los IDs importados de producto/categoría/artículo y los IDs de producto en la cesta mediante atributos estables o contexto de Clerk.js. Deben actualizarse tras la navegación y los cambios en la cesta, incluido el estado de cesta vacía.

Configurar Ubicaciones #

Elige objetivos estables y únicos dentro del área de contenido de la tienda en línea. Evita clases generadas o un número de módulo copiado de otra tienda.

En Insert into website > Using injection, configura el destino de URL, el selector objetivo y la posición. Usa Before o After para hermanos, o Inside first / Inside last para el contenido dentro del objetivo.

Verifica que el selector coincida una vez en cada página prevista, incluso después de una navegación dinámica. Utiliza la configuración de Element para ver todas las opciones de inyección.

Ejemplos de Fodmagasinet #

Para páginas de producto con pestañas de descripción, .item-page .tabs-outer-container es un objetivo de ejemplo para alternativas con Before. Cross-sell utiliza Before .item-page #ratings, colocándolo después de la descripción y antes de las reseñas.

Para un producto sin pestañas, inspecciona el contenido restante y elige una opción de respaldo estable. En este tema, #ratings puede ser el respaldo cuando esté presente. Haz que las condiciones de respaldo se excluyan mutuamente para que las alternativas se rendericen una sola vez y se mantenga el orden previsto con las ventas cruzadas.

Las recomendaciones de cesta pueden usar After body[data-page-type="basket"] #basket-form. Confirma que el Element inyectado se mantenga dentro del ancho del checkout, por encima del pie de página. Proporciona un objetivo separado u oculta el Element si una cesta vacía omite el formulario.

Para artículos, inspecciona el envoltorio real del contenido del artículo e inserta después del contenido, antes de navegación no relacionada o módulos de pie de página. Los IDs de módulo de página principal y artículo, los diseños exactos y los encabezados deben elegirse para tu propia tienda.

Si reemplazas recomendaciones nativas, oculta o desactiva su visualización después de verificar la ubicación de Clerk.io. Mantén las relaciones de productos configuradas manualmente para que la tienda pueda reutilizarlas. Evita Replace en un envoltorio que contenga contenido no relacionado.

Los umbrales de categoría opcionales necesitan un total fiable o información de paginación verificada. Contar solo tarjetas visibles puede ocultar recomendaciones en páginas posteriores de una categoría grande. Elige tu propio umbral y prueba la primera y la última página.

Acciones de compra #

Reutiliza el comportamiento nativo de compra de la tienda para que las variantes, totales de la cesta y errores funcionen de forma consistente. Un enlace a la página de producto es el punto de partida seguro cuando se requieren opciones adicionales.

Inspecciona un control de compra nativo, su controlador de eventos y una solicitud de compra en las herramientas de desarrollador utilizando una cesta de prueba acordada. Confirma el endpoint, el método de solicitud, el contenido, los requisitos de variante, el manejo de la respuesta y la actualización de la cesta antes de conectar un botón de Clerk.io.

En Fodmagasinet, el flujo nativo verificado utilizó /basket/add con items_id y quantity, mediante ajax_post y basket_add_receive. Estos nombres de endpoint, campo y función son ejemplos de tema; reutiliza su firma y manejo reales de la tienda.

Para productos simples, prueba que una sola acción agregue la cantidad prevista y actualice la cesta nativa. Para productos que requieran talla, color u otra opción, abre product.url para la selección excepto que tu integración admita explícitamente esas opciones.

No infieras requisitos de variantes a partir del stock o de un precio principal cero. Mantén los errores nativos visibles y accionables. Consulta la variante FAQ para saber por qué un adaptador de mensajes de respuesta no es una solución general.

Datos de Tarjeta #

Utiliza las mismas reglas verificadas de tarjeta de producto en Search y Recommendations. Revisa ejemplos importados de un producto simple, un producto con descuento, un producto no disponible y un producto con variantes antes de adaptar una plantilla.

Los datos de producto devueltos por Fodmagasinet usan price y list_price. Por ejemplo, el producto 430087 devolvió ambos como 99, por lo que no debe tener etiqueta de descuento ni precio antiguo. Usa list_price de manera consistente para ese mapeo; no sustituyas por retail_price.

La siguiente tarjeta Liquid mínima enlaza a la página de producto y asume que el price importado ha sido validado. Deja deliberadamente el manejo de compra, las etiquetas de stock y el marcado de descuento a tu mapeo de datos verificado.

{% for product in products %}
  <a class="ideal-clerk-card" href="{{ product.url }}" data-event-type="product-click">
    <img src="{{ product.image }}" alt="{{ product.name }}" loading="lazy">
    <span>{{ product.name }}</span>
    <span>{{ product.price | money }}</span>
    <span>Ver producto</span>
  </a>
{% endfor %}

Para un mapeo de list_price verificado, utiliza la misma comparación tanto para la etiqueta como para el precio antiguo:

{% if product.list_price and product.list_price > product.price %}
  <span class="ideal-clerk-card__badge">Sale</span>
  <del>{{ product.list_price | money }}</del>
{% endif %}

Valida los tipos de campo y traduce la etiqueta antes de usar este ejemplo. Para un descuento, requiere un precio regular numérico mayor al precio de venta. Usa ese mismo campo para el precio antiguo y la etiqueta. No mezcles list_price en la etiqueta con retail_price en el precio antiguo.

Donde existan precios de variantes importadas, muestra el precio válido más bajo disponible para compra con una etiqueta localizada Desde, como Fra en danés. Verifica la disponibilidad de variantes, impuestos, moneda y cualquier descuento mostrado contra esa misma variante.

Por ejemplo, el producto 285207 de Fodmagasinet devolvió price: 0, list_price: 0 y variant_prices: [109,65]. Su tarjeta puede mostrar Desde 65,00 kr. usando el array de precios de variante verificado en lugar de mostrar cero. No muestres un precio principal anterior de cero.

La visualización Liquid de este tema utiliza product.variant_prices | min | money_eu 2, seguido de kr.. Verifica que tu propio array contenga las variantes que deseas que se puedan comprar y adapta la etiqueta y formato de moneda a tu tienda.

Un precio de tarjeta calculado no cambia el price principal importado usado para ordenar. Corrige el origen o el mapeo de importación si la ordenación usa un precio incorrecto o cero. Consulta la FAQ de precio.

Finaliza con la lista de verificación de configuración.