Ad

Update Shopify Cart With Ajax Without Page Refresh

- 1 answer

I am changing a users Shopify shopping cart with Ajax, the cart is being changed successfully but in order to display the updated cart the user has to refresh the page. I want to display the cart changes WITHOUT a refresh.

I'm using the ajax api just fine, and I can add and remove items with:

Shopify.addItem();
Shopify.removeItem();

Those work great, but they require the user to reload the page to see the new/changed items in their cart. Do you know of a way to display the updated cart WITHOUT a page reload?

So everyone has the complete picture, here is my code:

function poll(products) {
$.ajax({
    url: "/apps/proxy",
    data: {products: products},
    type: "GET",
    dataType: "json",
    complete: setTimeout(function() 
      {cartAdd(); poll(products)}, 15000),
    success: function(data) {
      $.each(data, function(incoming_key, incoming_value){
        Shopify.getCart(function(cart){
          $.each(cart.items, function(cart_key, cart_value){
            if(cart_value.variant_id == incoming_value.id_to_remove){                 
              Shopify.addItem(incoming_value.variant_id, incoming_value.quantity);
              Shopify.removeItem(incoming_value.id_to_remove);
              console.log("some reason the incoming id is null or maybe not " + incoming_value.variant_id );
            }
            else if(cart_value.variant_id == incoming_value.variant_id && cart_value.quantity != incoming_value.quantity){
              Shopify.changeItem(cart_value.variant_id, incoming_value.quantity);
            }
          });
        });
      });
    },
});
}
Ad

Answer

Do an ajax call to the cart page /cart, get the required elements and replace them on the current page.

Add the code for the above after the first $.each function.

Ad
source: stackoverflow.com
Ad