d
Topic
Posts:
12
Last edited December 23, 2015
g
1
upvotes

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

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

i
Replies
Jason Shopify Expert freakdesign.com.au
Posts:
7037
December 24, 2015
g
1
upvotes

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/

★ Winning Partner of the Build a Business competition. ★ http://freakdesign.com.au
Posts:
12
January 05, 2016

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 Member
Posts:
4
12 months ago

Any news about this topic?

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

Posts:
1
15 days ago

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.

Rajat Member
Posts:
12
6 days ago

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!

Rajat Member
Posts:
12
5 days ago

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.