Quick calculate of total price in cart page with help of plus minus button. it’s support with bootstrap 3/4/5. its work with some lines of code with jQuery and detailed shopping cart page is created with rows and columns to enhance the user experience and .. This can be a handy plugin that will benefit the website as well as the user. With the product name alongside, the product picture will give the buyers a view of the things they want to purchase. The quantity and price plus-minus buttons are handy while shopping online. The total amount of the items added helps the user to maintain their budget. The total amount of items added helps users keep their budget while purchasing products online. These are all great reasons why our shopping cart page with jQuery is perfect for anyone who wants to do more with their website!
Table of Contents
How to use :
Add in header jQuery Library with Bootstrap Library.
<script type="text/javascript" src="/cdn/jquery-1.12.4.min.js"></script>
<link rel="stylesheet" type="text/css" href="/cdn/bs4/bootstrap.min.css">
For better style with add code CSS.
<style type="text/css">
@import url('https://fonts.googleapis.com/css?family=Roboto');
body{
font-family: 'Roboto', sans-serif;
}
* {
margin: 0;
padding: 0;
}
i {
margin-right: 10px;
}
/*------------------------*/
input:focus,
button:focus,
.form-control:focus{
outline: none;
box-shadow: none;
}
.form-control:disabled, .form-control[readonly]{
background-color: #fff;
}
.table tr,
.table tr td{
vertical-align: middle;
}
.button-container{
display: flex;
align-items: center;
}
.button-container .form-control{
max-width: 80px;
text-align: center;
display: inline-block;
margin: 0px 5px;
}
#myTable .form-control{
width: auto;
display: inline-block;
}
.cart-qty-plus,
.cart-qty-minus{
width: 38px;
height: 38px;
background-color: #fff;
border: 1px solid #ced4da;
border-radius: .25rem;
}
.cart-qty-plus:hover,
.cart-qty-minus:hover{
background-color: #5161ce;
color: #fff;
}
.img-prdct{
width: 50px;
height: 50px;
/* background-color: #5161ce; */
border-radius: 4px;
}
.img-prdct img{
width: 100%;
}
</style>
Add Shopping Cart Layout with HTML code.
<div class="container-fluid mt-5">
<h2 class="mb-5 text-center">Shopping Cart</h2>
<div class="row justify-content-center">
<div class="col-md-8">
<div class="table-responsive">
<table id="myTable" class="table">
<thead>
<tr>
<th>Product</th>
<th>Name</th>
<th>Qty</th>
<th>Price</th>
<th class="text-right"><span id="amount" class="amount">Amount</span> </th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div class="product-img">
<div class="img-prdct"><img src="https://image.flaticon.com/icons/png/512/3144/3144467.png"></div>
</div>
</td>
<td>
<p>Product One</p>
</td>
<td>
<div class="button-container">
<button class="cart-qty-plus" type="button" value="+">+</button>
<input type="text" name="qty" min="0" class="qty form-control" value="0"/>
<button class="cart-qty-minus" type="button" value="-">-</button>
</div>
</td>
<td>
<input type="text" value="72" class="price form-control" disabled>
</td>
<td align="right">$ <span id="amount" class="amount">0</span></td>
</tr>
<tr>
<td>
<div class="product-img">
<div class="img-prdct"><img src="https://image.flaticon.com/icons/png/512/3144/3144467.png"></div>
</div>
</td>
<td>
<p>Product Two</p>
</td>
<td>
<div class="button-container">
<button class="cart-qty-plus" type="button" value="+">+</button>
<input type="text" name="qty" min="0" class="qty form-control" value="0"/>
<button class="cart-qty-minus" type="button" value="-">-</button>
</div>
</td>
<td>
<input type="text" value="125" class="price form-control" disabled>
</td>
<td align="right">$ <span id="amount" class="amount">0</span></td>
</tr>
<tr>
<td>
<div class="product-img">
<div class="img-prdct"><img src="https://image.flaticon.com/icons/png/512/3144/3144467.png"></div>
</div>
</td>
<td>
<p>Product Three</p>
</td>
<td>
<div class="button-container">
<button class="cart-qty-plus" type="button" value="+">+</button>
<input type="text" name="qty" min="0" class="qty form-control" value="0"/>
<button class="cart-qty-minus" type="button" value="-">-</button>
</div>
</td>
<td>
<input type="text" value="250" class="price form-control" disabled>
</td>
<td align="right">$ <span id="amount" class="amount">0</span></td>
</tr>
<tr>
<td>
<div class="product-img">
<div class="img-prdct"><img src="https://image.flaticon.com/icons/png/512/3144/3144467.png"></div>
</div>
</td>
<td>
<p>Product Four</p>
</td>
<td>
<div class="button-container">
<button class="cart-qty-plus" type="button" value="+">+</button>
<input type="text" name="qty" min="0" class="qty form-control" value="0"/>
<button class="cart-qty-minus" type="button" value="-">-</button>
</div>
</td>
<td>
<input type="text" value="300" class="price form-control" disabled>
</td>
<td align="right">$ <span id="amount" class="amount">0</span></td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="4"></td><td align="right"><strong>TOTAL = $ <span id="total" class="total">0</span></strong></td>
</tr>
</tfoot>
</table>
</div>
</div>
</div>
</div>
Add Shopping cart script.
// -----------------for-Shopping-cart-------------
$(document).ready(function(){
update_amounts();
$('.qty, .price').on('keyup keypress blur change', function(e) {
update_amounts();
});
});
function update_amounts(){
var sum = 0.0;
$('#myTable > tbody > tr').each(function() {
var qty = $(this).find('.qty').val();
var price = $(this).find('.price').val();
var amount = (qty*price)
sum+=amount;
$(this).find('.amount').text(''+amount);
});
$('.total').text(sum);
}
//----------------for quantity-increment-or-decrement-------
var incrementQty;
var decrementQty;
var plusBtn = $(".cart-qty-plus");
var minusBtn = $(".cart-qty-minus");
var incrementQty = plusBtn.click(function() {
var $n = $(this)
.parent(".button-container")
.find(".qty");
$n.val(Number($n.val())+1 );
update_amounts();
});
var decrementQty = minusBtn.click(function() {
var $n = $(this)
.parent(".button-container")
.find(".qty");
var QtyVal = Number($n.val());
if (QtyVal > 0) {
$n.val(QtyVal-1);
}
update_amounts();
});
Done
Thanks for make jQuery plugin is developed by piyushpd For more Helpfull for users, please check the demo page or visit the official website.
