Как считать сумму продуктов в классе

Пишу корзину на JS, хочу считать сумму, но не знаю как мне считать сумму в классе, чтобы в Product.sum.total была общая сумма всех продуктов

Тут я пытаюсь это делать

cart__sum.innerHTML = 'Сумма: ' + this.sum(options.price, this.select.value) + ' р';
this.select.addEventListener('change', (e) => {
  this.sum(options.price, e.target.value);
  this.sum.total += this.sum(options.price, e.target.value);
  cart__sum.innerHTML = 'Сумма: ' + this.sum.total + ' р';
})

const add__form = docQuerySelector('.add__form');
const container = docQuerySelector('.container');
const cart__sum = docQuerySelector('.cart__sum');
let cartNode = [];
let cartJSON = [];

function docQuerySelector(selector) {
  return document.querySelector(selector);
}

function getLocalStorageCart() {
  return JSON.parse(localStorage.getItem('cart'));
}

function setLocalStorageCart(cart) {
  localStorage.setItem('cart', JSON.stringify(cart));
}

function closeFunc(e) {
  const product = e.target.parentNode;
  const wrapperChilds = [...e.target.parentNode.parentNode.children];
  let number;
  wrapperChilds.forEach((elem, i) => {
    if (elem === product) {
      number = i;
      cartNode.splice(number, 1);
      // cartJSON.splice(number, 1);
      // setLocalStorageCart(cartJSON);
      render();
    }
  });
}

function getElemWithClass(tag, ...className) {
  const node = document.createElement(tag);
  className.forEach((_className) => {
    node.classList.add(_className);
  });
  return node;
}

function render(product) {
  let wrapper = document.querySelector('.wrapper');
  if (wrapper) {
    wrapper.remove();
  }
  wrapper = getElemWithClass('ul', 'wrapper');

  container.append(wrapper);
  if (product !== undefined) {
    cartNode.push(product);
  }
  cartNode.forEach((elem) => {
    wrapper.append(elem.node);
  });
  if (cartNode === undefined) {
    wrapper.innerHTML = '';
  }
}

class Product {
  constructor({ ...options
  }) {
    this.node = getElemWithClass('li', 'product', 'd-flex', 'flex-column', 'align-items-center');

    this.name = getElemWithClass('div', 'product__name');
    this.name.innerHTML = 'Название: ' + options.name;

    this.price = getElemWithClass('div', 'product__price');
    this.price.innerHTML = 'Цена: ' + options.price + ' руб';

    this.selectOption = [];
    for (let i = 1; i < 10; i++) {
      const option = getElemWithClass('option', 'product__option');
      option.value = i;
      option.innerHTML = i;
      this.selectOption.push(option);
    }
    this.select = getElemWithClass('select', 'product__select', 'custom-select');
    this.select.append(...this.selectOption);
    cart__sum.innerHTML = 'Сумма: ' + this.sum(options.price, this.select.value) + ' р';
    this.select.addEventListener('change', (e) => {
      this.sum(options.price, e.target.value);
      this.sum.total += this.sum(options.price, e.target.value);
      cart__sum.innerHTML = 'Сумма: ' + this.sum.total + ' р';
    })

    this.close = getElemWithClass('div', 'product__close', 'btn', 'btn-danger');
    this.close.innerHTML = 'Удалить';
    this.close.addEventListener('click', closeFunc);

    this.node.append(this.name, this.price, this.select, this.close);
  }

  sum(price, quantity) {
    if (this.sum.total === undefined) {
      this.sum.total = 0;
    }
    return Math.floor(price * quantity);
  }
}

// if (getLocalStorageCart() !== null) {
// 	cartJSON = getLocalStorageCart();
// 	cartJSON.forEach((elem) => {
// 		const product = new Product(elem);
// 		cartNode.push(product);
// 	});
// 	render();
// }

add__form.addEventListener('submit', (e) => {
  e.preventDefault(); // убираем перезагрузку страницы при отправке формы
  const name = e.target[0].value; //Название продукта
  const price = e.target[1].value; //Цена продукта

  e.target[0].value = '';
  e.target[1].value = '';

  const product = new Product({
    name,
    price
  });
  // cartJSON.push({name: name, price: price});
  // setLocalStorageCart(cartJSON);
  render(product);
});
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />
<style>
  *,
  *:before,
  *:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    outline: none;
    list-style-type: none;
    font-size: 18px;
  }
  
  form>* {
    display: block;
    margin-top: 10px;
  }
  
  form>*:first-child {
    margin-top: 0;
  }
  
  .add__form {
    max-width: 300px;
    margin-top: 15px;
  }
  
  .product {
    margin-top: 20px;
    max-width: 300px;
    border: 2px solid orange;
    text-align: center;
  }
  
  .product * {
    display: block;
    margin-top: 10px;
  }
  
  .product *:last-child {
    margin-bottom: 10px;
  }
  
  .product__select {
    width: auto;
  }
  
  .cart__sum {
    margin-top: 15px;
  }
</style>
<div class="container">
  <form class="add__form">
    <input class="form-control" type="text" placeholder="Название" required>
    <input class="form-control" type="number" placeholder="Цена" required>
    <input type="submit" class="btn btn-success" value="Добавить">
  </form>
  <div class="cart__sum">

  </div>
</div>


Ответы (0 шт):