Javascript Shopping Cart for Beginners

Welcome to my blog ,In this article you can build a Javascript shopping cart for beginners.

Current Video Link:

if you want to watch more videos subscribe my YouTube channel click here

JavaScript Shopping Cart HTML

First we will create a index.html file add some basic structure of the HTML see in below:

<!DOCTYPE html>
<html lang="en" >
   <head>
      <meta charset="UTF-8">
      <title>shopping cart</title>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
      <link rel='stylesheet' href='https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css'>
      <link rel="stylesheet" href="./style.css">
   </head>
   <body></body>
</html>

After that we create a table in index.html and table having a headings (Product,Name,Qty,Price,Amount) and now add a only one row see in below:

<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="1.jpg">
                           </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>
                  <!---- add more tr  ---------->
                  inside here
                  <!---- add more 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>

In the above code have only one tr means first row of the table if you need more rows in table copy the below code and paste in above html.There have a comment in HTML file.

<tr>
   <td>
      <div class="product-img">
         <div class="img-prdct">
            <img src="2.jpg">
         </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="2.jpg">
         </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="2.jpg">
         </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>

Now html part is completed and we adding a style.css file in <head> tag of html right now working on style.css file copy the below code and directly paste in style.css.

JavaScript Shopping Cart 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%;
}

thead tr{
	background-color: #343A40;
    color: white;
}
.img-prdct{
	width:100px !important;
	height:100px !important;
}
.cart-qty-plus{
	background-color:#00a5e8;
	color:white;
	font-weight: 600;
}
.cart-qty-minus{
	background-color:#00a5e8;
	color:white;
	font-weight: 600;
}

Shopping cart styling part is completed.

After that add jquery and boostrap js cdn in the bottom of index.html. Make sure bootstrap cdn is add after that jquery otherwise its throwing a error and after that connect script.js ,Now working of shopping cart main script functionality.

<script src='https://code.jquery.com/jquery-3.4.1.min.js'></script>
<script src='https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js'></script>
<script  src="./script.js"></script>

And here is a brief description of each function that are used in script.js when document is ready then call a update_amounts() function the update amount function get quantity and price of each row exist in table and calculate total amount.

JavaScript Shopping Cart JS

$(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);
}

Now talk about quantity increment or decrement button. when click on increment button get current quantity add 1 plus in quantity or click on minus button 1 minus in current quantity and update_amounts() function call to update the amount see in below :

//----------------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();
});

Here is HTML ,CSS AND JAVASCRIPT part is completed if you like the article share with your friends.if you have any question or query related to article and have an any suggestions please post in comment box.

Thanks for reading the Article.

11 thoughts on “Javascript Shopping Cart for Beginners

  • April 2, 2021 at 4:56 am
    Permalink

    Cannot Run the program correctly for JavaScript Shopping Cart.
    increase and decrease Button are not working .

    Reply
    • April 3, 2021 at 2:35 am
      Permalink

      Code is proper working there are two types of error comes in this tutorial firstly please check our internet connection and other one is check your browser console. if you facing any issue then ping me again then I will fix this error in your code.

      Reply
      • April 3, 2021 at 9:43 pm
        Permalink

        hi . Thank you very much for your reply , only increase and decrease Button are still not working. I checked already browser console . there is no error . Could you hlep me please ?

        Reply
  • April 3, 2021 at 9:51 pm
    Permalink

    $(document).ready(function(){ <<<<<<———error shown in that line ******
    update_amounts();
    $('.qty, .price').on('keyup keypress blur change', function(e) {
    update_amounts();
    });
    });

    when i check in browser console , the error shown.
    error is as follow .
    —————————-
    shopping_cart.html:3 Uncaught ReferenceError: $ is not defined

    Which I have to change , Could you please suggest me ?

    Thank you.

    Reply
    • July 3, 2021 at 8:15 am
      Permalink

      you only copy sir’s code with help of video where is sir’s set the code and it’s working, problem solved.

      Reply
  • April 3, 2021 at 10:26 pm
    Permalink

    now error has disappeared when I loaded the jquery. But the program is not working and no error.
    Could you help me please?

    Reply
  • April 4, 2021 at 8:02 pm
    Permalink

    Wow. It is working properly . I change the to bottom of HTML. Thank you very much .
    🙂 🙂 🙂

    Reply
  • July 3, 2021 at 8:17 am
    Permalink

    sir i have a question
    when i select another product in this shopping cart so how it’s change automatically.

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *