Добрый день!
Код работает, за исключением одного момента.
Есть корзина, куда должен отправляться выбранный товар при нажатии кнопки "Купить".
Есть, также, мини-корзина со счётчиком количества товара, который отображается на этой же странице в левом верхнем углу. С мини-корзиной проблемы нет, когда нажимаешь "Купить", то счётчик увеличивается.
Проблема с главной корзиной (
cart.html) - при нажатии "Купить" корзина, или не пополняется, или пополняется, но не отображается на экране.
При нажатии "Купить" на вкладке "Network" в браузере Хром ничего не происходит, не выводится.
В
cart.html отображается, только форма для данных покупателя, а сам товар нет.
Файл
main.js:
Код:
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(главная корзина):
Код:
<!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:
Код:
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); // отправить письмо с заказом
});
Хотел ещё выложить некоторые файлы:
index.html и
function.php (в нём подключения к БД), но слишком длинный текст получается. Надеюсь на Вашу помощь.
Вот, что выводится в браузере, а должен быть ещё сам выбранный товар:
https://www.programmersforum.ru/atta...1&d=1596914398