Preventing page reload on cart change in /cart

Technical Q&A
1

I’m trying to update the users cart, when on the /cart page, without triggering a page reload.

In my template I have a button

<a
onclick="minusOne(event, '{{ routes.cart_change_url }}?line={{ item_index }}&quantity={{ item.quantity | minus: 1 }}')">
Minus One
</a>

And then I have a javascript function

function minusOne(event, args){
  // these seem to have no effect
  event.preventDefault()
  event.stopPropagation()
  console.log(args)
  // /cart/change?line=1&quantity=1
  $.post({
    url:args,
  })
}

The above, and the many other things I’ve tried in the past few days, always change the cart but cause the page to reload. I’d like to take care to update the UI myself.

An example where I’ve seen this successfully implemented is https://insulation4less.co.uk/cart

I’ve tried https://cartjs.org/ with no success. Maybe I did it wrong, or maybe it doesn’t offer what I thought it did, specifically on the /cart page.

Some clarification would be very appreciated.

2

This is something that would need to be seen live. We don’t know what extra code you have running, nor can we pull up the browser console to see errors.

For now, I would suggest you look at the browser console. There may be errors there that give you clues as to why your code isn’t running. Perhaps a conflict with something else, or maybe just a minor error in your own code.

3

The code is running - it is just triggering this unwanted reload and I can’t figure out why.

It might just be the default behavior that I’m trying to suppress. I am digging through the logs - and learning a bunch as I go.

As always, the waters are muddied by themes and modifications. I’d re-phrase my question to:

If you run a post request whilst at /cart with the following

/cart/change?line=1&quantity=1

Is it baked into Shopify that should trigger a reload?