How to use plus (+) and minus (-) buttons to update the cart quantity

Tom_Perkins2
Tourist
12 0 1

Hi there,

I'm looking to use plus (+) and minus (-) buttons to update the cart quantity rather than the standard number text input with an update button.

Any tips on how to do this will be massively appreciated.

Thanks in advance,

Tom

Replies 13 (13)
Jason
Shopify Expert
10440 169 2081

Hey Tom,

The plus and minus field value interaction is done with JavaScript (and some css for general styling). If you're curious about approach there's an implemtation of it on this theme. I'd suggest that you install that and take a walk through the code seeing how it was put together.

I can't speak for code quality but if you're using jQuery there's also this jsFiddle for some inspiration:
http://jsfiddle.net/laelitenetwork/puJ6G/

I jump on these forums to help and share some insights. Not looking to be hired, and not looking for work.
Don't hand out staff invites or give admin password to forum members unless absolutely needed. In most cases the help you need can be handled without that.
★ http://freakdesign.com.au ★
Tom_Perkins2
Tourist
12 0 1

Thanks for your thoughts Jason, the code in the jsfiddle looks like it needs a little work to work with Shopify but I'll take a look at the code in the theme and see how I get on with that.

alemarengo
New Member
4 0 0

Any news about this topic?

It's really unbelievable that shopify doesn't have this kind of options... :|

Justin_Mulwee
Shopify Partner
1 0 2

I got it to work with a method mostly borrowed from that JS Fiddle above, but changed the code to make each button update the quantity on the correct item.

This HTML is part of my cart item loop:

    <div class="cart-quantity">
        <input type='button' value='-' class='qtyminus' field='updates_{{ item.id }}' />
        <input type="number" name="updates[]" id="updates_{{ item.id }}" class="quantity" value="{{ item.quantity }}" />
        <input type='button' value='+' class='qtyplus' field='updates_{{ item.id }}' />
    </div>

This jQuery makes it work:

jQuery(document).ready(function(){
    // This button will increment the value
    $('.qtyplus').click(function(e){
        // Stop acting like a button
        e.preventDefault();
        // Get the field name
        fieldName = $(this).attr('field');
        // Get its current value
        var currentVal = parseInt($('input[id='+fieldName+']').val());
        // If is not undefined
        if (!isNaN(currentVal)) {
            // Increment
            $('input[id='+fieldName+']').val(currentVal + 1);
        } else {
            // Otherwise put a 0 there
            $('input[id='+fieldName+']').val(0);
        }
    });
    // This button will decrement the value till 0
    $(".qtyminus").click(function(e) {
        // Stop acting like a button
        e.preventDefault();
        // Get the field name
        fieldName = $(this).attr('field');
        // Get its current value
        var currentVal = parseInt($('input[id='+fieldName+']').val());
        // If it isn't undefined or its greater than 0
        if (!isNaN(currentVal) && currentVal > 0) {
            // Decrement one
            $('input[id='+fieldName+']').val(currentVal - 1);
        } else {
            // Otherwise put a 0 there
            $('input[id='+fieldName+']').val(0);
        }
    });
});

You will of course need to style the buttons and inputs with CSS.

Rajat1
Tourist
15 0 1

Hello Justin Mulwee,

Does your price changes automatically when adding products using this quantity selector, I just wanted to know cause I just implemented in my shop and then input number is changing but the price stays the same.

Can you help?

Thank you!

Rajat1
Tourist
15 0 1

Hello Jason,

I pasted Justin Mulwee's code and the input number changes but the cart is not updated, nor price, any clues?

Thank you.

ben33
Shopify Partner
6 0 2

Any updates on this? Didn't work for me as well. Where do I put the jquery code and whats the CSS to make it look nice?

Alex178
New Member
1 0 0

I found no working solution online so I thought I would share this.

I wrapped the selector into the div class "mobileqty" to have controll over the styling in the mobile version via css but you can leave it out.

I am working with the debut theme and have copied it inbetween {% if section.settings.show_quantity_selector %} and {% endif %}, deleting the old quantity form that used to be there. The file is product-template.liquid

<!--   Quantity Selector   --> 
    <div class="mobileqty">
    <input type='button' value='-' class='qtyminus' field='quantity' onclick="TextBox_AddToIntValue('product-quantity-{{product.id}}',-1)" />
    
      <input type='text' name='quantity' value='1' class='qty' id="product-quantity-{{product.id}}"/>
    
    <input type='button' value='+' class='qtyplus' field='quantity' onclick="TextBox_AddToIntValue('product-quantity-{{product.id}}',+1)" />
            </div>
   <script>
jQuery(document).ready(function(){
    // This button will increment the value
    $('.qtyplus').click(function(e){
        // Stop acting like a button
        e.preventDefault();
        // Get the field name
        fieldName = $(this).attr('field');
        // Get its current value
        var currentVal = parseInt($('input[name='+fieldName+']').val());
        // If is not undefined
        if (!isNaN(currentVal)) {
            // Increment
            $('input[name='+fieldName+']').val(currentVal + 1);
        } else {
            // Otherwise put a 0 there
            $('input[name='+fieldName+']').val(0);
        }
    });
    // This button will decrement the value till 0
    $(".qtyminus").click(function(e) {
        // Stop acting like a button
        e.preventDefault();
        // Get the field name
        fieldName = $(this).attr('field');
        // Get its current value
        var currentVal = parseInt($('input[name='+fieldName+']').val());
        // If it isn't undefined or its greater than 0
        if (!isNaN(currentVal) && currentVal > 0) {
            // Decrement one
            $('input[name='+fieldName+']').val(currentVal - 1);
        } else {
            // Otherwise put a 0 there
            $('input[name='+fieldName+']').val(0);
        }
    });
});
   </script>
              
            <!--   //Quantity Selector   -->   

 

Raniel_Rillon
Shopify Partner
38 0 0

use TIMBER CODES.. check the timber themes and troubleshoot how it works. to make this possible..  im using it heheh