Добрый день, имеется готовая корзина с товарами, теперь нужно сделать так, что этот же товар попадал в виде таблицу в 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();
Заранее благодарю!
