Reproducción AJAX del carrito después de solicitudes de carrito personalizado

Aug 20 2020

Estoy creando una aplicación de Shopify que ofrece productos o servicios adicionales relacionados con algunos productos identificados. En algunos casos, termino agregando un producto al carrito desde la página del carrito.

Encontré esta pregunta bastante útil para tomar medidas sobre los cambios en el carrito. El problema es que actualmente me veo obligado a volver a cargar la página para volver a renderizar el carrito junto con el nuevo producto. No puedo reconstruir razonablemente el carrito yo mismo para incluir artículos nuevos.

Por lo tanto, ¿hay alguna manera de activar una "representación AJAX" del carrito y evitar una recarga de página completa?

Respuestas

1 BilalAkbar Aug 21 2020 at 09:48

Puede lograr esto de muchas maneras dependiendo de su objetivo final. Por su descripción, he entendido que solo desea que su script se ejecute en la página del carrito. Sin embargo, tenga en cuenta que un usuario puede pasar a la página de pago sin visitar la página del carrito. Así que cubra todos sus casos de uso.

Esto hubiera sido mucho más fácil si tuvieras que hacerlo en un tema y no en una aplicación. Dado que su aplicación no tiene idea sobre el marcado de la página del carrito, no es fácil agregar la nueva fila del producto a la tabla existente. Como solución alternativa, al agregar un nuevo producto, llame a la página del carrito a través de Ajax, analice el HTML devuelto y reemplace el formulario del carrito. Entonces, después de agregar un nuevo producto, simplemente llame al siguiente código para volver a representar el formulario del producto en la página del carrito.

function RerenderCart() {
  $.get("/cart", function (data) { const parser = new DOMParser(); const doc = parser.parseFromString(data, "text/html"); const formSelector = doc.querySelector("form[action='/cart']"); $("form[action='/cart']").replaceWith(formSelector);
  });
}

Agregue cheques para la página del carrito y si el formulario se encontró en el HTML devuelto.

Este código funciona bien en el tema Debut Shopify. Pruébelo minuciosamente en todos sus casos de uso.

DOMParser