@ForSureN1
frontend dev

Нужна помощь в добавление товара в скрытую textarea?

Добрый день, имеется готовая корзина с товарами, теперь нужно сделать так, что этот же товар попадал в виде таблицу в textarea, и отправлялся в админку, через форму соответственно, я остановился на пол пути, в скрытую textarea попадает только один товар, и обновление количества и суммы внутри нее, происходит только если обновить страницу, я знаю что нужно вызывать функцию рендера повторно, но это к сожалению не срабатывает почему, прикладываю код.
//Вызов функции товара
	function requestCart() {

    const cartDOMElement = document.querySelector('.js-cart')
    const cartItemsCounterDOMElement = document.querySelector('.js-cart-total-count-items')
    const cartTotalPriceDOMElement = document.querySelector('.js-cart-total-price')
    const cartTotalSummaDOMElement = document.querySelector('.js-cart-total-summa')
    //Скрытая таблица с продуктами
    const tableDOMElement = document.querySelector('.textarea-table')
    let tableId = document.getElementById('textarea'
    const cart = JSON.parse(localStorage.getItem('cart')) || {};

    const clearBusket = () => {
      const table = document.querySelector('.busket')
      const total = document.querySelector('.count')
      const form = document.querySelector('.feedback__container')
      const empty = document.querySelector('.empty-cart')  
      if (Object.keys(cart).length == 0) {
          table.classList.add('disabled');
          total.classList.add('disabled');
          form.classList.add('disabled');
          empty.classList.add('active');
        }
    }
    const table = document.querySelector('.product')
    if (table) {
      clearBusket();
    }
    //отображаем добавленный товар в корзине
    const renderCartItem = ({articul, name, desc, color, size, price, totalprice, src, quantity, href}) => {
      const cartItemDOMElement = document.createElement('tr');
      const cartItemTemplate = `
        <tr class="product__item">
          <td class="product__title">
            <a href="${href}"><img src="${src}"></a>
          </td>
          <td class="product__name">
            <h3><a href="${href}">${name}</a></h3>
            <p>${desc}</p>
          </td>
          <td class="product__size-color">
            <p>${size}</p>
            <p class="product__color" style="background-color: ${color}"></p>
          </td>
          <td class="product__count">
            <div class="count-items">
              <button class="js-minus"></button>
              <p class="js-cart-item-quantity">${quantity}</p>
              <button class="js-plus"></button>
            </div>
          </td>
          <td class="product__price">
            <p>${price} тг</p>
          </td>
          <td class="product__summ">
            <p class="js-cart-item-totalprice">${totalprice} тг</p>
          </td>
          <td class="product__remove">
            <button class="remove"></button>
          </td>
        </tr>
      `;

      cartItemDOMElement.innerHTML = cartItemTemplate;
      cartItemDOMElement.setAttribute('data-product-articul', articul);
      cartItemDOMElement.classList.add('js-cart-item');
      cartDOMElement.appendChild(cartItemDOMElement);
      totalBusket();
      updateCart();
    }
    //сохраняем товар в LocalStorage
    const saveCart = () => {
      localStorage.setItem('cart', JSON.stringify(cart));
    }
    //подсчитываение колличества и суммы товара
    const totalBusket = () => {
      let totalcount = 0;
      const ids = Object.keys(cart);
      for (let i = 0; i < ids.length; i++) {
        const id = ids[i]
        totalcount += +(cart[id].quantity);
      }
      let total = 0;
      const price = document.querySelectorAll('.js-cart-item-totalprice');
      for (let i = 0; i < price.length; i++) {
        total = total + parseInt(price[i].innerHTML);
      }

      cartTotalPriceDOMElement.textContent = total + ' тг';
      cartTotalSummaDOMElement.textContent = total + ' тг';
      cartItemsCounterDOMElement.textContent = totalcount + 'х';
      
      if (ids.length == 0) {
        cartTotalPriceDOMElement.textContent = 0;
        cartTotalSummaDOMElement.textContent = 0;
      }
      updateCart();
    }
    //Обновляем данные в LocalStorage
    const updateCart = () => {
      saveCart();
    }
    //Удаление из корзины
    const deleteCartItem = (articul) => {
      const cartItemDOMElement = cartDOMElement.querySelector(`[data-product-articul="${articul}"]`);
      cartDOMElement.removeChild(cartItemDOMElement);
      delete cart[articul];
      updateCart();
      totalBusket();
    }
    //Добавление в корзину
    const addCartItem = (data) => {
      const {articul} = data;
      cart[articul] = data;
      updateCart();
      if (cartDOMElement) {
        renderCartItem(data);
        renderTable(data);
      }
    }
    //Обновление количества товара и итоговой суммы
    const updateQuantityTotalPrice = (articul, quantity) => {
      const cartItemDOMElement = cartDOMElement.querySelector(`[data-product-articul="${articul}"`);
      const cartItemQuantityDOMElement = cartItemDOMElement.querySelector('.js-cart-item-quantity');
      const cartItemPriceDOMElement = cartItemDOMElement.querySelector('.js-cart-item-totalprice');
      const ids = Object.keys(cart);
      cart[articul].quantity = quantity;
      cartItemQuantityDOMElement.textContent = quantity;
      cart[articul].totalprice = cart[articul].quantity * cart[articul].price;
      cartItemPriceDOMElement.textContent = cart[articul].totalprice + ' тг';
      cart[articul].totalprice = cart[articul].quantity * cart[articul].price;
      updateCart();
    }

    //Увеличение количества товара и итоговой суммы
    const increaseQuantity = (articul) => {
      const newQuantity = cart[articul].quantity + 1;
      updateQuantityTotalPrice(articul, newQuantity);
    }
    //Уменьшение количества товара и итоговой суммы
    const decreaseQuantity = (articul) => {
      const newQuantity = cart[articul].quantity - 1;
      if (newQuantity >= 1) {
        updateQuantityTotalPrice(articul, newQuantity);
      }
    }
    //Получаем данные для объекта
    const getProductData = (productDOMElement) => {
      const button = document.querySelector('.buy__product')
      const name = productDOMElement.getAttribute('data-product-name');
      const desc = productDOMElement.getAttribute('data-product-desc');
      const articul = productDOMElement.getAttribute('data-product-articul');
      const size = productDOMElement.getAttribute('data-product-size');
      const color = productDOMElement.getAttribute('data-product-color');
      const price = productDOMElement.getAttribute('data-product-price');
      const src = productDOMElement.getAttribute('data-product-img');
      let href = productDOMElement.getAttribute('data-product-href');
      if(button) {
        href = window.location.href;
      }
      const quantity = 1;
      const totalprice = quantity * +(price);
      return  { name, desc, articul, size, color, price, totalprice, src, quantity, href};
    }

    const renderCart = () => {
    	const ids = Object.keys(cart);
    	ids.forEach((articul) => renderCartItem(cart[articul]));
      ids.forEach((articul) => renderTable(cart[articul]));
    };


    const disabledButton = () => {
        const test = document.querySelectorAll('.js-product')
        const button = document.querySelector('.buy__product')
        for(let i = 0; i < test.length; i++) {
            const attr = (test[i].getAttribute('data-product-articul'))
            const parent = test[i].querySelector('.js-buy')
            if (cart.hasOwnProperty(attr)) {
              parent.classList.add('disabled')
              if (button) {
                button.innerHTML = "Товар в корзине"
              }
            }
            
        }

    }
    disabledButton();

    //Инициализация
    const cartInit = () => {
    	if (cartDOMElement) {
        	renderCart();
    	}
    	document.querySelector('body').addEventListener('click', (e) => {
    		const target = e.target;

        //В корзину
    		if (target.classList.contains('js-buy')) {
    			e.preventDefault();
    			const productDOMElement = target.closest('.js-product');
    			const data = getProductData(productDOMElement);
    			addCartItem(data);
          disabledButton();
    		}

        //Удалить из корзины
    		if (target.classList.contains('remove')) {
    			e.preventDefault();
    			const cartItemDOMElement = target.closest('.js-cart-item');
    			const productArticul = cartItemDOMElement.getAttribute('data-product-articul');
    			deleteCartItem(productArticul);
          clearBusket();
    		}

        //Увеличить
        if (target.classList.contains('js-plus')) {
          e.preventDefault();
          const cartItemDOMElement = target.closest('.js-cart-item');
          const productArticul = cartItemDOMElement.getAttribute('data-product-articul');
          increaseQuantity(productArticul);
          totalBusket();
        }

        //Уменьшить
        if (target.classList.contains('js-minus')) {
          e.preventDefault();
          const cartItemDOMElement = target.closest('.js-cart-item');
          const productArticul = cartItemDOMElement.getAttribute('data-product-articul');
          decreaseQuantity(productArticul);
          totalBusket();
        }


    	});
	}

    cartInit();
  }

  requestCart();


Заранее благодарю!
  • Вопрос задан
  • 76 просмотров
Решения вопроса 1
@ForSureN1 Автор вопроса
frontend dev
Решил самостоятельно.
Создал функцию которая вызывает LocalStorage и выводит данные в textarea
const textarea = document.querySelector('.textarea-table');
  function requestTable() {
    const cart = JSON.parse(localStorage.getItem('cart')) || {};
    const ids = Object.keys(cart);
    let tableItem = '';
    let totalSumma = 0;
    let tableTotalPrice = '';
    const renderTable = () => {
      for (let i in ids) {
        const keys = ids[i];
        const articul = cart[keys].articul;
        const name = cart[keys].name;
        const size = cart[keys].size;
        const color = cart[keys].color
        const quantity = cart[keys].quantity;
        const totalprice = cart[keys].totalprice;
        tableItem += `
          <tr>
          <td>${name}</td>
          <td>${articul}</td>
          <td>${size}</td>
          <td style="background-color: ${color}"></td>
          <td>${quantity}</td>
          <td>${totalprice} тг</td>
          </tr>
        `
        totalSumma += totalprice;
        tableTotalPrice = `
        <tr>
          <td colspan="6">Итоговая сумма всех товаров - ${totalSumma.toString().replace(/\B(?=(\d{3})+(?!\d))/g, " ")} тг</td>
        </tr>`;
      }
      textarea.innerHTML = `
      <table border="1" cellspacing="0" cellpadding="10">
        <thead>
          <tr>
            <th>Название</th>
            <th>Артикул</th>
            <th>Размер</th>
            <th>Цвет</th>
            <th>Количество</th>
            <th>Итоговая сумма</th>
          </tr>
        </thead>
        <tbody>${tableItem} ${tableTotalPrice}</tbody>
      </table>
      `;
    }
    renderTable();
  }

  if(textarea) {
    requestTable();
  }
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

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

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