在“添加到购物车”点击产品时生成购物车数组

Question

I'm building this small cart project at the moment, however, when I'm passing the products to the cart class something strange is happening...

When I console.log() the products list in the cart class, I m getting separate arrays for each of the products. So for example, if I add 3 products from one product they get stored in a separate array see below in the screenshoot:

Note: Please be aware that I clicked one each time and I'm expecting only one array with all the products I add to the cart.

See the code below, including all the classes that are involved in this.

As Shown in console:

(3) [{…}, {…}, {…}]
0: {id: 1, productName: "Strawberry Basil", productImgURL: "https://cdn.shopify.com/s/files/1/0274/3641/7123/p…rry_Pop_Still_4K_Front-CherryPop.png?v=1588713373", type: Array(3), price: 7}
1: {id: 1, productName: "Strawberry Basil", productImgURL: "https://cdn.shopify.com/s/files/1/0274/3641/7123/p…rry_Pop_Still_4K_Front-CherryPop.png?v=1588713373", type: Array(3), price: 7}
2: {id: 1, productName: "Strawberry Basil", productImgURL: "https://cdn.shopify.com/s/files/1/0274/3641/7123/p…rry_Pop_Still_4K_Front-CherryPop.png?v=1588713373", type: Array(3), price: 7}
length: 3
__proto__: Array(0)
app.js:151 

(3) [{…}, {…}, {…}]
0: {id: 2, productName: "Sour Blueberry", productImgURL: "https://cdn.shopify.com/s/files/1/0274/3641/7123/p…rry_Still_4K_Front-SourBlueberry.png?v=1588713584", type: Array(2), price: 7}
1: {id: 2, productName: "Sour Blueberry", productImgURL: "https://cdn.shopify.com/s/files/1/0274/3641/7123/p…rry_Still_4K_Front-SourBlueberry.png?v=1588713584", type: Array(2), price: 7}
2: {id: 2, productName: "Sour Blueberry", productImgURL: "https://cdn.shopify.com/s/files/1/0274/3641/7123/p…rry_Still_4K_Front-SourBlueberry.png?v=1588713584", type: Array(2), price: 7}
length: 3
__proto__: Array(0)

 // local Item List for development const products = [{ id: 1, productName: 'Strawberry Basil', productImgURL: 'https://cdn.shopify.com/s/files/1/0274/3641/7123/products/Cherry_Pop_Still_4K_Front-CherryPop.png?v=1588713373', type: ['berry', 'citrusy', 'fancy'], price: 7, }, { id: 2, productName: 'Sour Blueberry', productImgURL: 'https://cdn.shopify.com/s/files/1/0274/3641/7123/products/SourBlueBerry_Still_4K_Front-SourBlueberry.png?v=1588713584', type: ['sour', 'berry'], price: 7, }, { id: 3, productName: 'Blackberry Jam', productImgURL: 'https://cdn.shopify.com/s/files/1/0274/3641/7123/products/BlackBerry_Jam_Still_4K_Front-BlackberryJam.png?v=1595035965', type: ['berry'], price: 7, } ]; class SideCartDrawer { cartProducts = []; addToCart(product) { this.cartProducts.push(product); console.log(this.cartProducts); const productEl = document.createElement('div'); productEl.textContent = 'product 1'; } renderCart() { let cartEl = document.createElement('h2'); cartEl.id = 'cart-list-empty'; cartEl.textContent = 'Cart is Empty'; return cartEl; } } //Single product rendering class SingleProductRendering extends SideCartDrawer { constructor(productDetails) { super(); this.product = productDetails; this.productElementTemplate = document.getElementById('item-main-template'); } addProductToCart = () => { this.addToCart(this.product); }; render() { const productTemplateEl = document.importNode( this.productElementTemplate.content, true ); const productEl = productTemplateEl.querySelector('.single-product'); productEl.id = this.product.id; productEl.querySelector('img').src = this.product.productImgURL; productEl.querySelector('h2').textContent = this.product.productName; const btn = productEl.querySelector('button'); btn.addEventListener('click', () => { this.addProductToCart(); }); return productEl; } } //Product List Rendering class ProductList { constructor() { this.fetchProducts(); } fetchProducts() { this.products = products; } render() { const productListEl = document.createElement('section'); productListEl.className = 'products-holder'; productListEl.id = 'product-holder'; for (let product of this.products) { const productEl = new SingleProductRendering(product); const productElRendered = productEl.render(); productListEl.append(productElRendered); } return productListEl; } } //shop API - assemble class Shop { render() { const renderHookProductList = document.getElementById('app'); const cartHook = document.getElementById('cart-items-list'); const productList = new ProductList(); const productListRendered = productList.render(); renderHookProductList.append(productListRendered); const cartItemDrawer = new SideCartDrawer(); const cartDrawer = cartItemDrawer.renderCart(); cartHook.append(cartDrawer); } } const shop = new Shop(); shop.render();

 <body> <template id="item-main-template"> <article class="single-product"> <div class="product-image-container"> <img class="tour-img" src="" alt="" /> </div> <div class="product-title"> <h2></h2> </div> <div class="cart-btn-holder"> <button class="add-to-cart-btn" id="add-to-cart">add to cart</button> </div> </article> </template> <template id="item-cart-template"> <article class="cart-item"> <div class="side-cart-product-item"> <h3>product 1</h3> <button class="trash-icon"> <i class="far fa-trash-alt"></i> </button> </div> <div class="side-cart-product-price"> <p>$40</p> <div class="cart-qty"> <button class="qty-btn">-</button> <span>0</span> <button class="qty-btn">+</button> </div> </div> </article> </template> <header id="home"> <nav> <button type="button" class="nav-toggle" id="nav-toggle"> <i class="fas fa-bars"></i> </button> <h1 class="header-title">RAINBOW SODAS UK</h1> <button type="button" class="nav-toggle" id="cart-drawer-open"> <i class="fas fa-shopping-cart" ><span class="cart-items-counter">0</span></i > </button> </nav> </header> <main> <div class="side-menu" id="side-menu"> <button type="button" id="drawer-close" class="drawer-menu-close"> <i class="far fa-window-close"></i> </button> <div class="drawer-title">SODAS UK</div> <ul class="nav-links"> <li> <a href="#products-filter" class="nav-link">shop all</a> </li> <li> <a href="#products-filter" class="nav-link">products</a> </li> <li> <a href="#about" class="nav-link">about us</a> </li> </ul> </div> <div class="cart-drawer" id="side-cart"> <div class="cart-inner"> <button type="button" id="cart-drawer-close" class="cart-drawer-close"> <i class="far fa-window-close"></i> </button> <div class="cart-drawer-title">CART</div> <section class="cart-items-list" id="cart-items-list"></section> </div> <div class="cart-footer"> <div class="total-display-side-cart"> <h3>total</h3> <span>0</span> </div> <button class="checkout-drawer">checkout</button> </div> </div> <div id="app"></div> </main> </body>

Answer 1

You need to see if the cart already has the product

addToCart(product) {
  const cartProduct = this.cartProducts.find(item => item.id === product.id);
  if (cartProduct) {
    cartProduct.qty++
    }  
  else {
    product.qty = 1;
    this.cartProducts.push(product);
  }  
  console.log(this.cartProducts)
  const productEl = document.createElement('div');
  productEl.textContent = 'product 1';
}

 // local Item List for development const products = [{ id: 1, productName: 'Strawberry Basil', productImgURL: 'https://cdn.shopify.com/s/files/1/0274/3641/7123/products/Cherry_Pop_Still_4K_Front-CherryPop.png?v=1588713373', type: ['berry', 'citrusy', 'fancy'], price: 7, }, { id: 2, productName: 'Sour Blueberry', productImgURL: 'https://cdn.shopify.com/s/files/1/0274/3641/7123/products/SourBlueBerry_Still_4K_Front-SourBlueberry.png?v=1588713584', type: ['sour', 'berry'], price: 7, }, { id: 3, productName: 'Blackberry Jam', productImgURL: 'https://cdn.shopify.com/s/files/1/0274/3641/7123/products/BlackBerry_Jam_Still_4K_Front-BlackberryJam.png?v=1595035965', type: ['berry'], price: 7, } ]; class SideCartDrawer { cartProducts = []; addToCart(product) { const cartProduct = this.cartProducts.find(item => item.id === product.id); if (cartProduct) { cartProduct.qty++ } else { product.qty = 1; this.cartProducts.push(product); } console.log(this.cartProducts) const productEl = document.createElement('div'); productEl.textContent = 'product 1'; } renderCart() { let cartEl = document.createElement('h2'); cartEl.id = 'cart-list-empty'; cartEl.textContent = 'Cart is Empty'; return cartEl; } } //Single product rendering class SingleProductRendering extends SideCartDrawer { constructor(productDetails) { super(); this.product = productDetails; this.productElementTemplate = document.getElementById('item-main-template'); } addProductToCart = () => { this.addToCart(this.product); }; render() { const productTemplateEl = document.importNode( this.productElementTemplate.content, true ); const productEl = productTemplateEl.querySelector('.single-product'); productEl.id = this.product.id; productEl.querySelector('img').src = this.product.productImgURL; productEl.querySelector('h2').textContent = this.product.productName; const btn = productEl.querySelector('button'); btn.addEventListener('click', () => { this.addProductToCart(); }); return productEl; } } //Product List Rendering class ProductList { constructor() { this.fetchProducts(); } fetchProducts() { this.products = products; } render() { const productListEl = document.createElement('section'); productListEl.className = 'products-holder'; productListEl.id = 'product-holder'; for (let product of this.products) { const productEl = new SingleProductRendering(product); const productElRendered = productEl.render(); productListEl.append(productElRendered); } return productListEl; } } //shop API - assemble class Shop { render() { const renderHookProductList = document.getElementById('app'); const cartHook = document.getElementById('cart-items-list'); const productList = new ProductList(); const productListRendered = productList.render(); renderHookProductList.append(productListRendered); const cartItemDrawer = new SideCartDrawer(); const cartDrawer = cartItemDrawer.renderCart(); cartHook.append(cartDrawer); } } const shop = new Shop(); shop.render();

 <body> <template id="item-main-template"> <article class="single-product"> <div class="product-image-container"> <img class="tour-img" src="" alt="" /> </div> <div class="product-title"> <h2></h2> </div> <div class="cart-btn-holder"> <button class="add-to-cart-btn" id="add-to-cart">add to cart</button> </div> </article> </template> <template id="item-cart-template"> <article class="cart-item"> <div class="side-cart-product-item"> <h3>product 1</h3> <button class="trash-icon"> <i class="far fa-trash-alt"></i> </button> </div> <div class="side-cart-product-price"> <p>$40</p> <div class="cart-qty"> <button class="qty-btn">-</button> <span>0</span> <button class="qty-btn">+</button> </div> </div> </article> </template> <header id="home"> <nav> <button type="button" class="nav-toggle" id="nav-toggle"> <i class="fas fa-bars"></i> </button> <h1 class="header-title">RAINBOW SODAS UK</h1> <button type="button" class="nav-toggle" id="cart-drawer-open"> <i class="fas fa-shopping-cart" ><span class="cart-items-counter">0</span></i > </button> </nav> </header> <main> <div class="side-menu" id="side-menu"> <button type="button" id="drawer-close" class="drawer-menu-close"> <i class="far fa-window-close"></i> </button> <div class="drawer-title">SODAS UK</div> <ul class="nav-links"> <li> <a href="#products-filter" class="nav-link">shop all</a> </li> <li> <a href="#products-filter" class="nav-link">products</a> </li> <li> <a href="#about" class="nav-link">about us</a> </li> </ul> </div> <div class="cart-drawer" id="side-cart"> <div class="cart-inner"> <button type="button" id="cart-drawer-close" class="cart-drawer-close"> <i class="far fa-window-close"></i> </button> <div class="cart-drawer-title">CART</div> <section class="cart-items-list" id="cart-items-list"></section> </div> <div class="cart-footer"> <div class="total-display-side-cart"> <h3>total</h3> <span>0</span> </div> <button class="checkout-drawer">checkout</button> </div> </div> <div id="app"></div> </main> </body>