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.

41 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
  10. I think this is an informative post and it is very useful and knowledgeable. therefore, I would like to thank you for the efforts you have made in writing this article. buying advice

    ReplyDelete
  11. With the advent of the internet, human life has become much easier. People use the internet to pay their monthly bills, to book travel tickets and for shopping. You can save a lot of time and energy by shopping through online. In online you can purchase anything you want by just sitting at home. eco-friendly products online

    ReplyDelete
  12. Excellent website! I adore how it is easy on my eyes it is. I am questioning how I might be notified whenever a new post has been made. Looking for more new updates. Have a great day! sviluppo siti web Milano

    ReplyDelete
  13. some ayurvedic herbs have nasty side effects too that is why you should carefully choose the safer ones. 토토사이트

    ReplyDelete
  14. I can’t really help but admire your blog. your blog is so adorable and nice .    파워볼사이트

    ReplyDelete
  15. Hello there, you web site is incredibly funny he informed me to cheer up .. Merry Christmas” 918kiss

    ReplyDelete
  16. The guidelines you provided here are really useful. It was such an enjoyable surprise to have that awaiting me as i woke up this very day. They are constantly to the point and easy to understand. Thanks for your time for the innovative ideas you’ve shared above. 먹튀검증커뮤니티

    ReplyDelete
  17. Yes i am totally agreed with this article and i just want say that this article is very nice and very informative article.I will make sure to be reading your blog more. You made a good point but I can't help but wonder, what about the other side? !!!!!!Thanks Automation in Fashion e-commerce

    ReplyDelete
  18. Having perused various articles and white papers committed to best work on shopping truck plan and convenience; beneath I have featured five potential plan issues in shopping trucks that I'm certain numerous clients have experienced. nemzetközi áruszállítás Europa-Road Kft.

    ReplyDelete
  19. Shopping is as old as human civilization. The trade is related to shopping, so in order to see the history of shopping, it is only wise to see how trade has evolved. https://toptoy365.creatorlink.net/

    ReplyDelete
  20. i use lamp shades with CFL ubls instead of incandescent lamps, they are much cooler and uses less electricity~ Ice Cream Nebraska Bakery

    ReplyDelete
  21. Vinid saab pr kisi ka reply krne ka bhi time nai hai

    ReplyDelete
  22. Your current positions constantly have got alot of really up to date info. Where do you come up with this? Just stating you are very innovative. Thanks again Pet Supplies

    ReplyDelete
  23. Shopping carts are provided by stores for customer use. Customers use shopping carts as a convenient way to collect merchandise as they shop around the store. The customers collect the desired merchandise in their cart and continue to the check-out stand to pay for their goods. Once they have gone through the check out line, customers transport the paid merchandise from their shopping cart to their cars Expressvpn black friday

    ReplyDelete
  24. With affluence growing in the country and the middle class prosperity doubling over the past few years, the spending on shopping has grown too. Online shopping has witnessed unprecedented growth. cockatoos

    ReplyDelete
  25. can i get same code with react + mysql

    ReplyDelete
  26. E-ticaret ile her türlü bilgiye ulaşabileceğiniz web sitemizde e-ticaret ile ilgili web sitesi kurulumu, yönetimi gibi konularda da aydınlatıcı makalelerimiz yayınlanmaktadır. e-ticaret nedir

    ReplyDelete
  27. Hello Thapa!I have question.From what did you take "incedec" and "itemprice"?

    ReplyDelete
  28. I have read a few of the articles on your website now, and I really like your style of blogging. I added it to my favorites blog site list and will be checking back soon. Please check out my site as well and let me know what you think. magento 2 m2e

    ReplyDelete

  29. 현재 수많은 온라인바카라사이트가 운영되고 있습니다.
    하지만 다 같은 바카라사이트가 아닙니다.
    무리하게 첫충전을 주고 쿠폰을 난발하여 유저를모아
    제대로 된 바카라사이트운영을 하지않고 먹튀 바카라사이트 를 운영한다 해도 무방합니다.
    우리카지노

    ReplyDelete