Projects
Shopping Cart Functionality
The shopping cart functionality is necessary for any e-commerce platform. It provides users with a seamless experience for browsing, adding items, and managing their purchases, ensuring an intuitive and efficient customer shopping process.
HTML
The HTML provides the structural foundation of the shopping cart. It defines the layout with semantic elements, including:
- A header for the logo and cart Display.
- A container for product cards and a sidebar for cart details.
- Buttons for user actions like adding items to the cart.
It ensures a clear and organized structure, enabling easy styling and interaction.
<head>
<script src="https://kit.fontawesome.com/92d70a2fd8.js" crossorigin="anonymous"></script>
</head>
<body>
<div class="header">
<p class="logo">LOGO</p>
<div class="cart"><i class="fa-solid fa-cart-shopping"></i>
<p id="count">0</p>
</div>
</div>
<div class="container">
<div id="root"></div>
<div class="sidebar">
<div class="head">
<p>My Cart</p>
</div>
<div id="cartItem">Your cart is empty</div>
<div class="foot">
<h3>Total</h3>
<h2 id="total">$ 0.00</h2>
</div>
</div>
</div>
</body>
CSS
We use CSS to enhance the visual presentation, making the shopping cart attractive and responsive. Key aspects include:
- Grid Layouts are used to organize products neatly and accessiblely.
- Styling Buttons and Cards with hover effects for a dynamic user experience.
- The Design is Responsive to ensure compatibility with different devices.
The colors, spacing, and fonts are carefully chosen to maintain a professional and user-friendly interface.
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'poppins', sans-serif;
font-size: 18px;
}
body{
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
.header{
height: 80px;
width: 70%;
background-color: goldenrod;
border-radius: 3px;
margin: 30px 0px;
display: flex;
align-items: center;
justify-content: space-between;
padding: 15px;
}
.header .logo{
font-size: 30px;
font-weight: bold;
color: white;
}
.cart{
display: flex;
background-color: white;
justify-content: space-between;
align-items: center;
padding: 7px 10px;
border-radius: 3px;
width: 80px;
}
.fa-solid{
color: goldenrod;
}
.cart p{
height: 22px;
width: 22px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 22px;
background-color: goldenrod;
color: white;
}
.container{
display: flex;
width: 70%;
margin-bottom: 30px;
}
#root{
width: 60%;
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-gap: 20px;
}
.sidebar{
width: 40%;
border-radius: 5px;
background-color: #eee;
margin-left: 20px;
padding: 15px;
text-align: center;
}
.head{
background-color: goldenrod;
border-radius: 3px;
height: 40px;
padding: 10px;
margin-bottom: 20px;
color: white;
display: flex;
align-items: center;
}
.foot{
display: flex;
justify-content: space-between;
margin: 20px 0px;
padding: 10px 0px;
border-top: 1px solid #333;
}
.box{
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
border: 1px solid goldenrod;
border-radius: 5px;
padding: 15px;
}
.img-box{
width: 100%;
height: 180px;
display: flex;
align-items: center;
justify-content: center;
}
.images{
max-width: 90%;
max-height: 90%;
object-fit: cover;
object-position: center;
}
.bottom{
margin-top: 20px;
width: 100%;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
height: 110px;
}
h2{
font-size: 20px;
color: red;
}
button{
width: 100%;
position: relative;
border: none;
border-radius: 5px;
background-color: goldenrod;
padding: 7px 25px;
cursor: pointer;
color: white;
}
button:hover{
background-color: #333;
}
.cart-item{
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px;
background-color: white;
border-bottom: 1px solid #aaa;
border-radius: 3px;
margin: 10px 10px;
}
.row-img{
width: 50px;
height: 50px;
border-radius: 50px;
border: 1px solid goldenrod;
display: flex;
align-items: center;
justify-content: center;
}
.rowimg{
max-width: 43px;
max-height: 43px;
border-radius: 50%;
}
.fa-trash:hover{
cursor: pointer;
color: #333;
}JavaScript
Following JavaScript code brings interactivity to the shopping cart by:
- Managing product data dynamically using an array.
- Handling “Add to Cart” and “Remove from Cart” actions to update the cart in real-time.
- Calculating and displaying the total price and item count.
- Updating the cart view dynamically, ensuring seamless user interaction.
This combination of HTML, CSS, and JavaScript creates a fully functional shopping cart system with a responsive design and interactive features.
const product = [
{
id: 0,
image: 'image-path/gg-1.jpg',
title: 'Z Flip Foldable Mobile',
price: 120,
},
{
id: 1,
image: 'image-path/hh-2.jpg',
title: 'Air Pods Pro',
price: 60,
},
{
id: 2,
image: 'image-path/ee-3.jpg',
title: '250D DSLR Camera',
price: 230,
},
{
id: 3,
image: 'image-path/aa-1.jpg',
title: 'Head Phones',
price: 100,
}
];
const categories = [...new Set(product.map((item) => { return item }))]
let i = 0;
document.getElementById('root').innerHTML = categories.map((item) => {
var { image, title, price } = item;
return (
`<div class='box'>
<div class='img-box'>
<img class='images' src=${image}></img>
</div>
<div class='bottom'>
<p>${title}</p>
<h2>$ ${price}.00</h2>` +
"<button onclick='addtocart(" + (i++) + ")'>Add to cart</button>" +
`</div>
</div>`
)
}).join('')
var cart = [];
function addtocart(a) {
cart.push({ ...categories[a] });
displaycart();
}
function delElement(a) {
cart.splice(a, 1);
displaycart();
}
function displaycart() {
let j = 0, total = 0;
document.getElementById("count").innerHTML = cart.length;
if (cart.length == 0) {
document.getElementById('cartItem').innerHTML = "Your cart is empty";
document.getElementById("total").innerHTML = "$ " + 0 + ".00";
}
else {
document.getElementById("cartItem").innerHTML = cart.map((items) => {
var { image, title, price } = items;
total = total + price;
document.getElementById("total").innerHTML = "$ " + total + ".00";
return (
`<div class='cart-item'>
<div class='row-img'>
<img class='rowimg' src=${image}>
</div>
<p style='font-size:12px;'>${title}</p>
<h2 style='font-size: 15px;'>$ ${price}.00</h2>` +
"<i class='fa-solid fa-trash' onclick='delElement(" + (j++) + ")'></i></div>"
);
}).join('');
}
}Combining HTML for structure, CSS for styling, and JavaScript for interactivity results in a functional and engaging shopping cart system. It provides users with a seamless shopping experience, making it a valuable component of any e-commerce platform.
Watch Video on YouTube
How to create Shopping Cart Functionality?
Download The Source File
Get immediate access to the original source file with a simple click, and start customizing it to fit your needs.
HTML
CSS
JavaScript