Добрый день! Код работает, за исключением одного момента. Есть корзина, куда должен отправляться выбранный товар при нажатии кнопки "Купить". Есть, также, мини-корзина со счётчиком количества товара, который отображается на этой же странице в левом верхнем углу. С мини-корзиной проблемы нет, когда нажимаешь "Купить", то счётчик увеличивается. Проблема с главной корзиной (cart.html) - при нажатии "Купить" корзина, или не пополняется, или пополняется, но не отображается на экране. При нажатии "Купить" на вкладке "Network" в браузере Хром ничего не происходит, не выводится. На странице cart.html отображается, только форма для данных покупателя, а сам выбранный товар нет. Файл index.html: HTML: <!DOCTYPE html> <html lang="ru"> <head> <meta charset="UTF-8"> <title>autoshop</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <!--<div class="cart">--> <!--<p class="name">Цветы</p>--> <!--<img src="images/grape.png" alt="">--> <!--<div class="cost">500</div>--> <!--<button class="add-to-cart">Купить</button>--> <!--</div>--> <header></header> <main> <a href="cart.html">Корзина</a> <div class="mini-cart"></div> <!--<a href="later.html">Желания</a>--> <div class="goods-out"></div> </main> <footer></footer> <script src="js/jquery-3.5.1.min.js"></script> <script src="js/main.js"></script> </body> </html> Файл main.js: Код (Javascript): var cart = {}; // корзина function init() { //вычитуем файл goods.json //$.getJSON("goods.json", goodsOut); $.post( "admin/core.php", { "action" : "loadGoods" }, goodsOut ); } function goodsOut(data) { // вывод на страницу data = JSON.parse(data); console.log(data); var out=''; for (var key in data) { // out +='<div class="cart">'; // out +='<p class="name">'+data[key].name+'</p>'; // out += '<img src="images/'+data[key].img+'" alt="">'; // out +='<div class="cost">'+data[key].cost+'</div>'; // out +='<button class="add-to-cart">Купить</button>'; // out +='</div>'; //--------- out +='<div class="cart">'; //out +=`<button class="later" data-id="${key}">♥</button>`; out +=`<p class="name"><a href="goods.html#${key}">${data[key].name}</a></p>`; //out +=`<img src="images/${data[key].img}" alt="">`; out +=`<div class="cost">${data[key].cost}</div>`; out +=`<button class="add-to-cart" data-id="${key}">Купить</button>`; out +='</div>'; } $('.goods-out').html(out); $('.add-to-cart').on('click', addToCart); $('.later').on('click', addToLater); } function addToLater() { //добавляем товар в "желания" var later = {}; if (localStorage.getItem('later')) { // если есть - расшифровываю и записываю в переменную cart later = JSON.parse(localStorage.getItem('later')); } alert('Добавлено в Желания'); var id = $(this).attr('data-id'); later[id] = 1; localStorage.setItem('later', JSON.stringify(later)); //корзину в строку } function addToCart() { //добавляем товар в корзину var id = $(this).attr('data-id'); // console.log(id); if (cart[id]==undefined) { cart[id] = 1; //если в корзине нет товара - делаем равным 1 } else { cart[id]++; //если такой товар есть - увеличиваю на единицу } showMiniCart(); saveCart(); } function saveCart() { //сохраняю корзину в localStorage localStorage.setItem('cart', JSON.stringify(cart)); //корзину в строку } function showMiniCart() { //показываю мини корзину var out=""; for (var key in cart) { out += key +' --- '+ cart[key]+'<br>'; } $('.mini-cart').html(out); } function loadCart() { //проверяю есть ли в localStorage запись cart if (localStorage.getItem('cart')) { // если есть - расширфровываю и записываю в переменную cart cart = JSON.parse(localStorage.getItem('cart')); showMiniCart(); } } $(document).ready(function () { init(); loadCart(); }); Файл cart.html(главная корзина): HTML: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <header></header> <main> <div class="main-cart"></div> <div class="email-field"> <p>Имя: <input type="text" id="ename"></p> <p>Email: <input type="text" id="email"></p> <p>Телефон: <input type="text" id="ephone"></p> <p><button class="send-email">Заказать</button></p> </div> </main> <footer></footer> <script src="js/jquery-3.5.1.min.js"></script> <script src="js/cart.js"></script> </body> </html> Файл cart.js: Код (Javascript): var cart = {}; function loadCart() { //проверяю есть ли в localStorage запись cart if (localStorage.getItem('cart')) { // если есть - расширфровываю и записываю в переменную cart cart = JSON.parse(localStorage.getItem('cart')); showCart(); } else { $('.main-cart').html('Корзина пуста!'); } } function showCart() { //вывод корзины if (!isEmpty(cart)) { $('.main-cart').html('Корзина пуста!'); } else { $.getJSON('goods.json', function (data) { var goods = data; var out = ''; for (var id in cart) { out += `<button data-id="${id}" class="del-goods">x</button>`; //out += `<img src="images\\${goods[id].img}">`; out += ` ${goods[id].name }`; out += ` <button data-id="${id}" class="minus-goods">-</button> `; out += ` ${cart[id]} `; out += ` <button data-id="${id}" class="plus-goods">+</button> `; out += cart[id]*goods[id].cost; out += '<br>'; } $('.main-cart').html(out); $('.del-goods').on('click', delGoods); $('.plus-goods').on('click', plusGoods); $('.minus-goods').on('click', minusGoods); }); } } function delGoods() { //удаляем товар из корзины var id = $(this).attr('data-id'); delete cart[id]; saveCart(); showCart(); } function plusGoods() { //добавляет товар в корзине var id = $(this).attr('data-id'); cart[id]++; saveCart(); showCart(); } function minusGoods() { //уменьшаем товар в корзине var id = $(this).attr('data-id'); if (cart[id]==1) { delete cart[id]; } else { cart[id]--; } saveCart(); showCart(); } function saveCart() { //сохраняю корзину в localStorage localStorage.setItem('cart', JSON.stringify(cart)); //корзину в строку } function isEmpty(object) { //проверка корзины на пустоту for (var key in object) if (object.hasOwnProperty(key)) return true; return false; } function sendEmail() { var ename = $('#ename').val(); var email = $('#email').val(); var ephone = $('#ephone').val(); if (ename!='' && email!='' && ephone!='') { if (isEmpty(cart)) { $.post( "core/mail.php", { "ename" : ename, "email" : email, "ephone" : ephone, "cart" : cart }, function(data){ if (data==1) { alert('Заказ отправлен'); } else { alert('Повторите заказ'); } } ); } else { alert('Корзина пуста'); } } else { alert('Заполните поля'); } } $(document).ready(function () { loadCart(); $('.send-email').on('click', sendEmail); // отправить письмо с заказом }); Хотел ещё файл function.php выложить. Там подключения к БД, но, из-за ограничений по количеству символов не получилось. Может, в следующем сообщении выложу, если это необходимо. Надеюсь на Вашу помощь.
В функции showCart() убрал ! , там где isEmpty. Теперь появляется "Корзина пуста!", хотя в мини-корзине отображается добавление товара.
Ну посмотрел! Только бы ещё, как бы понять, что я там увидел. Указание на строку № 26 в файле cart.js: Код (Text): out += ` ${goods[id].name }`; При наведении на крестик появляется: Uncaught TypeError: Cannot read property 'name' of undefined Что не так с этой строкой? Гуглю, конечно, но пока не доходит.