Création d'un site Web de page produit de commerce électronique de baskets-tutoriel CSS-php.cn

Table des matières

Cart

SNEAKER COMPANY

$125.00 50%

$250.00

Maison

interface Web

tutoriel CSS

Création d'un site Web de page produit de commerce électronique de baskets

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Aug 10, 2024 am 06:52 AM

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

Copier après la connexion

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

Copier après la connexion

Open the project directory:
```
cd Sneakers-Ecommerce
```
Copier après la connexion
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="Création dun site Web de page produit de commerce électronique de baskets">
          <img class="cart lazy"  src="/static/imghw/default1.png"  data-src="./images/icon-cart.svg"  alt="Création dun site Web de page produit de commerce électronique de baskets" />
        </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>

Copier après la connexion

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;

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

Copier après la connexion

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

Copier après la connexion

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

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!

Déclaration de ce site Web

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Outils d'IA chauds

Undresser.AI Undress

Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover

Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool

Images de déshabillage gratuites

Clothoff.io

Dissolvant de vêtements AI

Video Face Swap

Échangez les visages dans n'importe quelle vidéo sans effort grâce à notre outil d'échange de visage AI entièrement gratuit !

Afficher plus

Article chaud

Comment réparer KB5055612 ne parvient pas à s'installer dans Windows 10?

3 Il y a quelques semaines By DDD

<🎜>: Grow A Garden - Guide de mutation complet

3 Il y a quelques semaines By DDD

<🎜>: Bubble Gum Simulator Infinity - Comment obtenir et utiliser les clés royales

3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌

Mandragora: Whispers of the Witch Tree - Comment déverrouiller le grappin

3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌

Nordhold: Système de fusion, expliqué

3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌

Afficher plus

Outils chauds

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Afficher plus

Sujets chauds

Tutoriel Java

1668

Tutoriel CakePHP

1427

Tutoriel Laravel

1329

Tutoriel PHP

1273

Tutoriel C#

1256

Afficher plus

Related knowledge

Une comparaison des fournisseurs de formulaires statiques Apr 16, 2025 am 11:20 AM

Essayons de savoir un terme ici: "fournisseur de formulaire statique". Vous apportez votre HTML

Une preuve de concept pour rendre Sass plus rapidement Apr 16, 2025 am 10:38 AM

Au début d'un nouveau projet, la compilation SASS se produit en un clin d'œil. Cela se sent bien, surtout quand il est associé à BrowSersync, qui recharge

Actualités hebdomadaires de la plate-forme: attribut HTML Loading, les principales spécifications Aria et le passage de iframe à Shadow Dom Apr 17, 2025 am 10:55 AM

Dans cette semaine, le Roundup des nouvelles de la plate-forme, Chrome présente un nouvel attribut pour le chargement, les spécifications d'accessibilité pour les développeurs Web et la BBC Moves

Certains pratiques avec l'élément de dialogue HTML Apr 16, 2025 am 11:33 AM

C'est moi qui regarde l'élément HTML pour la première fois. J'en ai été conscient depuis un certain temps, mais il ne l'a pas encore pris pour un tour. Il a un peu cool et

Forme de papier Apr 16, 2025 am 11:24 AM

L'achat ou la construction est un débat classique de la technologie. Construire des choses vous-même peut être moins cher car il n'y a pas d'article de ligne sur votre facture de carte de crédit, mais

Où devrait «abonner au podcast» vers le lien? Apr 16, 2025 pm 12:04 PM

Pendant un certain temps, iTunes était le grand chien du podcasting, donc si vous avez lié "Abonnez-vous au podcast" pour aimer:

Options pour héberger vos propres analyses non-javascript Apr 15, 2025 am 11:09 AM

Il existe de nombreuses plates-formes d'analyse pour vous aider à suivre les données des visiteurs et d'utilisation sur vos sites. Peut-être plus particulièrement Google Analytics, qui est largement utilisé

Actualités de plate-forme hebdomadaire: bookmarklet d'espacement de texte, attente de haut niveau, nouvel indicateur de chargement d'ampli Apr 17, 2025 am 11:26 AM

Au cours de cette semaine, un Bookmarklet pratique pour inspecter la typographie, en utilisant Await pour bricoler comment les modules JavaScript s'importent, ainsi que Facebook & # 039; S

See all articles