Escuche la cantidad de actualización del carrito de Shopify
Estoy escribiendo una aplicación de Shopify y me gustaría escuchar el evento de actualización del carrito de Shopify. Sé que cuando el usuario hace clic en eliminar o aumentar la cantidad del artículo. Shopify envía una solicitud POST al backend para actualizar la tarjeta. Mi aplicación calcula el valor de envío en función de la cantidad de artículos del carrito de Shopify. Agrego el script de mi aplicación a Shopify a través de una etiqueta de script.
Intenté escuchar la entrada de cantidad, pero este evento solo desencadena uno. Creo que Shopify actualiza el DOM de entrada después de cada actualización del carrito para que pueda eliminar a mi oyente.
$('body').on('change', '.input[name="updates[]"]', function() { console.log('HELLO')});
¿Cómo puedo escuchar el evento de actualización del carrito? Parece ser una pregunta simple, ¡pero realmente no puedo encontrar ninguna respuesta con respecto a Shopify!
Respuestas
Por lo tanto, hay 2 formas de actualizar un carrito de Shopify. Ya sea mediante el envío del formulario o utilizando la API de Ajax. Suponiendo que ya ha resuelto el caso de envío de formularios llamando a su función de cálculo de envío al cargar la página. Para las actualizaciones de carrito basadas en Ajax, no hay un evento estándar. Algunos temas pueden activar un evento en la actualización del carrito, pero en el caso de una aplicación genérica, no es posible confiar en ellos debido a que no hay un comportamiento estándar definido.
Entonces, lo que puede hacer es escuchar las llamadas AJAX y llamar a su función si coincide con sus condiciones. Shopify Docs para Ajax API enumera los 4 tipos de solicitud POST que pueden actualizar el carrito. Entonces, al parchear la función abierta de XMLHttpRequest , agregamos un detector de eventos para la carga que se activa cuando la solicitud finaliza correctamente. En caso de devolución de llamada, verificamos si la URL fue la que se usó para actualizar el carrito y luego llamamos a la función de envío de actualización.
const open = window.XMLHttpRequest.prototype.open;
function openReplacement() {
this.addEventListener("load", function () {
if (
[
"/cart/add.js",
"/cart/update.js",
"/cart/change.js",
"/cart/clear.js",
].includes(this._url)
) {
calculateShipping(this.response);
}
});
return open.apply(this, arguments);
}
window.XMLHttpRequest.prototype.open = openReplacement;
function calculateShipping(cartJson) {
console.log("calculate new shipping");
console.log(JSON.parse(cartJson));
}
Idea tomada por respuesta de Nicolas
ajaxComplete no se usó porque solo escucha las solicitudes realizadas con jQuery.
Pasar la respuesta a su función de envío guarda la llamada adicional Get Cart Ajax.
Actualizar
Si el código anterior no funciona para usted o no detecta todas las llamadas, vea mi otra respuesta que también escucha todas las llamadas de la API de recuperación si se está utilizando para actualizar el carrito.
Escuche los cambios en el carrito usando la API Fetch
Para actualizar los campos de cantidad de artículos en el carrito en el tema seccionado
Paso 1: acceda al administrador de Shopify, haga clic en Tienda en línea y vaya a Temas.
Paso 2: busque los temas que desea editar, luego presione Acciones y luego Editar código.
Paso 3: Mire las Secciones, haga clic en cart-template.liquid. En caso de que no esté utilizando el tema que no tiene la dirección, puede acceder al directorio de Plantillas y hacer clic en cart.liquid.
Paso 4: busque la frase escrita como actualización [item.id] en la etiqueta de entrada.
Paso 5: Cambie el nombre por el valor de nombre = "actualizaciones []".
Paso 6: Repita estos pasos antes mencionados siempre que vea un valor de nombre de actualizaciones [] en la etiqueta de entrada.
Paso 7: haga clic en Guardar y actualice los campos de cantidad de artículos correctamente.