Cart Page Item Price Does Not Update to New Price on Refresh

[FunkDoc]

Hi, I have a situation where I am using the Admin API to update an item price and that works fine, but while testing i noticed that if I have the item in the cart page and I refresh that page (after the item price has changed via API)- the price of the item in the cart stays the same. If I go to checkout the new price is in the checkout, and then going back to the cart it will then show the new updated price.
Is there any way to force the cart page to "hard" refresh? Or any other way to trigger the cart to get updated price info? I'm using the Dawn theme if that is helpful to know.

[tobebuilds]

Hi FunkDoc,

Shopify caches/memoizes the contents of the cart, including products, prices, and discounts. I assume it is for performance reasons.

There is only one consistent way to force a "hard refresh" of the cart prices and discounts: loading the checkout page.

Updating the items in the cart (by adding/removing new ítems, or updating an item's quantity) also usually triggers a refresh, but I've also seen cases where if the cart is updated to a state it already had in the current session, previous calculation results are sometimes used, instead of forcing a refresh.

Some events that will never trigger a "hard refresh" of the cart contents:

• Logging in/out
• Reloading the cart page

Are you going to frequently update the prices of your products? If so, you might want to add messaging to your site to let your customers know that the prices they see in the checkout page are the final source of truth.

Let me know if this answers your question!

Best,

Tobe

[FunkDoc]

Thanks so much for the response! I was able to "force" this to work by doing a cart update with the same items and quantities in the cart, and then doing a window.location.reload

I'm not sure if it will work all the time, I have to do more tests. But for now at least it is something.

I do agree with noting to the customers that the final price is whatever they see in the checkout.

function refreshCartPrices() {
        fetch(window.Shopify.routes.root + 'cart.js')
        .then(response => response.json())
        .then(cartData => {
            const updates = {};
            cartData.items.forEach(item => {
                updates[item.id] = item.quantity;
            });
    
            return fetch(window.Shopify.routes.root + 'cart/update.js', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-Requested-With': 'XMLHttpRequest'
                },
                body: JSON.stringify({ updates: updates })
            });
        })
        .then(response => response.json())
        .then(updatedCart => {
            console.log('Cart refreshed with updated prices:', updatedCart);
            window.location.reload();
        })
        .catch(error => {
            console.error('Error refreshing cart prices:', error);
        });
    }