Quick Calculate Of Total Price In Cart Page With Bootstrap and jQuery

Other
File Size: 1.84 KB
Views Total: 1007 views
Last Update:October 20, 2021
Publish Date: October 20, 2021
Official Website: Go to website
License: MIT
Plugin Author: piyushpd
Demo    Download

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!

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


Mady

Mady Schaferhoff is an expert jQuery script at jQuerypost. He offers web development services to clients globally. He also loves sharing Html,CSS, jQuery knowledge through blog posts like this one.

Related jQuery Plugins