This Vanilla JavaScript code snippet helps you to create E-commerce shopping card with product information. Each card comes with an image, text, price, and input buttons for quantity and “add to cart” functionality. The template function returns an HTML template for each card based on an index parameter that is used to generate the image URL.
Moreover, three loops are used to create and append the cards to three different containers in the HTML document. The plusLess function updates the quantity input value and removes the “add-active” class when the “-” button is clicked and the value is already at 1, or updates the value when the “+” button is clicked.
How to Create E-Commerce Shopping Cards in Vanilla JavaScript
First of all, load the Google fonts CSS and Box Icons CSS (for icons) by adding the following CDN links to the head tag of your webpage.
<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet"> <link href='https://cdn.jsdelivr.net/npm/boxicons@2.0.6/css/boxicons.min.css' rel='stylesheet'>
Now, create the containers in which cards will be generated dynamically as follows:
<div class="con-cards-1 con-cards"></div> <div class="con-cards-2 con-cards"></div> <div class="con-cards-3 con-cards"></div>
Style the cards using the following CSS styles:
body {
height: auto;
background: #F4F7F8;
overflow: auto;
color: rgb(var(--color));
width: 100%;
color: #1c1a26;
padding-top: 50px;
padding-bottom: 60px;
}
* {
list-style: none;
outline: none;
padding: 0;
margin: 0;
font-family: 'Roboto', sans-serif;
box-sizing: border-box;
}
.con-cards {
display: flex;
align-items: center;
justify-content: flex-start;
overflow: auto;
width: 100%;
padding-top: 10px;
padding-bottom: 30px;
padding-left: 20px;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
}
.con-cards:after {
content: '';
position: relative;
min-width: 50px;
height: 10px;
background: transparent;
}
.con-cards::-webkit-scrollbar {
height: 0px;
}
.card {
box-shadow: 0px 10px 30px 0px rgba(0,0,0,.05);
padding: 15px;
border-radius: 35px;
width: 260px;
min-width: 260px;
position: relative;
margin: 0px 15px;
background: #fff;
scroll-snap-align: center;
transition: all .25s ease;
border: 2px solid #fff;
}
.add-active {
/* transform: translate(0, -10px); */
box-shadow: 0px 10px 30px 0px rgba(254, 160, 26, .2);
border: 2px solid #fea01a;
}
.add-active .add {
display: none;
}
.add-active .con-image img:not(.bg) {
transform: scale(1.15);
}
.add-active .con-input-btns {
display: flex;
}
.con-star {
position: absolute;
right: 0px;
top: 0px;
margin: 30px;
font-size: 1.2rem;
}
.con-image {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
height: 200px;
border-radius: 30px;
background: #f5f5f5;
}
.con-image img {
width: 250px;
z-index: 20;
transition: all .25s ease;
}
.con-image .bg {
position: absolute;
transform: translate(10px, 30px);
z-index: 10;
filter: blur(20px);
opacity: .4;
}
.con-text {
width: 100%;
padding: 10px 0px;
opacity: .5;
font-size: .8rem;
}
.con-text h3 {
padding: 5px 0px;
}
.con-price {
width: 100%;
text-align: center;
font-weight: bold;
padding: 10px;
font-size: 1.1rem;
padding-top: 0px;
}
.add {
width: 100%;
padding: 15px;
background: linear-gradient(130deg, #fdc527 0%, #fea01a 100%);
border: 0px;
border-radius: 20px;
color: #fff;
font-weight: bold;
font-size: 1rem;
}
.con-input-btns {
display: flex;
align-items: center;
justify-content: center;
display: none;
}
.con-input-btns input {
padding: 10px;
flex: 1;
width: calc(100% - 100px);
height: 49px;
border: 0px;
border-bottom: 2px solid #f5f5f5;
text-align: center;
font-size: 1.3rem;
}
.con-input-btns button {
padding: 10px;
min-width: 49px;
height: 49px;
border: 0px;
border-radius: 20px;
background: linear-gradient(130deg, #fdc527 0%, #fea01a 100%);
color: #fff;
font-size: 1.4rem;
display: flex;
align-items: center;
justify-content: center;
transition: all .25s ease;
}
.con-input-btns button:active {
transform: scale(.8);
}
Finally, add the following JavaScript function to create shopping cards:
const images = 56
function template(index) {
return `
<div class="con-star">
<i class='bx bx-star'></i>
</div>
<div class="con-image">
<img class="img" src="https://raw.githubusercontent.com/luisDanielRoviraContreras/img/master/files/${index}.png" alt="">
<img class="bg" src="https://raw.githubusercontent.com/luisDanielRoviraContreras/img/master/files/${index}.png alt="">
</div>
<div class="con-text">
<h3>
Training shoes
</h3>
<p>
The Nike SuperRep Go shoes combine comfortable foam cushioning,
</p>
</div>
<div class="con-price">
129.99$
</div>
<div class="con-btn">
<Button onclick="handleAdd(event)" class="add">
Add to cart
</Button>
<div class="con-input-btns">
<Button onclick="plusLess(event, 'less')" class="less">
<i class='bx bx-minus' ></i>
</Button>
<input value="1" type="text">
<Button onclick="plusLess(event, 'plus')" class="plus">
<i class='bx bx-plus'></i>
</Button>
</div>
</div>
`
}
for (let index = 1; index < 20; index++) {
const element = document.createElement('div');
element.classList.add('card')
element.innerHTML = template(index)
document.querySelector('.con-cards-1').appendChild(element)
}
for (let index = 21; index < 40; index++) {
const element = document.createElement('div');
element.classList.add('card')
element.innerHTML = template(index)
document.querySelector('.con-cards-2').appendChild(element)
}
for (let index = 41; index < 56; index++) {
const element = document.createElement('div');
element.classList.add('card')
element.innerHTML = template(index)
document.querySelector('.con-cards-3').appendChild(element)
}
function handleAdd(event) {
const card = event.target.closest('.card')
card.classList.add('add-active')
console.log(card)
}
function plusLess(event, type) {
const card = event.target.closest('.card')
const input = card.querySelector('input')
let oldVal = Number(input.value)
if (type == 'less') {
if (oldVal == 1) {
card.classList.remove('add-active')
return
}
input.value = oldVal -= 1
} else {
input.value = oldVal += 1
}
}
That’s all! hopefully, you have successfully created E-Commerce shopping cards in Vanilla JavaScript. If you have any questions or suggestions, feel free to comment below.
