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 plete picture, here is my code:

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

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 plete picture, here is my code:

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

• javascript
• jquery
• ajax
• shopify

2 Answers 2

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.

you can use the shopify ajax cart, after insert or update call the GET action:
using-ajax-api#get-cart