Cart Drawer Does Not Update Automatically (Dawn Theme)

Store Design
, , ,
4

@SeanConnors ,

As a last resort, use window.location.reload() to refresh the page when an item is added to the cart. This can be a jarring experience for users, as it will cause the page to fully refresh, potentially losing any unsaved data or scroll position on the page.

Instead of using window.location.reload(), you can update the cart information asynchronously using an AJAX request to the Shopify API. This will allow you to update the cart without refreshing the page, which will provide a more seamless experience for users.

To do this, you can use the fetch() function to send an AJAX request to the Shopify API to retrieve the latest cart information. You can then update the cart drawer with this information using JavaScript.

Here is an example of how you might do this:

// Send an AJAX request to the Shopify API to retrieve the latest cart information
fetch('/cart.js')
.then((response) => response.json())
.then((cart) => {
// Update the cart drawer with the latest cart information
updateCartDrawer(cart);
});

function updateCartDrawer(cart) {
// Update the cart drawer with the latest cart information
}

You can place this code in a script tag in the cart-drawer.liquid file, or you can include it in a separate JavaScript file that is loaded on the page.