This code snippet helps you to create an E-commerce grid layout card. It creates a shopping cart functionality on a web page. When the document is ready, the “init” variable is set to “No items yet!” and the “counter” variable is set to 0. The initial cart is then displayed with the “init” message using jQuery’s “.html()” method. A function named “addToBasket()” is defined to increase the “counter” variable by 1 and animate the cart counter to display the new value with a fade-out and fade-in effect.
A click event listener is added to all “button” elements on the page. When clicked, the “addToBasket()” function is called, and an animation is applied to the “.product_overlay” element, which displays a message that the product has been added to the cart. The message slides down with opacity 1 and transition ease-in-out .45s, then it fades out with a translate Y (-500px) and opacity 0 transition after a delay of 1500ms.
How to Create CSS Grid E-commerce Layout Cards
First of all, load the following assets into the head tag of your HTML document.
<link href='https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,700' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"> <meta name="viewport" content="width=device-width, initial-scale=1">
Create the HTML structure for the grid cards as follows:
<header>
<ul>
<i class='fa fa-shopping-cart'>
<span class='counter'></span>
</i>
</ul>
</header>
<div class='row'>
<div class='product--blue'>
<div class='product_inner'>
<img src='http://wellandgood.com/wp-content/uploads/2012/07/Nike-Free-30-Womens-Running-Shoe-511495_600_A.png' width='300'>
<p>Nike Air (Women)</p>
<p>Size 7</p>
<p>Price £199.99</p>
<button>Add to basket</button>
</div>
<div class='product_overlay'>
<h2>Added to basket</h2>
<i class='fa fa-check'></i>
</div>
</div>
<div class='product--orange'>
<div class='product_inner'>
<img src='http://wellandgood.com/wp-content/uploads/2012/07/Nike-Free-30-Womens-Running-Shoe-511495_600_A.png' width='300'>
<p>Nike Air (Men)</p>
<p>Size 10</p>
<p>Price £99.99</p>
<button>Add to basket</button>
</div>
<div class='product_overlay'>
<h2>Added to basket</h2>
<i class='fa fa-check'></i>
</div>
</div>
<div class='product--red'>
<div class='product_inner'>
<img src='http://wellandgood.com/wp-content/uploads/2012/07/Nike-Free-30-Womens-Running-Shoe-511495_600_A.png' width='300'>
<p>Nike Air (Women)</p>
<p>Size 8</p>
<p>Price £399.99</p>
<button>Add to basket</button>
</div>
<div class='product_overlay'>
<h2>Added to basket</h2>
<i class='fa fa-check'></i>
</div>
</div>
<div class='product--green'>
<div class='product_inner'>
<img src='http://wellandgood.com/wp-content/uploads/2012/07/Nike-Free-30-Womens-Running-Shoe-511495_600_A.png' width='300'>
<p>Nike Air (Men)</p>
<p>Size 11</p>
<p>Price £299.99</p>
<button>Add to basket</button>
</div>
<div class='product_overlay'>
<h2>Added to basket</h2>
<i class='fa fa-check'></i>
</div>
</div>
<div class='product--yellow'>
<div class='product_inner'>
<img src='http://wellandgood.com/wp-content/uploads/2012/07/Nike-Free-30-Womens-Running-Shoe-511495_600_A.png' width='300'>
<p>Nike Air (Women)</p>
<p>Size 11</p>
<p>Price £299.99</p>
<button>Add to basket</button>
</div>
<div class='product_overlay'>
<h2>Added to basket</h2>
<i class='fa fa-check'></i>
</div>
</div>
<div class='product--pink'>
<div class='product_inner'>
<img src='http://wellandgood.com/wp-content/uploads/2012/07/Nike-Free-30-Womens-Running-Shoe-511495_600_A.png' width='300'>
<p>Nike Air (Men)</p>
<p>Size 11</p>
<p>Price £299.99</p>
<button>Add to basket</button>
</div>
<div class='product_overlay'>
<h2>Added to basket</h2>
<i class='fa fa-check'></i>
</div>
</div>
<div>
Noe, style the grid cards using the following CSS styles:
@charset "UTF-8";
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Open Sans Condensed", sans-serif;
font-weight: 700;
}
html, body {
background: #EEE5E9;
}
header {
width: 95%;
display: flex;
justify-content: flex-end;
flex-flow: row wrap;
}
header ul {
padding: 1.2em 0 0.5em;
}
header span {
padding: 0 0 0 0.5em;
}
header span, header i {
color: #2B2D42;
}
header i:nth-of-type(2) {
cursor: pointer;
}
.row {
width: 100%;
justify-content: flex-start;
display: flex;
flex-flow: row wrap;
}
.product, .product--pink, .product--yellow, .product--green, .product--red, .product--orange, .product--blue {
box-shadow: 1px 5px 15px #CCC;
width: 15em;
height: auto;
border-radius: 3px;
padding: 2em;
margin: 1em;
overflow: hidden;
position: relative;
flex: auto;
}
.product--blue {
background: linear-gradient(-45deg, #92DCE5 50%, rgba(255, 255, 255, 0.5) 50%);
}
.product--orange {
background: linear-gradient(-45deg, #EF6F6C 50%, rgba(255, 255, 255, 0.5) 50%);
}
.product--red {
background: linear-gradient(-45deg, #E84855 50%, rgba(255, 255, 255, 0.5) 50%);
}
.product--green {
background: linear-gradient(-45deg, #70C1B3 50%, rgba(255, 255, 255, 0.5) 50%);
}
.product--yellow {
background: linear-gradient(-45deg, #E8DB7D 50%, rgba(255, 255, 255, 0.5) 50%);
}
.product--pink {
background: linear-gradient(-45deg, #FF386D 50%, rgba(255, 255, 255, 0.5) 50%);
}
.product img, .product--blue img, .product--orange img, .product--red img, .product--green img, .product--yellow img, .product--pink img {
max-width: 100%;
height: auto !important;
text-align: center;
}
.product_inner {
display: flex;
align-items: center;
flex-flow: column wrap;
}
.product_inner p {
color: rgba(255, 255, 255, 0.9);
}
.product_inner button {
border: 1px solid rgba(255, 255, 255, 0.5);
color: #FFF;
border-radius: 3px;
padding: 1em 3em;
margin: 1em 0 0 0;
background: none;
cursor: pointer;
transition: background ease-in 0.25s;
}
.product_inner button:hover {
background: white;
color: #2B2D42;
}
.product_inner button:before {
font-family: FontAwesome;
content: "";
color: #FFF;
position: absolute;
font-size: 1.5em;
margin: 0 -1.5em;
}
.product_inner button:hover:before {
color: #2B2D42;
}
.product_overlay {
background: rgba(255, 255, 255, 0.9);
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
right: 0;
transform: translateY(-500px);
opacity: 0;
display: flex;
flex-flow: column wrap;
justify-content: center;
align-items: center;
}
.product_overlay h2 {
color: rgba(43, 45, 66, 0.7);
font-size: 1.2em;
margin: 1em 0;
}
.product_overlay i {
color: rgba(43, 45, 66, 0.7);
font-size: 1.5em;
}
Load the following scripts before closing the body tag:
<script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src='//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.14/angular.min.js'></script>
Finally, add the following JavaScript function for its functionality:
$(function() {
"use strict"
var init = "No items yet!";
var counter = 0;
// Initial Cart
$(".counter").html(init);
// Add Items To Basket
function addToBasket() {
counter++;
$(".counter").html(counter).animate({
'opacity' : '0'
},300, function() {
$(".counter").delay(300).animate({
'opacity' : '1'
})
})
}
// Add To Basket Animation
$("button").on("click", function() {
addToBasket(); $(this).parent().parent().find(".product_overlay").css({
'transform': ' translateY(0px)',
'opacity': '1',
'transition': 'all ease-in-out .45s'
}).delay(1500).queue(function() {
$(this).css({
'transform': 'translateY(-500px)',
'opacity': '0',
'transition': 'all ease-in-out .45s'
}).dequeue();
});
});
});
That’s all! hopefully, you have successfully created CSS Grid E-commerce layout Cards. If you have any questions or suggestions, feel free to comment below.
