Как считать сумму продуктов в классе
Пишу корзину на 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>