написал по уроку корзину на js нужно чтобы некоторые данные вписывать при добавлении в корзину через всплывающее окно(
ccылка на вёрстку) я сделал всплывающее окно но не могу разобраться с возвратом значения мой товар рендерится до то как я нажму на кнопку. Из-за этого возникают ошибки.
;(function(){
const cartDOMElement = document.querySelector('.js-cart');
if (!cartDOMElement) {
return;
}
const cartItemsCounterDOMElement = document.querySelector('.js-cart-total-count-items');
const cartTotalPriceDOMElement = document.querySelector('.js-cart-total-price');
const cartTotalQuntDOMElement = document.querySelector('.js-cart-total-qnt');
const cart = JSON.parse(localStorage.getItem('cart')) || {};
const renderCartItem = ({name, price, matirial,src,developer,id,weight}) => {
updateCart();
const cartItemDOMElement = document.createElement('div');
const itemTemplate = `
<div class="js-cart">
<div class="cart-item">
<img class="cart-item__img " src="${src}">
<h1 class="cart-item__name cart-item__description">${name}</h1>
<h2 class="cart-item__matirial cart-item__description" >${matirial}</h2>
<h2 class="cart-item__price cart-item__description js-cart-item-price">${price * weight}</h2>
<label >
<h2 class="cart-item__description cart-item__label-name"> Вес:</h2>
<input type="number" class="cart-item__input-of-weight js-input-weight" value="${weight}">
</label>
<button class="js-btn-cart-item-remove delete-button"></button>
</div>
</div>`;
cartItemDOMElement.innerHTML = itemTemplate;
cartItemDOMElement.setAttribute('data-product-id', id);
cartItemDOMElement.classList.add('js-cart-item');
cartDOMElement.appendChild(cartItemDOMElement);
}
const newPrice = (id) => {
const cartItemDOMElement = cartDOMElement.querySelector(`[data-product-id="${id}"]`);
const inputWeight = cartItemDOMElement.querySelector('.js-input-weight');
const cartItemPriceDOMElement = cartItemDOMElement.querySelector('.js-cart-item-price');
inputWeight.oninput = () => {
cartItemPriceDOMElement.textContent = inputWeight.value * cart[id].price;
cart[id].weight = inputWeight.value;
updateCart();
return;
}
}
// Обновление цены для продуктов в корзине
const totalPriceUpdate = () =>{
const totalPrice = Object.keys(cart).reduce((acc,id) => {
return acc + cart[id].price * cart[id].weight;
}, 0)
cartTotalPriceDOMElement.textContent = totalPrice;
}
// обновление количества товаров в корзине
const totalQuntUpdate = () =>{
const totalQunt = Object.keys(cart).reduce((acc,id) => {
return acc + 1;
}, 0)
cartTotalQuntDOMElement.textContent = totalQunt;
}
// информация о товаре
const createData = (target,weightForItem) =>{
const productDOMElement = target.closest('.js-goods');
const name = productDOMElement.getAttribute('data-goods-name');
const price = productDOMElement.getAttribute('data-goods-price');
const matirial = productDOMElement.getAttribute('data-goods-matirial');
const src = productDOMElement.getAttribute('data-goods-src');
const developer = productDOMElement.getAttribute('data-goods-developer');
const weight = weightForItem;
const id = name+developer;
return {name,price,matirial,src,developer,id,weight}
}
//всплывающее окно для ввода веса
const showPopup = function(targetx) {
targetx.classList.add('is-active');
};
const closePopup = function(targetx) {
targetx.classList.remove('is-active');
return;
};
const toggleScroll = function() {
body.classList.toggle('no-scroll');
return;
};
const realyClose = () =>{
let x = confirm('вы уверены что не хотите добавить в корзине');
if(x){
closePopup(popup);
toggleScroll();
}
}
function popupForNewItem (target){
// Проверка есть ли товар в в корзине
const productDOMElement = target.closest('.js-goods');
const name = productDOMElement.getAttribute('data-goods-name');
const developer = productDOMElement.getAttribute('data-goods-developer');
const id = name+developer;
if(cart[id]) {
alert("Этот товар уже в корзине");
return;
}
classOfPopup = target.getAttribute('data-popup');
popup = document.querySelector('.' + classOfPopup);
body = document.querySelector('body');
toggleScroll();
showPopup(popup);
popupClose = document.querySelector('.popup-close');
popupInner = document.querySelector('.popup__inner');
popupSubmit = document.querySelector('.submit-weight');
popupClose.addEventListener('click', function(){
realyClose();
return;
});
popupInner.addEventListener('click', function(e){
const xTarget = e.target;
if(xTarget.classList.contains('popup__inner')){
realyClose();
}
});
popupSubmit.addEventListener('click', function(){
weightForItem = document.querySelector('.input-of-weight').value;
console.log(weightForItem);
if(!weightForItem){
alert('вы не ввели вес');
return;
}
closePopup(popup);
toggleScroll();
const data = createData(target,weightForItem);
addCartItem(data,target);
});
}
const addCartItem = (data,target) => {
const { id } = data;
cart[id] = data;
renderCartItem(data);
updateCart();
};
const deleteCartItem = (id) => {
const cartItemDOMElement = cartDOMElement.querySelector(`[data-product-id="${id}"]`);
cartDOMElement.removeChild(cartItemDOMElement);
delete cart[id];
updateCart();
};
const saveCart = () => {
localStorage.setItem('cart', JSON.stringify(cart));
};
const updateCart = () => {
totalQuntUpdate();
totalPriceUpdate();
saveCart();
};
const renderCart = () => {
const ids = Object.keys(cart);
ids.forEach((id) => renderCartItem(cart[id]));
};
const cartInit = () => {
renderCart();
updateCart();
addToCart = document.querySelector('.js-btn-add-to-cart');
removeFromCart = document.querySelectorAll('.js-btn-cart-item-remove');
inputForWeight = document.querySelector('.cart-item__input-of-weight');
addToCart.addEventListener('click', function(e){
console.log(1);
target = e.target;
e.preventDefault();
popupForNewItem(target);
})
for(let i = 0; i < removeFromCart.length; i++){
removeFromCart[i].addEventListener('click', function(e){
console.log(2);
e.preventDefault();
target = e.target;
const cartItemDOMElement = target.closest('.js-cart-item');
const productID = cartItemDOMElement.getAttribute('data-product-id');
deleteCartItem(productID);
})
}
inputForWeight.addEventListener('click', function(e){
console.log(3);
e.preventDefault();
const cartItemDOMElement = target.closest('.js-cart-item');
const productID = cartItemDOMElement.getAttribute('data-product-id');
newPrice(productID);
})
}
cartInit();
})();
