The ‘updateCartTotal’ function calculates and displays the cart total, the number of items in the cart, and the saved products in the cart table. The ‘addedToCart’ function provides feedback to the user when an item is added to the cart and the ’emptyCart’ function removes the cart data from session storage and refreshes the cart totals.
How to Create JavaScript Create Shopping Cart
Create the HTML structure as follows for the shopping cart:
<div class="container">
<h1>Simple JavaScript Shopping Cart</h1>
<p>Simplified 'add to cart' functionality. Uses Javascript
and WebStorage API/Cookies to remember cart data converted to JSON format.</p>
<p>Click 'Empty Cart' button to remove session cookies from browser.</p>
<div id="alerts"></div>
<div class="productcont">
<div class="product">
<h3 class="productname">Product 1</h3>
<p>Product description excerpt...</p>
<p class="price">$5.05</p>
<button class="addtocart">Add To Cart</button>
</div>
<div class="product">
<h3 class="productname">Product 2</h3>
<p>Product description excerpt...</p>
<p class="price">$8.50</p>
<button class="addtocart">Add To Cart</button>
</div>
<div class="product">
<h3 class="productname">Product 3</h3>
<p>Product description excerpt...</p>
<p class="price">$10.50</p>
<button class="addtocart">Add To Cart</button>
</div>
</div>
<div class="cart-container">
<h2>Cart</h2>
<table>
<thead>
<tr>
<th><strong>Product</strong></th>
<th><strong>Price</strong></th>
</tr>
</thead>
<tbody id="carttable">
</tbody>
</table>
<hr>
<table id="carttotals">
<tr>
<td><strong>Items</strong></td>
<td><strong>Total</strong></td>
</tr>
<tr>
<td>x <span id="itemsquantity">0</span></td>
<td>$<span id="total">0</span></td>
</tr></table>
<div class="cart-buttons">
<button id="emptycart">Empty Cart</button>
<button id="checkout">Checkout</button>
</div>
</div>
</div>
Now, style the shopping cart using the following CSS styles:
@import url('https://fonts.googleapis.com/css?family=Quicksand:400,700');
*, ::before, ::after { box-sizing: border-box; }
body{
font-family:'Quicksand', sans-serif;
text-align:center;
line-height:1.5em;
/* background:#E0E4CC; */
background: #69d2e7;
background: -moz-linear-gradient(-45deg, #69d2e7 0%, #a7dbd8 25%, #e0e4cc 46%, #e0e4cc 54%, #f38630 75%, #fa6900 100%);
background: -webkit-linear-gradient(-45deg, #69d2e7 0%,#a7dbd8 25%,#e0e4cc 46%,#e0e4cc 54%,#f38630 75%,#fa6900 100%);
background: linear-gradient(135deg, #69d2e7 0%,#a7dbd8 25%,#e0e4cc 46%,#e0e4cc 54%,#f38630 75%,#fa6900 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#69d2e7', endColorstr='#fa6900',GradientType=1 );
}
.cd__main{
display: block !important;
}
hr {
border:none;
background:#E0E4CC;
height:1px;
/* width:60%;
display:block;
margin-left:0; */
}
.container {
max-width: 800px;
margin: 1em auto;
background: aqua;
padding:30px;
border-radius:5px;
border: 2px solid silver;
width: 50%;
}
.productcont {
display: flex;
}
.product {
padding:1em;
border:1px solid #E0E4CC;
margin-right:1em;
border-radius:5px;
}
.cart-container {
border:1px solid #E0E4CC;
border-radius:5px;
margin-top:1em;
padding:1em;
}
button, input[type="submit"] {
border:1px solid #FA6900;
color:#fff;
background: #F38630;
padding:0.6em 1em;
font-size:1em;
line-height:1;
border-radius: 1.2em;
transition: color 0.2s ease-in-out, background 0.2s ease-in-out, border-color 0.2s ease-in-out;
}
button:hover, button:focus, button:active, input[type="submit"]:hover, input[type="submit"]:focus, input[type="submit"]:active {
background: #A7DBD8;
border-color:#69D2E7;
color:#000;
cursor: pointer;
}
h1, p{
margin: 15px 0;
}
table {
margin-bottom:1em;
border-collapse:collapse;
}
table td, table th {
text-align:left;
padding:0.25em 1em;
border-bottom:1px solid #E0E4CC;
}
#carttotals {
margin-right:0;
margin-left:auto;
}
.cart-buttons {
width:auto;
margin-right:0;
margin-left:auto;
display:flex;
justify-content:flex-end;
padding:1em 0;
}
#emptycart {
margin-right:1em;
}
table td:nth-last-child(1) {
text-align:right;
}
.message {
border-width: 1px 0px;
border-style:solid;
border-color:#A7DBD8;
color:#679996;
padding:0.5em 0;
margin:1em 0;
}
Finally, add the following JavaScript function for its functionality:
/* get cart total from session on load */
updateCartTotal();
/* button event listeners */
document.getElementById("emptycart").addEventListener("click", emptyCart);
var btns = document.getElementsByClassName('addtocart');
for (var i = 0; i < btns.length; i++) {
btns[i].addEventListener('click', function() {addToCart(this);});
}
/* ADD TO CART functions */
function addToCart(elem) {
//init
var sibs = [];
var getprice;
var getproductName;
var cart = [];
var stringCart;
//cycles siblings for product info near the add button
while(elem = elem.previousSibling) {
if (elem.nodeType === 3) continue; // text node
if(elem.className == "price"){
getprice = elem.innerText;
}
if (elem.className == "productname") {
getproductName = elem.innerText;
}
sibs.push(elem);
}
//create product object
var product = {
productname : getproductName,
price : getprice
};
//convert product data to JSON for storage
var stringProduct = JSON.stringify(product);
/*send product data to session storage */
if(!sessionStorage.getItem('cart')){
//append product JSON object to cart array
cart.push(stringProduct);
//cart to JSON
stringCart = JSON.stringify(cart);
//create session storage cart item
sessionStorage.setItem('cart', stringCart);
addedToCart(getproductName);
updateCartTotal();
}
else {
//get existing cart data from storage and convert back into array
cart = JSON.parse(sessionStorage.getItem('cart'));
//append new product JSON object
cart.push(stringProduct);
//cart back to JSON
stringCart = JSON.stringify(cart);
//overwrite cart data in sessionstorage
sessionStorage.setItem('cart', stringCart);
addedToCart(getproductName);
updateCartTotal();
}
}
/* Calculate Cart Total */
function updateCartTotal(){
//init
var total = 0;
var price = 0;
var items = 0;
var productname = "";
var carttable = "";
if(sessionStorage.getItem('cart')) {
//get cart data & parse to array
var cart = JSON.parse(sessionStorage.getItem('cart'));
//get no of items in cart
items = cart.length;
//loop over cart array
for (var i = 0; i < items; i++){
//convert each JSON product in array back into object
var x = JSON.parse(cart[i]);
//get property value of price
price = parseFloat(x.price.split('$')[1]);
productname = x.productname;
//add price to total
carttable += "<tr><td>" + productname + "</td><td>$" + price.toFixed(2) + "</td></tr>";
total += price;
}
}
//update total on website HTML
document.getElementById("total").innerHTML = total.toFixed(2);
//insert saved products to cart table
document.getElementById("carttable").innerHTML = carttable;
//update items in cart on website HTML
document.getElementById("itemsquantity").innerHTML = items;
}
//user feedback on successful add
function addedToCart(pname) {
var message = pname + " was added to the cart";
var alerts = document.getElementById("alerts");
alerts.innerHTML = message;
if(!alerts.classList.contains("message")){
alerts.classList.add("message");
}
}
/* User Manually empty cart */
function emptyCart() {
//remove cart session storage object & refresh cart totals
if(sessionStorage.getItem('cart')){
sessionStorage.removeItem('cart');
updateCartTotal();
//clear message and remove class style
var alerts = document.getElementById("alerts");
alerts.innerHTML = "";
if(alerts.classList.contains("message")){
alerts.classList.remove("message");
}
}
}
That’s all! hopefully, you have successfully created the JavaScript create shopping cart. If you have any questions or suggestions, feel free to comment below.
