Javascript 网站上的购物车保存有关产品的信息_Javascript_Html_Css

Javascript 网站上的购物车保存有关产品的信息

javascript html css

Javascript 网站上的购物车保存有关产品的信息,javascript,html,css,Javascript,Html,Css,我正在做一个小网站来卖一些t恤衫。我现在被困在做手推车。我只是循环浏览这些项目以获取它们的信息，但是我的产品有它们的个人HTML文件，所以看起来像store/product_1。在这种情况下，我的迭代器不会保存，我只获得关于第一个产品的信息 "use strict"; let carts = document.querySelectorAll(".cart-button"); let products = [ { name: "t

我正在做一个小网站来卖一些t恤衫。我现在被困在做手推车。我只是循环浏览这些项目以获取它们的信息，但是我的产品有它们的个人HTML文件，所以看起来像store/product_1。在这种情况下，我的迭代器不会保存，我只获得关于第一个产品的信息

"use strict";

let carts = document.querySelectorAll(".cart-button");

let products = [
  {
    name: "t-shirt 1",
    tag: "tshirt1",
    price: 20,
    inCart: 0,
  },

  {
    name: "t-shirt 2",
    tag: "tshirt2",
    price: 30,
    inCart: 0,
  },

  {
    name: "t-shirt 3",
    tag: "tshirt3",
    price: 40,
    inCart: 0,
  },
];

for (let i = 0; i < carts.length; ++i) {
  carts[i].addEventListener("click", () => {
    cartQuantity(products[i]);
  });
}

function cartQuantity(product) {
  console.log("the products is", product);
  let productQuantity = localStorage.getItem("cartQuantity");
  productQuantity = parseInt(productQuantity);

  if (productQuantity) {
    localStorage.setItem("cartQuantity", productQuantity + 1);
  } else {
    localStorage.setItem("cartQuantity", 1);
  }

  setItems(product);
}

function setItems(product) {
  product.inCart = 1;

  let cartItems = {
    [product.tag]: product,
  };

  localStorage.setItem("productsInCart", JSON.stringify(cartItems));
}

$(".icon-btn").on("click", function (e) {
  e.preventDefault();
  $(".cart-container").toggleClass("cart_active");
});

我也是个哑巴，所以我跟着导游走

我需要购物车正常工作，所以在第二个产品上按add to cart后，我可以获得关于它的信息，与第三个产品相同，等等

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
    <link href="/CSS/style.css" rel="stylesheet">
    <link
        href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,600;0,800;1,100;1,200;1,300;1,600;1,800&display=swap"
        rel="stylesheet">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
        integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous">
    </script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
        integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous">
    </script>

    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
        integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous">
    </script>
    <script src="/Script/store.js" async></script>
</head>

<body id="cont">
    <header id="header-section">
        <h1 class="banner-header"><a class="banner-link" href="/HTML/main.html">either</a></h1>
    </header>
    <div class="menu">
        <ul class="nav-bar">
            <li class="nav-bar-item"><a class="item-link" href="/HTML/about.html">About Us</a></li>
            <li class="nav-bar-item"><a class="item-link" href="/HTML/store.html">Store</a></li>
            <li class="nav-bar-item"><a class="item-link" href="/HTML/faq.html">FAQ</a></li>
        </ul>
    </div>

    <div class="cart-container">
        <a href="#" class="icon-btn"></a>
        <div class="cart">
            <h2 class="cart-h">Cart</h2>
            <div class="items"></div>
            <div class="promo-field">
                <input class="promo-input" type="text" placeholder="promocode">
                <button class="promo-button">Confirm</button>
            </div>
        </div>
    </div>

    <div class="desc-container">
        <img class="preview-product-image" src="/Images/t_shirt_art.png" style="margin-right: 150px;">
        <div class=" desc-box">
            <h2>Product Name</h2>
            <div class="price-tag">
                <span class="price">20 USD</span>
            </div>
            <p class="desc-text">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
                dolore magna aliqua.
            </p>

            <div class="size-table">
                <button class="size">xs</button>
                <button class="size">s</button>
                <button class="size">m</button>
                <button class="size">l</button>
                <button class="size">xl</button>
                <button class="size">xxl</button>
                <button class="size">xxxl</button>
            </div>

            <div class="colors">
                <div class="color" style="background-color: #e1e851"></div>
                <div class="color" style="background-color: #8cd147"></div>
                <div class="color" style="background-color: #4a9ccf"></div>
                <div class="color" style="background-color: #661f45"></div>
                <div class="color" style="background-color: #1e2024"></div>
            </div>
            <button class="cart-button cart1">
                Add to cart
            </button>
        </div>
    </div>


    <footer id="footer_section">
        <div class="left-side">
            <h3 class="logo_text">either</h3>
        </div>
    </footer>

</body>

</html>

{tshirt1: {name: "t-shirt 1", tag: "tshirt1", price: 20, inCart: 1}}
tshirt1: {name: "t-shirt 1", tag: "tshirt1", price: 20, inCart: 1}
inCart: 1
name: "t-shirt 1"
price: 20
tag: "tshirt1"