Building a Sneakers E-commerce Product Page Website
Introduction
Hello, fellow developers! Today, I'm excited to share a project I recently completed: a Sneakers E-commerce Product Page Website. This project allows users to view product details, switch between product images, and manage their cart, all in a visually appealing and responsive interface. It's a great way to practice building an interactive e-commerce page with dynamic content.
Project Overview
The Sneakers E-commerce Product Page is designed to showcase a product and provide an intuitive shopping experience. Users can navigate through product images, adjust the quantity of the product they wish to purchase, and add it to their cart. This project is perfect for developers who want to improve their front-end skills, particularly in building responsive, interactive user interfaces.
Features
- Responsive Navigation: A responsive navigation menu that adapts to different screen sizes, providing a seamless experience across devices.
- Product Gallery: Allows users to switch between different product images, giving them a detailed view of the sneakers.
- Cart Functionality: Users can add products to their cart and view the cart's contents in real-time, enhancing the shopping experience.
- Interactive Buttons: Includes buttons for increasing or decreasing the product quantity and adding items to the cart, making the user interface more dynamic and user-friendly.
Technologies Used
- HTML: Used for structuring the content on the webpage.
- CSS: Applied for styling the webpage and ensuring it is responsive across various devices.
- JavaScript: Implemented for handling user interactions, such as updating the cart and switching product images.
Project Structure
Here's a quick look at the project structure:
Sneakers-Ecommerce/ ├── index.html ├── style.css └── script.js
- index.html: Contains the HTML structure of the webpage.
- style.css: Holds the CSS styles, including responsive design rules.
- script.js: Handles the dynamic aspects of the page using JavaScript.
Installation
To get started with the project, follow these steps:
-
Clone the repository:
git clone https://github.com/abhishekgurjar-in/Sneakers-Ecommerce.git
Copy after login -
Open the project directory:
cd Sneakers-Ecommerce
Copy after login -
Run the project:
- You can either run it on a local server or simply open the index.html file in a web browser.
Usage
- Open the website in a web browser.
- Navigate through the product images by clicking on the thumbnails below the main product image.
- Adjust the quantity of the product you wish to purchase using the plus and minus buttons.
- Add the product to the cart by clicking the "Add to Cart" button.
- View the cart's contents by clicking the cart icon, which displays the items you've added.
Code Explanation
HTML
The index.html file contains the structure of the webpage, including the navigation bar, product gallery, and cart section. Below is a snippet of the HTML code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Sneakers Ecommerce</title>
<link
href="https://fonts.googleapis.com/css?family=Kumbh+Sans:100,200,300,regular,500,600,700,800,900"
rel="stylesheet"
/>
<link rel="stylesheet" href="style.css" />
<script src="./script.js" defer></script>
</head>
<body>
<div class="container">
<nav>
<div class="menu">
<img src="/static/imghw/default1.png" data-src="./images/icon-menu.svg" class="lazy" alt="" />
</div>
<div class="menu-content">
<img class="close-btn lazy" src="/static/imghw/default1.png" data-src="./images/icon-close.svg" alt="" />
<div class="menu-header">
<a href="#">Collection</a>
<a href="#">Men</a>
<a href="#">Women</a>
<a href="#">About</a>
<a href="#">Contact</a>
</div>
</div>
<div class="Building a Sneakers E-commerce Product Page Website">
<img class="cart lazy" src="/static/imghw/default1.png" data-src="./images/icon-cart.svg" alt="Building a Sneakers E-commerce Product Page Website" />
</div>
<div>
<a href="#">Collection</a>
<a href="#">Men</a>
<a href="#">Women</a>
<a href="#">About</a>
<a href="#">Contact</a>
</div>
<div>
<img class="cart lazy" src="/static/imghw/default1.png" data-src="./images/icon-cart.svg" alt="cart" />
<img class="profile lazy" src="/static/imghw/default1.png" data-src="./images/image-avatar.png"
alt="profile-pic"
/>
</div>
<div class="cart-section">
<h3 id="Cart">Cart</h3>
<hr />
<div class="cart-content"></div>
</div>
</nav>
<main>
<div class="left-main">
<div class="main-img">
<img src="/static/imghw/default1.png" data-src="./images/image-product-1.jpg" class="lazy" id="mainImage" alt="" />
</div>
<div class="card-img">
<img class="thumbnail lazy" src="/static/imghw/default1.png" data-src="./images/image-product-1-thumbnail.jpg" data- alt="" />
<img class="thumbnail lazy" src="/static/imghw/default1.png" data-src="./images/image-product-2-thumbnail.jpg" data- alt="" />
<img class="thumbnail lazy" src="/static/imghw/default1.png" data-src="./images/image-product-3-thumbnail.jpg" data- alt="" />
<img class="thumbnail lazy" src="/static/imghw/default1.png" data-src="./images/image-product-4-thumbnail.jpg" data- alt="" />
</div>
</div>
<div class="right-main">
<h3 id="SNEAKER-COMPANY">SNEAKER COMPANY</h3>
<h1>
Fall Limited Edition <br />
Sneakers
</h1>
<p>
These low-profile sneakers are your perfect casual wear companion.
Featuring a durable rubber outer sole, they’ll withstand everything
the weather can offer.
</p>
<h2 id="span-span">$125.00 <span>50%</span></h2>
<h5 id="">$250.00</h5>
<div class="addcart">
<button class="cart-amount"><img class="minus lazy" src="/static/imghw/default1.png" data-src="./images/icon-minus.svg" alt=""> <span>1</span> <img class="plus lazy" src="/static/imghw/default1.png" data-src="./images/icon-plus.svg" alt=""></button>
<button class="add-to-cart">
<img src="/static/imghw/default1.png" data-src="./images/icon-cart.svg" class="lazy" alt="" /> Add to Cart
</button>
</div>
</div>
</main>
</div>
<div class="footer">
<p>Made with ❤️ by Abhishek Gurjar</p>
</div>
</body>
</html>
CSS
The style.css file contains styles that ensure the webpage is visually appealing and responsive. Here are some key styles:
* {
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
font-family: Kumbh Sans, sans-serif;
}
.container {
max-width: 1400px;
width: 100%;
margin: auto;
}
/* NAVBAR */
nav {
padding-inline: 30px;
padding-block: 30px;
padding-bottom: 40px;
width: 100%;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: space-around;
box-shadow: 0 0px 4px 0px rgba(0, 0, 0, 0.3);
}
.menu-content {
display: none;
padding-top: 80px;
position: fixed;
color: red;
margin-top: 1190px;
margin-right: 300px;
width: 400px;
height: 1400px;
background-color: rgb(203, 211, 218);
}
.menu-content img {
width: 20px;
margin-left: 350px;
margin-top: 0px;
}
.menu-header {
width: 100%;
height: 100%;
display: flex;
align-items: center;
flex-direction: column;
justify-content: flex-start;
}
.menu-content a {
margin: 20px;
text-decoration: none;
color: black;
}
.menu-content a:hover {
color: #ff7d1a;
}
.menu{
display: none;
}
.menu img {
width: 20px;
}
.Building a Sneakers E-commerce Product Page Website img {
width: 150px;
}
.header {
display: flex;
gap: 20px;
margin-right: 200px;
}
.header a {
text-decoration-line: none;
color: gray;
}
.header a:hover {
color: #ff7d1a;
}
.profile-cart {
display: flex;
align-items: center;
margin-right: 30px;
gap: 10px;
}
.cart {
width: 24px;
}
.profile {
width: 44px;
}
/* CART SECTION */
.cart-section {
position: fixed;
margin-top: 360px;
margin-left: 960px;
width: 400px;
background-color: aliceblue;
box-shadow: 0 0px 4px 0px rgba(0, 0, 0, 0.3);
display: none;
}
.cart-section h3 {
text-align: center;
font-size: 18px;
padding: 10px;
}
.cart-content {
height: 200px;
width: 100%;
background-color: #f7f8fd;
}
/* MAIN SECTION */
main {
margin-block: 50px;
margin-inline: 120px;
display: flex;
align-items: center;
gap: 20px;
}
.left-main {
width: 50%;
margin: 20px;
}
.main-img img {
width: 450px;
border-radius: 10px;
}
.card-img {
margin-block: 10px;
display: flex;
gap: 20px;
}
.card-img img {
width: 110px;
border-radius: 10px;
}
.right-main {
width: 50%;
margin: 60px;
}
.right-main h3 {
font-size: 20px;
margin: 20px;
color: rgb(255, 94, 0);
font-weight: 500;
}
.right-main h1 {
text-wrap: nowrap;
font-size: 50px;
margin: 20px;
padding-block: 20px;
}
.right-main p {
font-size: 16px;
margin: 20px;
padding-block: 10px;
}
.right-main h4 {
font-size: 16px;
margin: 20px;
padding-block: 10px;
}
.right-main h2 {
font-size: 29px;
margin: 20px;
padding-block: 10px;
}
.right-main h2 span {
font-size: 20px;
color: rgb(255, 94, 0);
background-color: rgb(242, 206, 180);
margin-left: 10px;
padding: 4px;
font-weight: 20px;
}
.right-main h5 {
margin: 20px;
font-size: 19px;
color: gray;
text-decoration: line-through;
}
.addCart {
margin: 20px;
}
.cart-amount {
display: flex;
align-items: center;
justify-content: center;
margin: 10px;
border: none;
font-size: 30px;
width: 100px;
padding: 4px;
background-color: #f7f8fd;
color: #ff7d1a;
box-shadow: 0 0px 4px 0px rgba(0, 0, 0, 0.3);
border-radius: 5px;
}
.cart-amount span {
font-size: 25px;
color: black;
}
.add-to-cart {
margin: 10px;
border: none;
font-size: 20px;
width: 300px;
padding: 14px;
background-color: #ff7d1a;
color: #f7f8fd;
border-radius: 7px;
box-shadow: 0 0px 4px 0px rgba(0, 0, 0, 0.3);
}
.add-to-cart img {
width: 20px;
}
.footer{
margin: 20px;
text-align: center;
}
@media (max-width: 700px) {
.Building a Sneakers E-commerce Product Page Website img {
width: 120px;
}
.header {
display: none;
}
.menu{
display: block;
}
}
JavaScript
The script.js file manages user interactions, such as toggling the cart display, switching product images, and updating the product quantity. Below is a snippet of the JavaScript code:
document.addEventListener("DOMContentLoaded", function () {
const cartBtn = document.querySelector(".cart");
const cartSection = document.querySelector(".cart-section");
const menuBtn = document.querySelector(".menu");
const hamburger = document.querySelector(".menu-content");
const closeBtn = document.querySelector(".close-btn");
const thumbnails = document.querySelectorAll(".thumbnail");
const mainImage = document.getElementById("mainImage");
const cartAmount = document.querySelector(".cart-amount span");
const addToCartBtn = document.querySelector(".add-to-cart");
let itemCount = 1; // Initial cart amount
const maxItems = 4; // Maximum items in cart
cartBtn.addEventListener("click", () => {
toggleCartSection();
});
menuBtn.addEventListener("click", () => {
hamburger.style.display = "block";
});
closeBtn.addEventListener("click", () => {
hamburger.style.display = "none";
});
thumbnails.forEach((thumbnail) => {
thumbnail.addEventListener("click", () => {
mainImage.src = thumbnail.getAttribute("data-src");
});
});
addToCartBtn.addEventListener("click", () => {
if (itemCount > 0) {
addToCart();
}
});
function toggleCartSection() {
if (cartSection.style.display === "none" || cartSection.style.display === "") {
cartSection.style.display = "block";
} else {
cartSection.style.display = "none";
}
}
function addToCart() {
// Logic to add item to cart section
const cartContent = document.querySelector(".cart-content");
const newItem = document.createElement("div");
newItem.textContent = ` ${itemCount} Fall Limited Edition
Sneakers Added Successfully`;
cartContent.appendChild(newItem);
itemCount = 1; // Reset cart amount after adding to cart
cartAmount.textContent = itemCount;
toggleCartSection(); // Close cart section after adding
}
// Increase cart amount
document.querySelector(".plus").addEventListener("click", () => {
if (itemCount < maxItems) {
itemCount++;
cartAmount.textContent = itemCount;
}
});
// Decrease cart amount
document.querySelector(".minus").addEventListener("click", () => {
if (itemCount > 1) {
itemCount--;
cartAmount.textContent = itemCount;
}
});
});
Live Demo
You can check out the live demo of the Sneakers E-commerce Product Page here.
Conclusion
Building this Sneakers E-commerce Product Page was an engaging experience that enhanced my understanding of responsive design and dynamic content management. I hope you find this project insightful and useful for your own web development journey. Feel free to explore the code and customize it to your liking. Happy coding!
Credits
This project was inspired by a Frontend Mentor challenge, designed to hone skills in building e-commerce websites.
Author
-
Abhishek Gurjar
- GitHub Profile
The above is the detailed content of Building a Sneakers E-commerce Product Page Website. For more information, please follow other related articles on the PHP Chinese website!
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
1669
14
1428
52
1329
25
1273
29
1256
24
A Comparison of Static Form Providers
Apr 16, 2025 am 11:20 AM
Let’s attempt to coin a term here: "Static Form Provider." You bring your HTML
A Proof of Concept for Making Sass Faster
Apr 16, 2025 am 10:38 AM
At the start of a new project, Sass compilation happens in the blink of an eye. This feels great, especially when it’s paired with Browsersync, which reloads
Weekly Platform News: HTML Loading Attribute, the Main ARIA Specifications, and Moving from iFrame to Shadow DOM
Apr 17, 2025 am 10:55 AM
In this week's roundup of platform news, Chrome introduces a new attribute for loading, accessibility specifications for web developers, and the BBC moves
Some Hands-On with the HTML Dialog Element
Apr 16, 2025 am 11:33 AM
This is me looking at the HTML element for the first time. I've been aware of it for a while, but haven't taken it for a spin yet. It has some pretty cool and
Paperform
Apr 16, 2025 am 11:24 AM
Buy or build is a classic debate in technology. Building things yourself might feel less expensive because there is no line item on your credit card bill, but
Where should 'Subscribe to Podcast' link to?
Apr 16, 2025 pm 12:04 PM
For a while, iTunes was the big dog in podcasting, so if you linked "Subscribe to Podcast" to like:
Options for Hosting Your Own Non-JavaScript-Based Analytics
Apr 15, 2025 am 11:09 AM
There are loads of analytics platforms to help you track visitor and usage data on your sites. Perhaps most notably Google Analytics, which is widely used
Weekly Platform News: Text Spacing Bookmarklet, Top-Level Await, New AMP Loading Indicator
Apr 17, 2025 am 11:26 AM
In this week's roundup, a handy bookmarklet for inspecting typography, using await to tinker with how JavaScript modules import one another, plus Facebook's
