Contact US


Get Your Project Done by our experts
info@fundaofwebit.com

Shopping Cart quantity increment / decrement using jquery

Whatsapp

https://www.fundaofwebit.com/post/shopping-cart-quantity-increment-decrement-using-jquery

Shopping Cart quantity increment / decrement using jQuery


Here, in this post, we are going to cover the topic of how to make a shopping cart quantity increment and decrement functionality using jquery. Let's get started:

Step 1: Let's Paste the below code which is done by using Bootstrap v4.5 as follows:


    <td class="cart-product-quantity" width="130px">
        <div class="input-group quantity">
            <div class="input-group-prepend decrement-btn" style="cursor: pointer">
                <span class="input-group-text">-</span>
            </div>
            <input type="text" class="qty-input form-control" maxlength="2" max="10" value="1">
            <div class="input-group-append increment-btn" style="cursor: pointer">
                <span class="input-group-text">+</span>
            </div>
        </div>
    </td>


Step 2: Now let's paste the below code for functionality which we want to perform like number increment and decrement of the quantity as follows:


    $(document).ready(function () {

        $('.increment-btn').click(function (e) {
            e.preventDefault();
            var incre_value = $(this).parents('.quantity').find('.qty-input').val();
            var value = parseInt(incre_value10);
            value = isNaN(value) ? 0 : value;
            if(value<10){
                value++;
                $(this).parents('.quantity').find('.qty-input').val(value);
            }

        });

        $('.decrement-btn').click(function (e) {
            e.preventDefault();
            var decre_value = $(this).parents('.quantity').find('.qty-input').val();
            var value = parseInt(decre_value10);
            value = isNaN(value) ? 0 : value;
            if(value>1){
                value--;
                $(this).parents('.quantity').find('.qty-input').val(value);
            }
        });

    });

 


© Copyright - 2018 - 2021 | All rights reserved at Funda of Web IT