THAPA TECHNICAL

HOUSE OF WEB DEVELOPERS AND TECHNOLOGY.

Responsive E-Commerce Shopping Cart Page in JavaScript & Bootstrap 5 in Hindi in 2020

Responsive E-Commerce Shopping Cart Page in JavaScript & Bootstrap 5 in Hindi in 2020 


Welcome, we will see how to create an E-Commerce Add to Cart / Shopping Cart Page using Javascript and Bootstrap 5. we will code everything from scratch step by step to achieve the add to cart functionality using only JavaScript and Bootstrap 5. Yes, because now we all know that the jQuery is no more supported in Bootstrap 5 so it fine. 

Here is the complete video on Responsive E-Commerce Shopping Cart Page in JavaScript & Bootstrap 5 in Hindi in 2020 



What is the prerequisite to code a responsive e-commerce shopping cart page using JavaScript and Bootstrap 5 in 2020?
1: Boostrap 5 Manual / CDN links
          => from here you can get both Bootstrap 5 Click here

2: Font Awesome ver 5.0
=> from here you can get the Font Awesome 5.0 CDN link Click Here
          => Click here to visit the official page of Font Awesome Page Font Awesome

3: Google Fonts for website
          => Click here for official Google Font Website Google Font


Alright, now you have everything with you. We will start Coding E-Commerce Shopping Cart using JavaScript and Bootstrap 5 in 2020

First, we have our Cart.html page


<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css" integrity="sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.0/css/all.min.css" integrity="sha512-PgQMlq+nqFLV4ylk1gwUOgm6CtIIXkKwaIHp/PAIWHzig/lKZSEGKEysh0TCVbHJXCLN7WetD8TFecIky75ZfQ==" crossorigin="anonymous" />
<link rel="stylesheet" type="text/css" href="css/style.css">
<title>ThapaCart</title>
</head>
<body class="bg-light">
<div class="container-fluid">
<div class="row">
<div class="col-md-10 col-11 mx-auto">
<div class="row mt-5 gx-3">
<!-- left side div -->
<div class="col-md-12 col-lg-8 col-11 mx-auto main_cart mb-lg-0 mb-5 shadow">
<div class="card p-4">
<h2 class="py-4 font-weight-bold">Cart (2 items)</h2>
<div class="row">
<!-- cart images div -->
<div class="col-md-5 col-11 mx-auto bg-light d-flex justify-content-center align-items-center shadow product_img">
<img src="images/img2.png" class="img-fluid" alt="cart img">
</div>



<!-- cart product details -->
<div class="col-md-7 col-11 mx-auto px-4 mt-2">
<div class="row">
<!-- product name  -->
<div class="col-6 card-title">
<h1 class="mb-4 product_name">Blue Zara Shirt</h1>
<p class="mb-2">SHIRT - BLUE</p>
<p class="mb-2">COLOR: BLUE</p>
<p class="mb-3">SIZE: M</p>
</div>
<!-- quantity inc dec -->
<div class="col-6">
<ul class="pagination justify-content-end set_quantity">
<li class="page-item">
<button class="page-link " onclick="decreaseNumber('textbox','itemval')">
<i class="fas fa-minus"></i> </button>
</li>
<li class="page-item"><input type="text" name="" class="page-link" value="0" id="textbox" >
</li>
<li class="page-item">
<button class="page-link" onclick="increaseNumber('textbox','itemval')"> <i class="fas fa-plus"></i></button>
</li>
</ul>
</div>
</div>
<!-- //remover move and price -->
<div class="row">
<div class="col-8 d-flex justify-content-between remove_wish">
<p><i class="fas fa-trash-alt"></i> REMOVE ITEM</p>
<p><i class="fas fa-heart"></i>MOVE TO WISH LIST </p>
</div>
<div class="col-4 d-flex justify-content-end price_money">
<h3>$<span id="itemval">0.00 </span></h3>
</div>
</div>
</div>
</div>
</div>
<hr/>
<!-- 2nd cart product -->
<div class="card p-4">
<div class="row">
<!-- cart images div -->
<div class="col-md-5 col-11 mx-auto bg-light d-flex justify-content-center align-items-center shadow product_img">
<img src="images/img3.png" class="img-fluid" alt="cart img">
</div>



<!-- cart product details -->
<div class="col-md-7 col-11 mx-auto px-4 mt-2">
<div class="row">
<!-- product name  -->
<div class="col-6 card-title">
<h1 class="mb-4 product_name">Green Zara Shirt</h1>
<p class="mb-2">SHIRT - Green</p>
<p class="mb-2">COLOR: Green</p>
<p class="mb-3">SIZE: M</p>
</div>
<!-- quantity inc dec -->
<div class="col-6">
<ul class="pagination justify-content-end set_quantity">
<li class="page-item">
<button class="page-link " onclick="decreaseNumber('textbox1','itemval1')"> <i class="fas fa-minus"></i> </button>
</li>
<li class="page-item"><input type="text" name="" class="page-link" value="0" id="textbox1" >
</li>
<li class="page-item">
<button class="page-link" onclick="increaseNumber('textbox1','itemval1')"> <i class="fas fa-plus"></i></button>
</li>
</ul>
</div>
</div>
<!-- //remover move and price -->
<div class="row">
<div class="col-8 d-flex justify-content-between remove_wish">
<p><i class="fas fa-trash-alt"></i> REMOVE ITEM</p>
<p><i class="fas fa-heart"></i>MOVE TO WISH LIST </p>
</div>
<div class="col-4 d-flex justify-content-end price_money">
<h3>$<span id="itemval1">0.00 </span> </h3>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- right side div -->
<div class="col-md-12 col-lg-4 col-11 mx-auto mt-lg-0 mt-md-5">
<div class="right_side p-3 shadow bg-white">
<h2 class="product_name mb-5">The Total Amount Of</h2>
<div class="price_indiv d-flex justify-content-between">
<p>Product amount</p>
<p>$<span id="product_total_amt">0.00</span></p>
</div>
<div class="price_indiv d-flex justify-content-between">
<p>Shipping Charge</p>
<p>$<span id="shipping_charge">50.0</span></p>
</div>
<hr />
<div class="total-amt d-flex justify-content-between font-weight-bold">
<p>The total amount of (including VAT)</p>
<p>$<span id="total_cart_amt">0.00</span></p>
</div>
<button class="btn btn-primary text-uppercase">Checkout</button>
</div>
<!-- discount code part -->
<div class="discount_code mt-3 shadow">
<div class="card">
<div class="card-body">
<a class="d-flex justify-content-between" data-toggle="collapse" href="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
Add a discount code (optional)
<span><i class="fas fa-chevron-down pt-1"></i></span>
</a>
<div class="collapse" id="collapseExample">
<div class="mt-3">
<input type="text" name="" id="discount_code1" class="form-control font-weight-bold" placeholder="Enter the discount code">
<small id="error_trw" class="text-dark mt-3">code is thapa</small>
</div>
<button class="btn btn-primary btn-sm mt-3" onclick="discount_code()">Apply</button>
</div>
</div>
</div>
</div>



<!-- discount code ends -->
<div class="mt-3 shadow p-3 bg-white">
<div class="pt-4">
<h5 class="mb-4">Expected delivery date</h5>
<p>July 27th 2020 - July 29th 2020</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- Popper.js first, then Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js" integrity="sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/" crossorigin="anonymous"></script>

<script type="text/javascript">

var product_total_amt = document.getElementById('product_total_amt');
var shipping_charge = document.getElementById('shipping_charge');
var total_cart_amt = document.getElementById('total_cart_amt');
var discountCode = document.getElementById('discount_code1');
const decreaseNumber = (incdec, itemprice) => {
var itemval = document.getElementById(incdec);
var itemprice = document.getElementById(itemprice);
console.log( itemprice.innerHTML);
// console.log(itemval.value);
if(itemval.value <= 0){
itemval.value = 0;
alert('Negative quantity not allowed');
}else{
itemval.value = parseInt(itemval.value) - 1;
itemval.style.background = '#fff';
itemval.style.color = '#000';
itemprice.innerHTML  = parseInt(itemprice.innerHTML) - 15;
product_total_amt.innerHTML  = parseInt(product_total_amt.innerHTML) - 15;
total_cart_amt.innerHTML  = parseInt(product_total_amt.innerHTML) + parseInt(shipping_charge.innerHTML);
}
}
const increaseNumber = (incdec, itemprice) => {
var itemval = document.getElementById(incdec);
var itemprice = document.getElementById(itemprice);
// console.log(itemval.value);
if(itemval.value >= 5){
itemval.value = 5;
alert('max 5 allowed');
itemval.style.background = 'red';
itemval.style.color = '#fff';
}else{
itemval.value = parseInt(itemval.value) + 1;
itemprice.innerHTML  = parseInt(itemprice.innerHTML ) + 15;
product_total_amt.innerHTML  = parseInt(product_total_amt.innerHTML) + 15;
total_cart_amt.innerHTML  = parseInt(product_total_amt.innerHTML) + parseInt(shipping_charge.innerHTML);
}
}
const  discount_code = () => {
let totalamtcurr = parseInt(total_cart_amt.innerHTML);
let error_trw = document.getElementById('error_trw');
if(discountCode.value === 'thapa'){
let newtotalamt = totalamtcurr - 15;
total_cart_amt.innerHTML = newtotalamt;
error_trw.innerHTML = "Hurray! code is valid";
}else{
error_trw.innerHTML = "Try Again! Valid code is thapa";
}
}
</script>
</body>
</html>



Now, we will code our style.css page

@import url('https://fonts.googleapis.com/css2?family=Mulish:wght@300&display=swap'); * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Mulish', sans-serif; } :root { --text-clr: #4f4f4f; } p { color: #6c757d; } a { text-decoration: none; color: var(--text-clr); } a:hover { text-decoration: none; color: var(--text-clr); } h2 { color: var(--text-clr); font-size: 1.5rem; } .main_cart { background: #fff; } .card { border: none; } .product_img img { min-width: 200px; max-height: 200px; } .product_name { color: black; font-size: 1.4rem; text-transform: capitalize; font-weight: 500; } .card-title p { font-size: 0.9rem; font-weight: 500; } .remove-and-wish p { font-size: 0.8rem; margin-bottom: 0; } .price-money h3 { font-size: 1rem; font-weight: 600; } .set_quantity { position: relative; } .set_quantity::after { content: "(Note, 1 piece)"; width: auto; height: auto; text-align: center; position: absolute; bottom: -20px; right: 1.5rem; font-size: 0.8rem; } .page-link { line-height: 16px; width: 45px; font-size: 1rem; display: flex; justify-content: center; align-items: center; color: #495057; } .page-item input { line-height: 22px; padding: 3px; font-size: 15px; display: flex; justify-content: center; align-items: center; text-align: center; } .page-link:hover { text-decoration: none; color: #495057; outline: none !important; } .page-link:focus { box-shadow: none; } .price_indiv p { font-size: 1.1rem; } .fa-heart:hover { color: red; }

Hurray! we are done with our awesome E-Commerce Shopping Cart Code using JavaScript in 2020. Don't forget to share the video and the code with your friends on all the social networking sites.

Have a Good Day. Tc.

19 comments:

  1. file ko zip bana kar de dene se jayda esy hoga,,,,,

    ReplyDelete
    Replies
    1. https://drive.google.com/file/d/1_YolLOIUYApaBWrppTZQ4hS-kxyU_NL7/view?usp=sharing

      Delete
  2. Replies
    1. https://drive.google.com/file/d/1_YolLOIUYApaBWrppTZQ4hS-kxyU_NL7/view?usp=sharing

      Delete
  3. Excellent Blog! I would Thanks for sharing this wonderful content.its very useful to us.I gained many unknown information, the way you have clearly explained is really fantastic.keep posting such useful information.

    JavaScript Interview Question & Answers

    ReplyDelete
  4. I love this setup so much. I would like to tell you that Ela Enterprise is producing box dolly for your catering business or your kitchen. Now you can easily buy the best quality dollies, racks, and carts at a low price from Ela Enterprise.

    ReplyDelete
  5. kaushubhsharma098@gmail.com sir code work nhi kr rha

    ReplyDelete
  6. wow, great, I was wondering how to cure acne naturally. and found your site by google, learned a lot, now i’m a bit clear. I’ve bookmark your site and also add rss. keep us updated. top global coffee regions

    ReplyDelete
  7. You should simply discover the site offering the specific item you need and get it on the web. The installment is likewise done online much of the time with the assistance of charge cards.hot uk deals

    ReplyDelete
  8. This is incredible news for us, as San Franciscans love their espresso. coffee growing regions

    ReplyDelete
  9. sir how can we get the images

    ReplyDelete