Cart page not always showing items fetched with SDK


I’m having a problem with my cart page not always loading the cart items. Every now and then it displays no cart items.

This is for an HTML cart page where I’m using the following to get items…

document.addEventListener('snipcart.ready', function() {
let cartItems =;

then I’m looping through to get each item…

itemName = cartItems[i].name;

This works. But not every time. 10% of time no cart items show.

My site is a normal website with HTML pages from PHP templates, it’s not a single page app. In Snipcart Test mode.

How can I solve this? Maybe I should add the items to local browser storage at the time users add them to cart. Then assemble the cart page from local storage data? Is that a bad idea?

Hi @Forky,

Can we replicate this issue live somewhere? It will help us figure out what’s going on here.

I would guess that sometimes the eventlistener gets attached after Snipcart has already loaded. Could you validate that the event listener is added before including the “snipcart.js” script?

I moved the event listener before snipcart.js, but it didn’t make a difference. 10% of page refreshes still fails to load cart items.

There is no error in console when it happens. And the total price and number of items comes through 100% of time, since I’m getting those two things from the CSS classes “snipcart-items-count” and “snipcart-total-price”… these work 100%, only the cart item names don’t come through 10% of time.

We’re still in test mode so I can’t show a live URL… we are also restricting the cart to our logged in members only.

Maybe this is related, but we have an error message all the time related to CORS… but this error is always there, I thought it was harmless:

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at (Reason: CORS header ‘Access-Control-Allow-Origin’ missing).

Locale en-AU was not found, falling back to en.