Shopping Cart quantity increment / decrement using jquery

By Super Admin | Oct 23, 2020 | Laravel

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_value, 10);
            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_value, 10);
            value = isNaN(value) ? 0 : value;
            if(value>1){
                value--;
                $(this).parents('.quantity').find('.qty-input').val(value);
            }
        });

    });