How to add quantity Button to cart page - Jumpstart Theme

New Member
2 0 0

Hello everyone. I really need help on this one.
I'm looking for adding minus and plus quantity button to my cart page.

To simplify the process of my discount offer. I have an offer on an item which is free when the customers buy 2 items.

I noticed they only try to add 2 items on the cart page, they struggled to do it. Because of the mobile phone, you have to tap the number then confirm, I need just two buttons to decrease and increase the count and update the price at the same time.

 

I saw some code to add, but it didn't work. I use Jumpstart theme.

 

Thank you in advance.

 

Thank you in advance.

0 Likes
Highlighted
Shopify Staff
Shopify Staff
406 44 69

Hey, @Safety97!

 

Lulu here from the Shopify Support team. Thanks for reaching out here, and I'll be more than happy to help you out.

 

I would love to help you out further with this. As you are using a free Shopify theme, our theme's team can help get this added for you. In order to do so, I will just need to verify your account. I will send you an email to the email address attached to this forums account and confirm some security questions about your store. Once you reply to that email, I will get your request sent up to them.

 

Speak soon,

Lulu

 

Lulu | Social Care @ Shopify
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Click Accept as Solution 

0 Likes

Hello 

 <label for="updates_{{ item.key }}" class="fallback-text">{{ 'cart.general.quantity' | t }}</label>
          <input class="count qty-remove-defaults" type="number" name="updates[]" id="updates_{{ item.key }}" value="{{ item.quantity }}" min="0" data-id="{{ item.key }}">

<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>

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);
        }
    });
});
                
Want to modify or incorporate custom changes on store, Hire us.
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Custom Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Digital Marketing | Site Speed Optimization | Web Development
0 Likes
New Member
2 0 0

Thanks for your precise advice @oscprofessional  it works, I can decrease and increase the quantity, but the price is not updated.
How can I update the price each time I click on minus or plus button, please?

 

0 Likes
New Member
1 0 0

I can't find the code

0 Likes