Hello,
I am using the AJAX API /cart/add.js to dynamically add products to the cart in my store. When I fire the add to cart method, the return data on "/cart/add.js" is always showing the correct variant details. But, when I call a "get /cart.js" after adding the item, it is showing a different variant in the cart, sometimes. I can get my add to cart (ATC) to work about half the time. Sometimes I'll get it to work once, change nothing, hit add to cart again and it will not work the next time.
When the issue happens, the line-item key does not match from the /cart/add.js call to the get /cart.js call. Having a hard time pinning down what the issue is here since it works about half the time. This is being staged on a development theme so I cannot share the URL, but any help would be greatly appreciated.
I have attached two screenshots.
- cart_add.js--return_data.png = The initial add to cart (function shown below) return data
- get_cart.js--return_data.png = A GET /cart.js call after the add to cart is finished.
Here is the function I am using for add to cart:
/**
* Add products to cart via AJAX
*
* @param {int} variantID - pass the ID of the variant you'd like to add to cart
* @example
* fn__cart.addToCart__ajax(variantID);
*/
this.addToCart__ajax = function(variantID){
console.log('fn__cart.addToCart__ajax() - ',variantID);
fn__ajax.ajax_status(true);
// Add to cart data
var items = {
'items': [
{
'id': parseInt(variantID),
'quantity': 1
}
]
};
// AJAX add to cart
$.post(
'/cart/add.js', items,
function(data){
console.log('add to cart - data: ',data);
fn__ajax.ajax_status(false);
},
"json"
);
};
cart_add.js--return_data.png
get_cart.js--return_data.png
