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);
}
});
});
});
},
});
}
2
Answers
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