Expresso Store - Empty cart when changing url

Question

Since the website we're developing is "donation-only", for our specific UX design, I'd like to empty the cart every time our check-out page is left.

I tried the following code and it's working, but I would like to follow the $("nav a") link, once the cart is correctly emptied.

$('nav a').click(function(){
    event.preventDefault();
    $('#store input[name="empty_cart"]').trigger('click');
});

Answer 1

Instead of trying to catch links on the page (which won't work if the customer uses their back button etc), you should use the empty_cart="yes" parameter on the product tag.

https://exp-resso.com/docs/product_tag.html#empty_cart

{exp:store:product entry_id="{entry_id}" empty_cart="yes"}
    <!-- form here -->
{/exp:store:product}

This means the cart will be emptied immediately before adding the new product to it. This means it will work with your UX design, even if the customer hits back and changes their donation amount.

Answer 2

You're close. You'll need to have the return value on the empty cart form ('form.empty-cart' in my example below) change to the href for the anchor.

$(document).ready(function(){
  $('nav a').click(function(event){
    event.preventDefault();
    var link = $(this).attr('href');
    $('form.empty-cart input[name="RET"]').attr('value', link);
    $('#store input[name="empty_cart"]').trigger('click');
  });
});