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.

59 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
    Replies
    1. change the image address from thapa's images to your images

      Delete
  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
  30. It is fine, nonetheless evaluate the information and facts around this correct. Online Headshop

    ReplyDelete
  31. Kawaii cushion Thanks for taking the time to discuss this, I feel strongly about it and love learning more on this topic. If possible, as you gain expertise, would you mind updating your blog with extra information? It is extremely helpful for me.

    ReplyDelete
  32. The accessible shopping apparatuses and devices help you save a ton of time by assisting with better administration of your shopping. celebrity leather jackets

    ReplyDelete
  33. Everything has its value. Thanks for sharing this informative information with us. GOOD works! Boutique Locale

    ReplyDelete
  34. Wow what a Great Information about World Day its exceptionally pleasant educational post. a debt of gratitude is in order for the post. aesthetic phone case

    ReplyDelete
  35. I was wondering if anyone knows|Does anyone know} what happened to Dime Piece LA celebrity streetwear brand? I cannot check out on [url=https://dimepiecela.com/]Dimepiece LA store[/url]. I've read in Marie Claire that the brand was bought out by a UK-based hedge fund for $50 million. I've just bought the Dimepiece Winter Pom Pom Knit Cap from Ebay and absolutely love it xox Dimepiece Los Angeles

    ReplyDelete
  36. Afro-Birds Farm, African Grey Parrot for Sale. We offer Parrots to many families, Healthy male and female African Grey for Sale. Awesome companions and playmates. Home raised, not captive bred. Vaccinated, tamed.

    https://www.afrobirdsfarm.com
    https://afrobirdsfarm.com/Parrots.php
    https://afrobirdsfarm.com/About.php

    African Grey Parrot for Sale
    African Grey for Sale
    African Grey Parrot

    ReplyDelete
  37. To most people, shopping is an everyday activity. Most people do their shopping on daily basis. When going out for shopping, you need to have a bag to carry your shopping items. For a long time now, people have used plastic bags offered by stores as shopping bags. Although some of these plastic bags served the same purpose as shopping bags, they had a number of notable drawbacks. Scraper API Coupon Codes

    ReplyDelete
  38. Online shopping in India is becoming very trendy nowadays. The main advantage of online shopping is that people without leaving their house can browse through many items and categories, can compare the prices of as many shops as they want, and also can order as many items as they can afford. 泰國佛牌

    ReplyDelete
  39. Afro-Birds Farm, African Grey Parrot for Sale . We offer Parrots to many families, Healthy male and female African grey parrots available for sale. Parrots for sale
    , Awesome companions and playmates. Home raised, not captive bred. Vaccinated, tamed.

    African Grey Parrot for Sale
    African Grey for Sale
    African Grey Parrot
    African Grey for Sale
    Parrots for sale
    African Grey for sale
    Parrots for sale
    African Grey Parrot

    https://www.afrobirdsfarm.com
    https://afrobirdsfarm.com/About.php
    https://afrobirdsfarm.com/blogs.php
    https://afrobirdsfarm.com/Parrots.php
    https://afrobirdsfarm.com/Testimonials.php

    ReplyDelete
  40. Ecommerce management tools I would like to say that this blog really convinced me to do it! Thanks, very good post.

    ReplyDelete
  41. Keep in mind, as a fashion chief you are answerable for the picture of a brand; you produce something that the entire world will see. Individuals will put together their viewpoints with respect to what you present to them. As one of the top fashion occupations in the business, the pressing factor is on! roland deschain costume

    ReplyDelete
  42. An objection which I am given almost daily as I interact with prospects & talk to people about Social Media Marketing is "I have tried SM marketing before & it didn't work" In my opinion & experience there is huge value in social media but I am not deluded. I realise that not every business has found that it works very well for them or at least in the short term they didn't see a decent return on their investment, whether that investment came in the form of expenditure of the their time, money or both. Therefore they conclude... Marketing Blog

    ReplyDelete
  43. I am extremely impressed with your writing skills as well as with Kim Kardashian Leather Trench Coat the layout on your blog.

    ReplyDelete
  44. Online shopping is the process consumers go through to purchase products on internet. There are number of online shopping stores and online shopping malls, eshop, e-store, internet stop, web shop, are available over internet which gives option to buy or purchase products of your own choice. springfield saint edge rifle

    ReplyDelete