CartJS.cart.items delayed

[dhruveonmars]

So when I log or run anything against CartJS.cart.items, it always seems to be a step behind CartJS.cart, and I'm not sure how that's possible.

For eg,

After adding an item to the cart, I want to update the cart in the header. To do this, I call a function refreshSidecart(); inside the success function of the CartJS.addItem request.

In refreshSidecart, I am able to log CartJS.cart, which shows the items correctly, however when I log CartJS.cart.items, I get an empty array logged.
If I press the add to cart button again, in the CartJS.cart items, it shows the correct details, with a quantity of 2, however in the CartJS.cart.items log, it only shows 1.

I added the following delay

setTimeout(function() {
    console.log('2', CartJS.cart.items);
  }, 3000);

And this seems to log the correct values.

I'm not sure what to do about this, as I would have thought that CartJS.cart.items would just be accessing the value of items inside CartJS.cart but any help would be greatly appreciated.

[KevinSupertramp]

Hi there, same problem here. I use the "success" callback to update my cart totals and it is always a step behind. It looks like there is a delay for update the CartJS.cart JSON?

[gavinballard]

Hi @dhruveonmars and @KevinSupertramp, apologies for the delayed response on this. I have very limited time for Cart.js these days.

If this is still an issue, can you please point me to a publicly-accessible Shopify site that reproduces the issue, ideally as a minimal test case (ie without lots of other third party libraries that may be causing the issue)?

Sounds like there may be some caching issues going on, but I really need a good example case to be able to nut this one out.

[dhruveonmars]

Hey @gavinballard sure. Will try and get a development site up soon that's publicly accessible and doesn't have the timeouts

[dhruveonmars]

Hey @gavinballard, Sorry for the delay.

I have a development version of the site I was building setup, and is publicly accessible. https://black-lines-development.myshopify.com/products/test-product.

I need to remove the third-party libraries and the timeouts that were added

[gavinballard]

Thanks @dhruveonmars! Is the JS code you're using for the sidebar rendering easily accessible?

[dhruveonmars]

Hi @gavinballard I've added a console.log when you press the 'add to cart' button, so you'll be able to find the code. It looks like Shopify is reformatting the code on the theme publishing, so let me know if it's not quite so readable and easy to follow in the web inspector, and I can upload a copy of the theme.js file which has the 'add to cart' functionality.

I have left the timeouts that were needed on the live store. Please have a look, and let me know if I should remove them

[gavinballard]

Hey @dhruveonmars, currently looks like some CSS/JS issues on that development site.

[dhruveonmars]

Hey @gavinballard, sorry about that. Fixed that so you can have a look now

[gavinballard]

@dhruveonmars can you please try updating to v1.0.2 of Cart.js (just released) to see if the new cache-busting code addresses this problem?

[dhruveonmars]

hey @gavinballard , I've been testing and it still seems to have a delay. 1.0.2 also seems to require rivets, but I didn't think it was required before

[kevin-ryser]

Hi everyone, I'm using the latest version (1.1.0) and I can confirm this is still happening.

[kevin-ryser]

I was able to quickly fix this - not the cleanest - but you'll get the "why" it's happening.

1. With the update function: I'm using the "success" Ajax callback which is called before the cart update function (= cart.items not updated yet) so I've changed "push" by "unshift" so the cart update is always called first in the Queue.add function:

request.success.push(CartJS.cart.update);

by

request.success.unshift(CartJS.cart.update);

2. For addItem, addItems functions, I've passed my "success" callback to the "getCart" function instead of the Queue.add:

var cart_options = {};
if (options.success) {
    cart_options.success = options.success;
    options.success = [];
}

CartJS.Queue.add('/cart/add.js', data, options);
return CartJS.Core.getCart(cart_options);

Simply because the loca cart.items is updated with the getCart function.

I hope it makes sense!