How can I update the quantity property of a cart item product in this Angular 13 e-commerce app?-CodePudding

I am working on an e-commerce app who's front-end is made in Angular 13.

The below code is intended to sum the prices of the items in the cart:

import { Component, OnInit } from '@angular/core';

@Component({
  selector: '.app-top-cart',
  templateUrl: './top-cart.component.html',
  styleUrls: ['./top-cart.component.css']
})
export class TopCartComponent implements OnInit {
  cartItems: any = [
    {
      id: 1,
      title: "iPhone 9",
      description: "An apple mobile which is nothing like apple",
      price: 549,
      discountPercentage: 12.96,
      rating: 4.69,
      stock: 94,
      brand: "Apple",
      category: "smartphones",
      thumbnail: "https://dummyjson.com/image/i/products/1/thumbnail.jpg",
      images: [
        "https://dummyjson.com/image/i/products/1/1.jpg",
        "https://dummyjson.com/image/i/products/1/2.jpg",
      ]
    },
    {
      id: 2,
      title: "iPhone X",
      description: "SIM-Free, Model A19211 6.5-inch Super Retina HD display with OLED technology A12 Bionic chip with ...",
      price: 899,
      discountPercentage: 17.94,
      rating: 4.44,
      stock: 34,
      brand: "Apple",
      category: "smartphones",
      thumbnail: "https://dummyjson.com/image/i/products/2/thumbnail.jpg",
      images: [
        "https://dummyjson.com/image/i/products/2/1.jpg",
        "https://dummyjson.com/image/i/products/2/2.jpg",
      ]
    },
    {
      id: 3,
      title: "Samsung Universe 9",
      description: "Samsung's new variant which goes beyond Galaxy to the Universe",
      price: 1248,
      discountPercentage: 15.46,
      rating: 4.09,
      stock: 36,
      brand: "Samsung",
      category: "smartphones",
      thumbnail: "https://dummyjson.com/image/i/products/3/thumbnail.jpg",
      images: [
        "https://dummyjson.com/image/i/products/3/1.jpg"
      ]
    },
  ];

  constructor() { }

  totalPrice: number = 0;

  doTotalPrice(){
    let total = 0;
    this.cartItems.forEach((item: { price: number, quantity: number }) => {
      item.quantity = 1;
      total  = item.price * item.quantity
    });
    this.totalPrice = total;
  }

  ngOnInit(): void {
    this.doTotalPrice();
  }

}

The goal

Whenever a new item is added to the cartItems array, if the item already exists in the array, I don't want duplicate items, I want a quantity update.

Stackblitz

You can see the full code HERE.

The problem

I have not been able to find a way to update item.quantity whenever one more piece of a product is added to the cart.

How can I update the quantity count?

CodePudding user response：

you could create a Map called "basket", the key is the item ID.

when you add an item to the basket you can check if the item doesn't exist in the map, if so, add the item to the map and set quantity to 1. Otherwise you don't need to add it to the map but increase the quantity.

another solution would be the use of an array and just push the items in the array. In the end you can count the occurences in the array.

CodePudding user response：

Take another approach, where you create an array of available items, and an array of cart items. This should be way clearer to you.


allItems = [{
  id: 1,
  title: 'iPhone 9',
  // ...
}];

cartItems = [];

// ...

addItemToCart(item) {
  this.cartItems.push(item);
}

// ...

get totalPrice() {
  return this.cartItems.reduce((p, { price }) => p   price, 0);
}