Erstellen einer Sneakers-E-Commerce-Produktseiten-Website-CSS-Tutorial-php.cn

Building a Sneakers E-commerce Product Page Website

Introduction

Hello, fellow developers! Today, I'm excited to share a project I recently completed: aSneakers 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

TheSneakers E-commerce Product Pageis 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

Nach dem Login kopieren

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

Nach dem Login kopieren

Open the project directory:
```
cd Sneakers-Ecommerce
```
Nach dem Login kopieren
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 websitein a web browser.
Navigate through the product imagesby clicking on the thumbnails below the main product image.
Adjust the quantityof the product you wish to purchase using the plus and minus buttons.
Add the product to the cartby clicking the "Add to Cart" button.
View the cart's contentsby 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:

     Sneakers Ecommerce    
      
    Collection Men Women About Contact 
 
   
  Collection Men Women About Contact 
    
  Cart
 
 
 
 
     
      
 
  SNEAKER COMPANY
  Fall Limited Edition 
 Sneakers 
  These low-profile sneakers are your perfect casual wear companion. Featuring a durable rubber outer sole, they’ll withstand everything the weather can offer. 
 $125.00 50%
 $250.00
    
 
 
 
  Made with ❤️ by Abhishek Gurjar

Nach dem Login kopieren

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; } .Erstellen einer Sneakers-E-Commerce-Produktseiten-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) { .Erstellen einer Sneakers-E-Commerce-Produktseiten-Website img { width: 120px; } .header { display: none; } .menu{ display: block; } }

Nach dem Login kopieren

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; } }); });

Nach dem Login kopieren

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

Das obige ist der detaillierte Inhalt vonErstellen einer Sneakers-E-Commerce-Produktseiten-Website. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!