Cuando Fin for Ecommerce añade o cambia un artículo, actualiza el carrito en tu tienda. Esto funciona por defecto en la mayoría de los temas. Si tu carrito no se actualiza, la solución está abajo.
Temas compatibles
Tu carrito se mantiene sincronizado automáticamente en Dawn, Horizon, Brooklyn, Flex, Flow, Venue, Sense, Craft, Refresh y temas basados en ellos. Muchos otros, incluyendo Focal, Prestige y Warehouse, también están soportados.
Nota: El soporte depende de cómo está construido tu tema, no de su nombre, por lo que un tema muy personalizado puede necesitar el paso siguiente.
Si el carrito de tu tienda no se actualiza
Si los cambios de Fin nunca llegan a tu carrito, o solo aparecen cuando el comprador recarga la página, tu tema actualiza su carrito de una forma que Intercom no puede detectar. Esto es más común en temas personalizados.
Nota: Añadir este fragmento requiere acceso al administrador de Shopify y conocimientos básicos para editar el código del tema. Si no te sientes cómodo editando archivos del tema, comparte este artículo con tu desarrollador.
Para solucionarlo, añade el fragmento siguiente a tu tema. Escucha un evento personalizado del navegador (intercom:cartUpdated) que Fin envía cada vez que cambia el carrito, luego vuelve a obtener el carrito de Shopify y dispara los eventos que tu tema usa para volver a renderizarlo.
En el administrador de Shopify, abre el editor de código de tu tema activo.
Abre el archivo principal de diseño, usualmente layout/theme.liquid.
Pega el fragmento justo antes de la etiqueta de cierre
</body>, luego guarda.Pruébalo pidiendo a Fin que añada un producto. El carrito de tu tienda debería actualizarse inmediatamente, sin recargar la página.
document.addEventListener('intercom:cartUpdated', async () => {
try {
const res = await fetch(`${window.Shopify.routes.root}cart.js`, {
headers: { Accept: 'application/json' },
cache: 'no-store',
});
if (!res.ok) return;
const cart = await res.json();
// Replace these with whatever your theme uses to re-render the cart.
document.dispatchEvent(
new CustomEvent('cart:live', { detail: cart, bubbles: true })
);
document.dispatchEvent(
new CustomEvent('cart:reload', { bubbles: true })
);
document.documentElement.dispatchEvent(
new CustomEvent('cart:refresh', { bubbles: true })
);
} catch {
// Cart fetch failed. Leave the storefront cart as it is.
}
});
Cambia los últimos tres envíos para llamar a lo que tu tema use para volver a renderizar el carrito.
Si el carrito aún no se actualiza después de añadir el fragmento, verifica que los nombres de los eventos personalizados en los últimos tres envíos coincidan con los que tu tema escucha. Los archivos JavaScript o la documentación de tu tema mostrarán qué eventos usa para volver a renderizar el carrito. Si tienes dudas, comparte este artículo con tu desarrollador.