let basketBtns = document.querySelectorAll('.toBasketBtn');
basketBtns.forEach(function(btn){
btn.addEventListener('click',function(event){
let id = event.srcElement.dataset.id;
let price = event.srcElement.dataset.price;
let name = event.srcElement.dataset.name;
basket.addProduct({id: id, price: price, name: name})
})
});
let basket = {
products: {},
addProduct(product){
this.addProductToObject(product);
this.renderProductInBasket(product);
this.renderTotalSum();
this.addRemoveBtnsListeners();
},
removeProductListener(event){
basket.removeProduct(event);
basket.renderTotalSum();
},
removeProduct(event){
let id = event.srcElement.dataset.id;
this.removeProductFromObject(id);
this.removeProductFromBasket(id);
},
removeProductFromBasket(id){
let countId = document.querySelector(`.productCount[data-id="${id}"]`);
if(countId.textContent == 1){
countId.parentNode.remove();
} else{
countId.textContent--;
}
},
removeProductFromObject(id){
if(this.products[id].count == 1){
delete this.products[id]
} else {
this.products[id].count--;
}
},
addRemoveBtnsListeners(){
let btns = document.querySelectorAll('.productRemoveBtn');
for(let i = 0; i < btns.length; i++){
btns[i].addEventListener('click',this.removeProductListener);
}
},
renderTotalSum(){
document.querySelector('.total').textContent = this.getTotalSum();
},
getTotalSum(){
let sum = 0;
for(let key in this.products){
sum += this.products[key].price * this.products[key].count;
}
return sum;
},
addProductToObject(product){
if(this.products[product.id] == undefined){
this.products[product.id] = {
price: product.price,
name: product.name,
count: 1
}
} else{
this.products[product.id].count++;
}
},
renderProductInBasket(product){
let productExist = document.querySelector(`.productCount[data-id="${product.id}"]`);
if(productExist){
productExist.textContent++;
return;
}
let productRow = `
${product.id}
${product.name}
${product.price}
1
`;
let tbody = document.querySelector('tbody');
tbody.insertAdjacentHTML("beforeend", productRow);
}
}