[BUG] Cart UI not updates when using browsers navigation buttons #2166
Comments
john-mantas
changed the title
|
Hello! |
|
Any updates on this issue? |
|
The underlying cause of this is the browser's use of bfcache. When you use back/forward the entire page's state is loaded from memory without a network request. In JavaScript, you can listen for when the page is restored from cache. Ideally, you would re-render the appropriate sections as needed. However, as a quick hack, for the cart page at least, you could force a page reload in the event listener... so maybe something like: window.addEventListener('pageshow', (event) => {
if (event.persisted) { // loading from bfcache
// NOTE: If you don't want to modify the theme, you could create a custom liquid section in the header
// BEST solution
// re-render appropriate sections, especially cart-icon-bubble, using section rendering api
// check out cart-drawer.js, cart.js and cart-notification.js
// HACK solution - not using cart drawer
// if non-cart page
// grab new icon using section rendering api
// else, it's the cart page
// location.reload(); // force a full reload always
} else {
// Nothing needed here, page should refresh normally
}
});Of course, if a user disables JavaScript this won't work. The cart icon will always be out of sync on back. When JavaScript is disabled on the cart page, the following might work (not tested) to disable the cache: <!-- cart page only -->
<head>
<!-- stuff -->
<noscript>
<meta http-equiv="Cache-Control" content="no-store">
</noscript>
<!-- stuff -->
</head> |
|
I'm on Dawn 11.0 and same thing happens, any news on this? |
|
We're experiencing the same issue intermittently on Dawn 14. We have a checkout UI extension that can potentially add/edit/remove cart items in one-page checkout. If a user changes their cart in checkout, then clicks the back button on the browser, it will sometimes show a stale cart drawer and bubble until you refresh browser. |
Current behavior
If I click the "Add to cart" from the product page the product gets added to cart and the notification bubble also changes to reflect the cart count, but when i click the "back" button from the browser to return to the previous page, the cart bubble shows the previous count (if any). The same thing happens when using the drawer, the products gets added and the drawer opens with the correct content, but when i click the back button the drawer appears to be empty.
Expected behavior
UI should reflect the actual cart content when using the browser history navigation buttons.
Version information
Additional context/screenshots
/cart.jsalways have the correct cart contentIt seems that even the "liquid parts" are not correct, since the
is-emptyclass at<cart-drawer>is handled with liquid and despite that the cart is not empty, this class still gets printed in the html on back/forward navigation.The text was updated successfully, but these errors were encountered: