@fronttrty

Проблемы с всплывающим окном, как исправить?

написал по уроку корзину на 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();
})();
  • Вопрос задан
  • 146 просмотров
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы