Este widget permite a los usuarios agregar o eliminar artículos de su lista de deseos directamente desde las tarjetas de productos dentro de los catálogos. También muestra el recuento actual de la lista de deseos, lo que mejora la interacción del usuario con la función de lista de deseos en las tarjetas de productos.
Sigue estos pasos para integrar el icono "Agregar a la lista de deseos" de forma manual:
Ve a panel de administración de Shopify → Tienda online → Temas → haz clic en el botón de los Tres puntos antes de Personalizar → selecciona Editar código.
Busca y abre un archivo de tarjeta de producto (o elemento de cuadrícula de producto) (varía según el tema de la tienda y/o el creador de páginas utilizado).
Agrega el siguiente código donde quieras que aparezca el icono de "Agregar a la lista de deseos":
``` <div
class="gw-add-to-wishlist-product-card-placeholder"
data-gw-product-id="{{ product.id }}"
data-gw-variant-id="{{ product.variants.first.id }}"
data-gw-wishlist-counter-position="left-top"
style="display: block"
></div> ```
Descripción de los atributos
Atributo | Descripción |
class | Obligatorio. Identifica el marcador de posición como un widget de lista de deseos de Growave. |
data-gw-product-id | Obligatorio. Usa |
data-gw-variant-id | Obligatorio. Usa |
data-gw-wishlist-counter-position | Opcional. Controla la posición de la insignia del contador de la lista de deseos. Valores aceptados: right-top (predeterminado) o left-top. |
style="display: block" | Asegura la visibilidad cuando se agrega de forma dinámica. |
Notas específicas del tema
Dependiendo de tu tema de Shopify, las expresiones Liquid exactas para los ID de producto y variante pueden diferir ligeramente. Las más comunes son:
{{ product.id }}{{ product.variants.first.id }}
Si esas no funcionan en tu caso, puedes localizar las expresiones correctas en tu tema:
Ve a tu panel de administración de Shopify → Tienda online → Temas.
Haz clic en el botón de los Tres puntos antes de Personalizar → selecciona Editar código.
Abre el archivo que renderiza tus tarjetas de productos, que generalmente se encuentra en:
snippets/product-card.liquidsnippets/product-grid-item.liquid
Busca líneas que hagan referencia a
product,variantu objetos relacionados para encontrar las expresiones Liquid correctas.
Si tienes algún problema con la integración, no dudes en contactarnos en [email protected] o a través del icono de chat en la esquina inferior derecha.