Как сделать проверку и добавление количества в корзину JS Vanilla?

Question

[Владислав Верилов]

Есть вот такая корзина, с добавлением из каталога и подсчетом суммы. Проблема в том, что при добавлении одинаковых элементов, они просто дублируются, а хочется, чтобы менялось количество. Понимаю, что нужно просто сделать проверку на наличие в корзине и плюсовать количество если такой есть. Но не знаю как это реализовать.

const cart = {
  cartBlock: null,
  catalogList: [],
  goods: [],

  init(cartBlockClass, catalogList) {
    this.cartBlock = document.querySelector(`.${cartBlockClass}`);
    this.catalogList = catalogList;
    this.render();
  },

  render() {
    if (this.getCartGoodsLength() > 0) {
      this.renderCartList();
      this.renderCartTotalInfo();
    } else {
      this.renderEmptyCart();
    }
  },

  findProduct(id_product) {
    return this.catalogList.find(
      (product) => product.id_product === id_product
    );
  },

  addToBasket(id_product) {
    const product = this.findProduct(id_product);

    if (product) {
      this.goods.push({ ...product });
      this.render();
    } else {
      alert("Ошибка добавления!");
    }
  },

  getCartGoodsLength() {
    return this.goods.length;
  },

  renderEmptyCart() {
    this.cartBlock.innerHTML = "";
    this.cartBlock.insertAdjacentHTML("beforeend", "Корзина пуста.");
  },

  renderCartList() {
    this.cartBlock.innerHTML = "";
    this.goods.forEach((item) => {
      this.cartBlock.insertAdjacentHTML("beforeend", this.renderCartItem(item));
    });
  },

  renderCartItem(item) {
    return `<div>
                <h3>${item.product_name}</h3>
                <p>${item.price} руб.</p>
                <p>${item.quantity} шт.</p>
            </div>`;
  },

  totalPrice() {
    return this.goods.reduce((sum, item) => {
      return sum + item.price * item.quantity;
    }, 0);
  },

  totalQuantity() {
    return this.goods.reduce((sum, item) => {
      return sum + item.quantity;
    }, 0);
  },

  renderCartTotalInfo() {
    let cartmarket = document.getElementById("cartmarket");
    let h3tag = document.createElement("h3");
    cartmarket.appendChild(h3tag);
    document.body.appendChild(cartmarket);
    h3tag.textContent = `В корзине: ${cart.totalQuantity()} товаров на сумму ${cart.totalPrice()} рублей`;
    return h3tag;
  },
};

Comments

[Владислав Верилов]

Проверку id пытался сделать по разному, это пример. Что в нем не так?

CheckPresenceProduct(id_product) {
    this.goods.forEach((item) => {
      if (id_product === item.id_product) {
        return true;
      } else {
        return false;
      }
    });
  },

[Ярослав Иванов]

inefablecl, Храните в виде объекта ("id": "количество товара")
goods {
"25": 4,
"4: 1
}

[MagnusDidNotBetray]

inefablecl,

Что в нем не так?

Метод forEach ничего не возвращает, его используют только для перебора, как более «элегантный» вариант, чем обычный цикл for.

Вам нужен метод some

[Евгений]

MagnusDidNotBetray, ему всеравно объект нужен, как он в массиве количество будет хранить?)

[Владислав Верилов]

Ярослав Иванов, Подскажите как это реализовать. Сижу просто уже 3й или 4й час. Теперь даже id не могу запушить
renderIdProduct(id_product) {
this.goodsQuantity.push(id_product);
},

(сделал goodsQuantity = [] для теста, чтобы потом хранить как вы сказали id:кол-во)

[MagnusDidNotBetray]

Евгений, так у него же ж в массиве товары хранятся в виде объектов { id, price, quantity }, судя по коду.
Но я все равно бред написал, там нужно было искать find'ом объект, и если бы он существовал, то увеличивать количество, иначе создавать новый

[sinneren]

this.goods.find( (item) => { return item.id === product_id } );

если нашли:

basket.map(item => {  
if (item.id === product_id) {
 item.quantity += 1; 
 break;
} 
})

Answer 1

[Петр]

Вам нужно в корзину "пушить" товар вместе с id, по умолчанию что бы товар добавлялся в количестве 1 к примеру.
Потом при добавлении товара повторно, функция добавления должна проверять, есть ли такой id в массиве или нет, если есть то увеличиваете количество, если нет то просто добавляете.