产品删除后仍保留在本地存储中

问题描述 投票：0回答：1

cart.js

import {
  products
} from "../html/products.js";


export const cart = JSON.parse(localStorage.getItem('cart')) || [{}];


let cartHTML = "";
cart.forEach(x => {
  cartHTML += `<div class="product" data-product-id="${x.id}">
        <div class="image">
        <img class="img" src="${x.image}" alt="Product Image">
        </div>
        <div class="content">
            <h2>${x.name}</h2>
            <p>Price:Rs.${x.price} </p>
            <p>Quantity:<p id="quantity">${x.quantity}</p></p>
            <button class="update">update</button><button class="delete">delete</button>

            <br><br>
        </div>
        </div>`
});
document.querySelector(".totalHTML").innerHTML = cartHTML;

export function addToCart(event) {
  const ProductId = event.target.closest('.productParent').querySelector('.products').dataset.productId;
  const Product = products.find(product => product.id === ProductId);

  const dropDownElement = event.target.closest('.content').querySelector('.select');
  let selectedValue = Number(dropDownElement.value);

  const matchingProduct = cart.find(x => x.id === Product.id)
  if (matchingProduct) {
    document.querySelector(`.product[data-product-id="${ProductId}"] #quantity`) += selectedValue;
  } else if (Product) {
    Product.quantity = selectedValue;
    cart.push(Product);
    console.log("pushed");
  }
  localStorage.setItem('cart', JSON.stringify(cart));
};

const deleteBTNs = document.querySelectorAll('.delete');
deleteBTNs.forEach((x => {
  x.addEventListener("click", (e) => {
    const nearProduct = e.target.closest('.product')
    const ProductId = nearProduct.dataset.productId;
    console.log(nearProduct.dataset)
    const updatedCart = cart.filter(x => x.id !== ProductId)
    console.log(updatedCart)
    // localStorage.setItem("cart", JSON.stringify(updatedCart))
    nearProduct.remove();
    localStorage.setItem("cart", JSON.stringify(updatedCart));
    // console.log(JSON.parse(localStorage.getItem('cart')))
  })
}));

script.js（主脚本文件）

import {products} from"../html/products.js";
import {addToCart, toDelete, } from"../html/cart.js";


let productsHTML="";
products.forEach(x => {
productsHTML+=`
    <div class=productParent><div class="products" data-product-id="${x.id}">

    <div class="image">
        <img class="img"src="${x.image}" alt="">
    </div>
    <div class="content">
    <div class="productName">${x.name}</div>
    <div class="productPrice">Rs.${x.price}</div>
    <select name="number"  class="select" >
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
        <option value="6">6</option>
        <option value="7">7</option>
        <option value="8">8</option>
        <option value="9">9</option>
        <option value="10">10</option>
    </select>
    <button class="addtocart" >Add To Cart</button>
    </div>
</div>
</div>`
});
document.querySelector(".totalHTML").innerHTML=productsHTML;



const buttons = document.querySelectorAll('.addtocart');

buttons.forEach(btn => {
    btn.addEventListener("click", (e) => {

        addToCart(e);
        
        //for cart Quantity 
        const selectElement = e.target.closest('.content').querySelector('.select');
        let selectedValue = Number(selectElement.value);
        cartMath(selectedValue);
    });
});

let cartQuantity=0;
export function cartMath(x){
    cartQuantity+=x;
    document.getElementById("cartQuantity").innerHTML=cartQuantity;
};

homepage.html（主要html）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="/css/homepage.css">
</head>
<body>
    <div class="nav"><a href="../html/cartpage.html">Cart</a><span id="cartQuantity">00</span>
    </div>
        <div class="totalHTML">
            <!-- html that is now in script.js-->
        </div>
</body>

<script src="script.js" type="module"></script>
<script src="products.js" type="module"></script>
<script src="cart.js" type="module"></script>


</html>

cartpage.html（购物车 html）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../css/cartstyle.css">
    <title>Add to Cart</title>
</head>
<body>
<div class="totalHTML">
</div>

<div class="cart-summary">
    <h2>Cart Summary</h2>
    <p>Total Quantity: <span id="total-quantity">0</span></p>
    <p>Total Sum: Rs. <span id="total-sum">0</span></p>
    <p>Delivery Charge: Rs. 250</p>
    <p>Dashain Offer: Rs. -50</p>
    <h3>Total Payable: Rs. <span id="total-payable">0</span></h3>
    <button class="buynow">Buy Now</button>
</div>

</body>
<script src="cart.js" type="module"></script>
</html>

products.js（物品存储）

export const products=[
    {
        id:"1",
        name:"shoe",
        image:"images/products/knit-athletic-sneakers-gray.jpg",
        price:1200,
        quantity:1,
    },
    {
        id:"2",
        name:"shirt",
        image:"images/products/adults-plain-cotton-tshirt-2-pack-teal.jpg",
        price:1000,
        quantity:1,
    }, 
    {
        id:"3",
        name:"Sandals",
        image:"images/products/women-beach-sandals.jpg",
        price:200,
        quantity:1,
    },
    {
        id:"4",
        name:"Dinner Plate",
        image:"images/products/6-piece-white-dinner-plate-set.jpg",
        price:2750,
        quantity:1,
    },
];

所以我尝试将 localStorage 放在这里或那里，但没有成功。 我收到了重新渲染的建议，但我无法做到。 我认为可行的另一件事是单击删除后更新 cart.js 文件本身中的 html

删除并重新加载carthtml页面后，请让已删除的产品不再出现

javascript local-storage shopping-cart
1个回答
0
投票

添加了

cart = updatedCart;

在

 deleteBTNs.forEach((x =>{}

并将 const 购物车更改为 let 购物车。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.