Как добавить в корзину товар?

Question

[Евгений Пашков]

Есть код:

class ProductList {
  constructor(container = '.products') {
    this.container = container;
    this.goods = [];
    this.allProducts = [];
    this.getProducts().then((data) => {
      this.goods = [...data];
      this.render();
    });

    const btnBasket = document.getElementById('btnBasket');
    const basketBox = document.getElementById('basketBox');
    btnBasket.onclick = function () {
      basketBox.classList.toggle('vis');
    };
  }

  getProducts() {
    return fetch(`${API}/catalogData.json`)
      .then(result => result.json())
      .catch(error => {
        console.log('Error!', error);
      });
  }

  render() {
    const block = document.querySelector(this.container);
    for (let product of this.goods) {
      const productObject = new ProductItem(product);
      this.allProducts.push(productObject);
      block.insertAdjacentHTML('beforeend', productObject.render());
    }
  }
}

class ProductItem {
  constructor(product, img = 'https://placehold.it/200x150') {
    this.product_name = product.product_name;
    this.price = product.price;
    this.id = product.id_product;
    this.img = img;
  }

  render() {
    return `<div class="product-item" data-id="${this.id}" id="${this.id}">
              <img src="${this.img}" alt="Some img">
              <div class="desc">
                  <h3 data-name="${this.product_name}">${this.product_name}</h3>
                  <p id="g6" data-price="${this.price}">${this.price} \u20bd</p>
                  <form action="#">
                  <button type="button" class="buy-btn" id="${this.id}" >Купить</button>
                  </form>
              </div>
            </div>`;
  }
}

const list = new ProductList;

Мне нужно добавлять товар в корзину по нажатие на кнопку КУПИТЬ.
Я перепробовал все! Я просто не понимаю как мне унаследовать THIS.ID в новом классе Корзины.
Подскажите кто может пожалуйста.

Comments

[JhaoDa]

Код надо оформить.

Answer 1

[Programiker]

Просто массив product и добавлять в него новые элементы при нажатии