Cart ajax quantity update .addItem

Solved
Highlighted
Tourist
3 1 0

Hi all,

I own a Shopify store that uses a popup cart before checkout. I am using the following code on the popup cart, in order to enable customers to increase or decrease the quantity of items in the cart:

 

<div class="input-group m-0">
  <input type="button" value="-" class="button-minus" data-field="quantity">
  <input id="{{ item.variant.id }}" type="number" step="1" max="" value="{{ item.quantity }}" name="quantity" class="quantity-field">
  <input type="button" value="+" class="button-plus" data-field="quantity" onclick="Shopify.addItem({{ item.variant.id }}, 1)">
</div>

 

 

As you might see I am using the Shopify.addItem() function when onclick is triggered in order to increase the amount of items per product in the cart.

 

Sadly I did not find any function to decrease the quantity so far... How can I realize the onclick to reduce the quantity? Or do I need some Jquery or so?

 

Thanks for helping out!

0 Likes
Highlighted
Shopify Partner
94 15 29

Hi,

Yes, you need to add some customer javascript functionality to do that.

PM me if you need help.

1 Like
Highlighted
Tourist
3 1 0

Hi so I already tried multiple commands, but I did not reach a success... This is the best I have. Probably there is a jQuery mistake...

  $('.input-group').on('click', '.button-minus', function(e) {
    e.preventDefault();
    var fieldName = $(e.target).data('field');
    var parent = $(e.target).closest('div');
    var currentVariant = parseInt(parent.find('input[name=' + fieldName + ']').attr('id'), 10);
    jQuery.post('/cart/change.js', { quantity: currentVal - 1, id: currentVariant });
    
  });

 

0 Likes
Highlighted
Tourist
3 1 0

This is an accepted solution.

I forgot the actual value line in the last post. But nothing changed. So it does not work

 

  $('.input-group').on('click', '.button-minus', function(e) {
    e.preventDefault();
    var fieldName = $(e.target).data('field');
    var parent = $(e.target).closest('div');
    var currentVal = parseInt(parent.find('input[name=' + fieldName + ']').val(), 10);
    var currentVariant = parseInt(parent.find('input[name=' + fieldName + ']').attr('id'), 10);
    jQuery.post('/cart/change.js', { quantity: currentVal - 1, id: currentVariant });
    
  });
0 Likes