Issues when going back in the browser from Checkout

[subject-matter]

Hey there,

I'm having issues when going back in the browser from checkout. If I add two items to cart and go to checkout and then navigate back it won't show the latest addition.

https://scribehow.com/shared/Purchasing_a_Sandalwood_and_Vanilla_Candle_from_Lyttelton_Lights__IBzw4bWdT12qfHSIL5x6jw

[EvgeniyMukhamedjanov]

Hey,

Actually there is an open issue here with the same topic. But I've understood it and could replicate only after your message :-)

I'm going to tag you in that issue so you can track the progress. I'll try to find a solution for that.

[EvgeniyMukhamedjanov]

@subject-matter The issue is here:
#18

[EvgeniyMukhamedjanov]

Hi again!
The issue is fixed in the v2.0.1 and v1.11.2.
Once a user clicks the back/forward button and if the browser shows the content from cache (thus the wrong cart data shows up), liquid-ajax-cart will send an additional request to update the data.
Let me know if that works!

[james0r]

I just found this after the fact, but for me the simple solution was to replace the current page with the line_item removal URL.

Alpine.js

<a 
  href="{{ line_item.url_to_remove }}"
  @click.prevent="window.location.replace($el.href)"
>
Remove
</a>

Vanilla

 <a 
 href="{{ line_item.url_to_remove }}"
 data-remove-replace
 >Remove</a>
<script>
 document.addEventListener('DOMContentLoaded', () => {
   const itemsToRemoveReplace = document.querySelectorAll('[data-remove-replace]')
   itemsToRemoveReplace.forEach(item => {
     item.addEventListener('click', (e) => {
       e.preventDefault()
       window.location.replace(item.href)
     })
   })
 })
</script>

Might be cool to have a LAC attribute for this.

@EvgeniyMukhamedjanov I'm on 2.0.1 and still saw this occurring. I thought maybe was because I had devtools and cache disabled, but I closed the devtools and tried again and still occurred.

[EvgeniyMukhamedjanov]

@james0r
Could you explain your solution, i'm not sure I got it right :-)
So the initial problem is that if you on the page A, have 0 items in the cart, then add one item to the cart via ajax, then go to the page B and click the "Back" button in the browser, it will direct you to the page A. But it will take the page A html from cache which was generated before you added the item to cart, so you'll see 0 items in the cart despite in reality you have 1.