Есть интернет магазин. В нем карточки товара.
Весь массив сданными о карточках товара - js/goods.json
function loadGoods() {
//загружаю товары на страницу
$.getJSON('/js/goods.json', function (data) {
let goods = data;
let out = '';
for (let key in data){
out+='<div class="product product1 '+data[key]['class']+'">';
out+='<button data-art="'+key+'" class="buttonBasket" id="buttonBasket">';
out+='<img src="/img/cart_icon.svg" alt="">';
out+='<div>В корзину</div>';
out+='</button>';
out+='<a href="/product/" class="a1" data-open="'+key+'">';
out+='<div class="image">';
out+='<img src="'+data[key].image+'" alt="">';
out+='</div>';
out+='<div class="info">';
out+='<h3>'+data[key]['name']+'</h3>';
out+='<div class="info-price">';
out+=' <div><span class="prise">'+data[key]['cost']+'<small> ₽</small></span></div>';
out+='</div>';
out+='</div>';
out+='</a>';
out+='</div>';
}
$('.goods').html(out);
$('button.buttonBasket').on('click', addToCart);
$('a1').on('click', product);
});
}
function addToCart() {
//добавляем товар в корзину
let articul = $(this).attr('data-art');
if (cart[articul]!=undefined) {
cart[articul]++;
}
else {
cart[articul] = 1;
}
localStorage.setItem('cart', JSON.stringify(cart) );
showMiniCart();
}
function checkCart(){
//проверяю наличие корзины в localStorage;
if ( localStorage.getItem('cart') != null) {
cart = JSON.parse (localStorage.getItem('cart'));
}
}
function showMiniCart(){
//показываю содержимое корзины
let sum=0;
for (let w in cart){
sum = sum + cart[w];
}
localStorage.setItem('value-cart', sum);
document.getElementById('value-cart').innerHTML = 'Колличество товаров '+ localStorage.getItem('value-cart');
}
При клике на кнопку "в корзину" информация через localStorage передается в корзину.
Как при клике на карточку товара передать информацию, что кликнули именно на данную конкретную карточку товара. И как передать эти данные в корзину? Сама страница с описанием товара загружается корректно, но только если я пропишу значение ключа. В примере значение 2301.
function product() {
//загружаю товары на страницу
$.getJSON('/js/goods.json', function (data) {
let goods = data;
let out = '';
localStorage.setItem('cart', JSON.stringify(cart) )
out+='<div class="cart_product">';
out+='<pre>';
out+='<div class="left-column-product"><img src="'+data[2301].image+'" alt=""></div>';
out+='</pre> ';
out+='<div class="right-column-product">';
out+='<div class="product-description-product">';
out+='<h1>'+data[2301]['name']+'</h1>';
out+='<p class="description">Крем-краска для волос со сбалансированной системой компонентов обеспечивает стойкий результат окрашивания на долгое время натуральным, седым и ранее окрашенным волосам.';
out+='Обновлённая формула красителя включает в состав экстракт женьшеня и рисовые протеины, увлажняющие и ухаживающие компоненты, которые обеспечивают максимальную стойкость цвета и блеска, защиту от УФ-лучей и исключительное качество волос.</p>';
out+='<div class="product-configuration">';
out+='<div class="product-price-product">' +data[2302]['cost']+' ₽';
out+='<button data-art="'+2302+'" class="buttonBasket" id="buttonBasket">';
out+='<img src="/img/cart_icon.svg" alt="">';
out+='<div>В корзину</div>';
out+='</button>';
out+='</div>';
out+='</div>';
out+='<pre>';
out+='</div>';
$('.productRet').html(out);
$('button.buttonBasket').on('click', addToCart);
});
}
Простой
Простой
