Ad

Shopify AJAX - Update Total Price Of Line Item

- 1 answer

I have found into on how to change your quantity of items via AJAX on the cart page, and I have also found how to update the cart total via AJAX.

What I have not found is how to update the total line item price for each line item as you increase or decrease the quantity.

Here is the code I have thus far (not working) ...

jQuery.getJSON('/cart.js', function(cart) { $('#line-total-{{ item.id }}').html(Shopify.formatMoney(item.line_price).replace('$','£'))})

Any tips on what is wrong with my code?

Also this is within an onclick on a button if that helps.

Ad

Answer

Your code includes:

jQuery.getJSON('/cart.js', function(cart) { 
  $('#line-total-{{ item.id  }}').html(Shopify.formatMoney(item.line_price).replace('$','£'))})

The above will not work, as the Liquid-based {{ item.id }} will get dropped once into the page, never to change afterwards. (Most likely, the above code was included in a place where there was no Liquid variable named item in scope, so the rendered Javascript would have simply read $('#line-total-')

You'll need to use the Javascript cart object that is being given to your function. For example:

jQuery.getJSON('/cart.js', function(cart) { 
  for(var i=0; i<cart.items.length; i++){
    var item = cart.items[i];
    var price_element = $('#line-total-' + item.id)
    price_element.html(Shopify.formatMoney(item.line_price).replace('$','£'))})
  }
})

Hope this helps!

Ad
source: stackoverflow.com
Ad