Maison > Article > interface Web > Création d'un site Web de page produit de commerce électronique de baskets
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.
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.
Here's a quick look at the project structure:
Sneakers-Ecommerce/ ├── index.html ├── style.css └── script.js
To get started with the project, follow these steps:
Clone the repository:
git clone https://github.com/abhishekgurjar-in/Sneakers-Ecommerce.git
Open the project directory:
cd Sneakers-Ecommerce
Run the project:
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:
<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> <div class="container"> <nav> <div class="menu"> <img src="./images/icon-menu.svg" alt=""> </div> <div class="menu-content"> <img class="close-btn" 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="Création dun site Web de page produit de commerce électronique de baskets"> <img src="./images/Cr%C3%A9ation%20dun%20site%20Web%20de%20page%20produit%20de%20commerce%20%C3%A9lectronique%20de%20baskets.svg" alt="Création dun site Web de page produit de commerce électronique de baskets"> </div> <div class="header"> <a href="#">Collection</a> <a href="#">Men</a> <a href="#">Women</a> <a href="#">About</a> <a href="#">Contact</a> </div> <div class="profile-cart"> <img class="cart" src="./images/icon-cart.svg" alt="cart"> <img class="profile" src="./images/image-avatar.png" alt="profile-pic"> </div> <div class="cart-section"> <h3>Cart</h3> <hr> <div class="cart-content"></div> </div> </nav> <main> <div class="left-main"> <div class="main-img"> <img id="mainImage" src="./images/image-product-1.jpg" alt=""> </div> <div class="card-img"> <img class="thumbnail" src="./images/image-product-1-thumbnail.jpg" data-src="./images/image-product-1.jpg" alt=""> <img class="thumbnail" src="./images/image-product-2-thumbnail.jpg" data-src="./images/image-product-2.jpg" alt=""> <img class="thumbnail" src="./images/image-product-3-thumbnail.jpg" data-src="./images/image-product-3.jpg" alt=""> <img class="thumbnail" src="./images/image-product-4-thumbnail.jpg" data-src="./images/image-product-4.jpg" alt=""> </div> </div> <div class="right-main"> <h3>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>$125.00 <span>50%</span> </h2> <h5>$250.00</h5> <div class="addcart"> <button class="cart-amount"><img class="minus" src="./images/icon-minus.svg" alt=""> <span>1</span> <img class="plus" src="./images/icon-plus.svg" alt=""></button> <button class="add-to-cart"> <img src="./images/icon-cart.svg" alt=""> Add to Cart </button> </div> </div> </main> </div> <div class="footer"> <p>Made with ❤️ by Abhishek Gurjar</p> </div>
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; } .Création dun site Web de page produit de commerce électronique de baskets 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) { .Création dun site Web de page produit de commerce électronique de baskets img { width: 120px; } .header { display: none; } .menu{ display: block; } }
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 { if (itemCount > 1) { itemCount--; cartAmount.textContent = itemCount; } }); });
You can check out the live demo of the Sneakers E-commerce Product Page here.
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!
This project was inspired by a Frontend Mentor challenge, designed to hone skills in building e-commerce websites.
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!