function product() { // функция срабатывает при клике на карточку
let articul2 = $(this).attr('data-open'); //пытаюсь получить ключ
$.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[2302].image+'" alt=""></div>'; // вместо "2301" пытаюсь вставить articul2
out+='</pre> ';
out+='<div class="right-column-product">';
out+='<div class="product-description-product">';
out+='<h1>'+data[2301]['name']+'</h1>'; // вместо "2301" пытаюсь вставить articul2
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);
});
}