Cart Item Count not updating when navigating back about liquid-ajax-cart HOT 7 OPEN

Hey @p6gb
I gave this advice to another Liquid Ajax Cart user maybe it might help you:

I think you take the Dawn theme as a starting point and it has its own JavaScript for updating the cart icon structure.
Try to remove the id="cart-icon-bubble"/Dawn classes to detach the JavaScript logic related to the cart icon and make sure that the data-ajax-cart-bind-state="cart.item_count" element is always there.
I would suggest recreating the icon's structure from scratch without any Dawn classes/id in order not to attach JavaScript from Dawn.
Because it is very difficult to foresee what conflict might happen between Dawn JS and Liquid Ajax Cart JS.

from liquid-ajax-cart.

Hey @EvgeniyMukhamedjanov
thanks for your advice. I did that and it seems to work now. All in all I should have built more from scratch but in the beginning I was hesitant because I don't know Shopify too well and didn't want to accidently kill some of Shopifys functionality.

Are you aware of any other components were Dawn and Liquid Ajax Cart JS scripts might interfere? Obviously there is the cart page. I'm thinking to basically have just a blank page there with the floating Liquid Ajax Cart JS always open.

from liquid-ajax-cart.

Well, actually I continue to have that problem for mobile.. Can you point me to where the update of the item count happens in the code so i can debug? Is there a load event listener or how does it work?

from liquid-ajax-cart.

I continued to have that issue but only when navigating back, especially on mobile devices. It seems that Safari mobile (probably Chrome aswell) serve the cached site for performance reasons and at least in my case there was not even a load event fired. I therefore added a listener on the pageshow event that updates the cart count.

window.addEventListener("pageshow", () => {
  let item_count;
  fetch("/cart.js")
    .then((response) => response.json())
    .then((data) => {
      item_count = data.item_count;
      document.querySelector(".js-cart-count").textContent = item_count;
    });
});

from liquid-ajax-cart.

Sorry for the late answer — didn't have chance to check GitHub. About mobile issue - most likely Dawn using two different element for mobile and desktop. So you need to remove the Dawn JavaScript from mobile version too.
I will be able to give you clear answer only after I make full LAC and Dawn integration.

from liquid-ajax-cart.

Additional HTML Elements are not the problem in my case, it lies with the handling of the bfcache (back/forward-cache) in iOS. When a page is loaded from there by navigating back with the back-button, the load event is not being triggered, but a pageshow event should fire instead. I added a listener to this event and updated the cart then.

However, this works only the first time navigating back and forward again. If you do the same thing twice, the pageload event does not fire again. So far I found no way no way around this except which kills the whole caching and is very ugly. (from here https://stackoverflow.com/a/44194156)

 window.addEventListener('pageshow', function (e) {
    e.persisted &&
      /iPad|iPhone|iPod/.test(navigator.userAgent) &&
      !window.MSStream &&
      window.location.reload();
  }, false);

I've also found several answers suggesting that this behavior comes with having iframe elements on a site. I do have them on that page but don't know if I could remove/disable them because I think Shopify injects them at some point and I wouldn't know how to stop that. And the chat functionality that is a iframe is wanted by the customer.

from liquid-ajax-cart.

Anyways, I think adding something like the following would be a good idea (or is this taken care of otherwise?):

  window.addEventListener("pageshow", (ev) => {
    cartRequestUpdate({}, {});
  });

This should usually work. When I test e.g. here https://back-forward-cache-tester.glitch.me/?persistent_logs=1 the pageshow event fires consistently. I don't really know what the issue is in my case, might have to do with the iframe as I stated above.

from liquid-ajax-cart.