Добрый день, делаю интернет магазин, у меня имеется товар, по нажатию кнопки он должен попадать на другую страницу в корзину(корзина не выпадающая, а именно отдельная страница). Делал по гайду на ютубе, казалось бы все работает, я уже и обрадовался что впервые без багов, не знаю можно ли назвать это багом конечно, скорее моя неопытность и незнание. Так вот, имеется некий класс js-cart, для него мы добавляем ребенка, и собственно и выводим наш товар из LocalStorage, я для теста добавил на этой же странице этот класс рандомному блоку, и так же добавил этот класс в корзине с готовой версткой заранее. Но если я уберу этот класс со страницы где находится моя кнопка КУПИТЬ, то и работать все перестает вовсе, не понимаю почему. Вот код
function requestCart() {
const cartDOMElement = document.querySelector('.js-cart')
const cart = JSON.parse(localStorage.getItem('cart')) || {};
if(!cartDOMElement) {
return;
}
const renderCartItem = ({articul, name, desc, color, size, price,totalprice, src, quantity}) => {
const cartItemDOMElement = document.createElement('tr');
const cartItemTemplate = `
<tr class="product__item">
<td class="product__title">
<a href="#"><img src="${src}"></a>
</td>
<td class="product__name">
<h2>${name}</h2>
<p>${desc}</p>
</td>
<td class="product__size-color">
<p>${size}</p>
</td>
<td class="product__count">
<p>${quantity}</p>
</td>
<td class="product__price">
<p>${price}</p>
</td>
<td class="product__summ">
<p>${totalprice}</p>
</td>
<td class="product__remove">
<button class="remove buy"><img src="images/remove.svg" alt=""></button>
</td>
</tr>
`;
cartItemDOMElement.innerHTML = cartItemTemplate;
cartItemDOMElement.setAttribute('data-product-articul', articul)
cartItemDOMElement.classList.add('js-cart-item')
cartDOMElement.appendChild(cartItemDOMElement);
}
const saveCart = () => {
localStorage.setItem('cart', JSON.stringify(cart));
}
const updateCart = () => {
console.log(cart);
saveCart();
}
const deleteCartItem = (articul) => {
const cartItemDOMElement = cartDOMElement.querySelector(`[data-product-articul="${articul}"]`);
cartDOMElement.removeChild(cartItemDOMElement);
delete cart[articul];
updateCart();
console.log(cartItemDOMElement)
}
const addCartItem = (data) => {
const {articul} = data;
cart[articul] = data;
updateCart();
renderCartItem(data);
}
const getProductData = (productDOMElement) => {
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');
const quantity = 1;
const totalprice = quantity * +(price);
return { name, desc, articul, size, color, price, totalprice, src, quantity,};
}
const renderCart = () => {
const ids = Object.keys(cart);
// console.log(ids);
ids.forEach((articul) => renderCartItem(cart[articul]));
};
const cartInit = () => {
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);
}
if (target.classList.contains('remove')) {
e.preventDefault();
const cartItemDOMElement = target.closest('.js-cart-item');
const productArticul = cartItemDOMElement.getAttribute('data-product-articul');
deleteCartItem(productArticul);
}
});
}
cartInit();
}
requestCart();
это страница с корзиной, где написан класс js-cart, туда должен попадать товар
<section class="busket">
<div class="container">
<div class="bucket__container content">
<form action="">
<table class="product">
<thead class="product__head">
<tr>
<th class="product__title">Товар</th>
<th class="product__name"> </th>
<th class="product__size-color">Размер|Цвет</th>
<th class="product__count">Количество</th>
<th class="product__price">Цена</th>
<th class="product__summ">Итог</th>
<th class="product__remove"> </th>
</tr>
</thead>
<tbody class="product__body js-cart">
</tbody>
</table>
</form>
</div>
</div>
</section>
Это страница с самим товаром, здесь мы получаем атрибуты по нажатию кнопки
<div class="about-item__specification">
<div class="about-item__description js-product" data-product-name="Millenia Колье" data-product-desc="Кубический Цирконий Swarovski, Белый" data-product-price="40000" data-product-color="" data-product-size="50" data-product-articul="5552658" data-product-img="images/photo1.jpg">
<p class="about-item__header">Новинки</p>
<h3 class="about-item__name">Millenia Колье</h3>
<p class="about-item__text">Кубический Цирконий Swarovski, Белый</p>
<p class="about-item__price">40 000 тг</p>
<div class="about-item__choice-color">
<p class="color-text">Доступно в четырех расцветках:</p>
<div class="about-item__color">
<div class="color__item"><a href="#"><img src="images/col1.svg" alt=""></a></div>
<div class="color__item"><a href="#"><img src="images/col1.svg" alt=""></a></div>
<div class="color__item"><a href="#"><img src="images/col1.svg" alt=""></a></div>
<div class="color__item"><a href="#"><img src="images/col1.svg" alt=""></a></div>
</div>
<a href="#" class="about-item__manual">Справочник размеров <img src="images/leftright.svg" alt=""></a>
<div class="about-item__buy">
<button class="buy__product buy js-buy">Купить</button>
<a href="#" class="busket__item"><img src="images/busket.svg" alt=""></a>
<a href="" class="link__item"><img src="images/link.svg" alt=""></a>
</div>
<div class="about-item__characters">
<div class="characters-name">
<p>Артикул:</p>
<p>Коллекция:</p>
<p>Цвет:</p>
<p>Размер:</p>
<p>Материал:</p>
<p>Страна производства:</p>
</div>
<div class="characters-data">
<p>5552658</p>
<p>зодиак</p>
<p>размер</p>
<p>11х4х1,5 см</p>
<p>покрытие оттенка розового золата</p>
<p>Thailand</p>
</div>
</div>
</div>
</div>
</div>
а вот здесь я для себя для теста добавил блоку класс js-cart, это на той же странице где и сама кнопка купить, так сказать для того чтобы отслеживать что происходит вообще, и если я вот здесь в этом блоке уберу js-cart, то и в страницу с корзиной он тоже не будет попадать
<section class="description-item">
<div class="container">
<div class="description-item__container">
<div class="description-item__content">
<div class="description-item__title title__cards">
Millenia Колье
</div>
<div class="description-item__text js-cart">
Этот кулон имеет эффектную форму восьмиугольника и станет одним из самых часто надеваемых украшений в вашей коллекции. К изящной цепочке с родиевым покрытием прикреплён центральный элемент — прозрачный камень ступенчатой огранки, который движется, отвечая на каждое ваше движение, в обрамлении более мелких камней огранки «бриллиант». Изделие абсолютно универсально. Его можно носить и с белой футболкой, создавая утончённые образы, и сочетать с другими ожерельями и колье, делая свой стиль более эффектным. Это колье принадлежит к семейству Millenia и создано креативным директором Джованной Энгельберт для Collection I.
</div>
</div>
</div>
</div>
</section>
Заранее благодарю за помощь и потраченное время.
