Shopping Cart quantity increment / decrement using jquery
By Super Admin |
Oct 23, 2020 |
Laravel
Share :
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_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);
}
});
});