У меня есть небольшой интернет магазин.
На котором есть страница женские товары и страница мужские товары, а также страница корзины. Когда я добавляю в корзину например товар из страницы(сами товары берутся из JSON файла) женских товаров, он отображается в корзине, а когда я еще добавляю товар в корзину из страницы мужские товары то корзина становится пустая и в консоли ошибка:
Uncaught TypeError: Cannot read property 'image' of undefined
at showCart (cart-man.js:19)
at Object.success (cart-man.js:7)
at i (jquery-3.1.1.min.js:2)
at Object.fireWith [as resolveWith] (jquery-3.1.1.min.js:2)
at A (jquery-3.1.1.min.js:4)
at XMLHttpRequest. (jquery-3.1.1.min.js:4)
Тоесть по отдельности из обоих страниц товары добавляются в корзину, а если вместе ошибка и пустая корзина. После очистки localstorage в браузере товары снова добавляются в корзину но также только по отдельности до момента добавления товара из другой страницы.
Код:
Мужские товары
man.html(страница з товарами):
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link href="/style/woman.css" type="text/css" rel="stylesheet">
<script src="js/jquery-3.1.1.min.js"></script>
<script src="js/goods-man.js"></script>
</head>
<body>
<div class="wrapper">
<!---------------------HEADER------------------------>
<header>
<div class="header-left">
<a class="header-title" href="/page_header/woman.html">Женщинам</a>
<a class="header-title" href="/page_header/man.html">Мужчинам</a>
</div>
<div class="header-centered">
<a href="/index.html">CLOFU</a>
</div>
<div class="header-right">
<a class="header-shop" href="/page_header/shop.html">Магазины</a>
<a class="icon" href="/page_header/question.html"><img src="/src/header/question.png"></a>
<a class="icon" href="/page_header/sign.html"><img src="/src/header/sign.png"></a>
<a class="icon" href="/page_header/favorite.html"><img src="/src/header/favorite.png"></a>
<a class="icon" href="/page_header/cart.html"><img src="/src/header/basket.png"></a>
</div>
</header>
<div class="filter-wrapper">
<div class="filter">
<div class="filter-inner">
<div class="dropdown">
<h2 onclick="myFunction()" class="dropbtn">Страна:</h2>
<div id="myDropdown" class="dropdown-content">
<input type="checkbox" class="btn" value="turkey"> Турция<br>
<input type="checkbox" class="btn" value="china"> Китай<br>
<input type="checkbox" class="btn" value="france"> Франция<br>
<input type="checkbox" class="btn" value="italy"> Италия<br>
<button class="btn-filter">Все</button>
</div>
</div>
</div>
</div>
<div class="filter">
<div class="filter-inner">
<div class="dropdown">
<h2 onclick="myFunction2()" class="dropbtn">Бренди:</h2>
<div id="myDropdown" class="dropdown-content">
<input type="checkbox" class="btn2" value="Nvogue"> Nvogue<br>
<input type="checkbox" class="btn2" value="LMfasion"> LMfasion<br>
<button class="btn-filter2">Все</button>
</div>
</div>
</div>
</div>
</div>
<main>
<div id="mini-cart"></div>
<div id="goods"></div>
</main>
cart.html (корзина)
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Корзина</title>
<link href="/style/woman.css" type="text/css" rel="stylesheet">
<script src="js/jquery-3.1.1.min.js"></script>
<script src="js/cart-man.js"></script>
<script src="js/cart-woman.js"></script>
</head>
<body>
<div class="wrapper">
<!---------------------HEADER------------------------>
<header>
<div class="header-left">
<a class="header-title" href="/page_header/woman.html">Женщинам</a>
<a class="header-title" href="/page_header/man.html">Мужчинам</a>
</div>
<div class="header-centered">
<a href="/index.html">CLOFU</a>
</div>
<div class="header-right">
<a class="header-shop" href="/page_header/shop.html">Магазины</a>
<a class="icon" href="/page_header/question.html"><img src="/src/header/question.png"></a>
<a class="icon" href="/page_header/sign.html"><img src="/src/header/sign.png"></a>
<a class="icon" href="/page_header/favorite.html"><img src="/src/header/favorite.png"></a>
<a class="icon" href="/page_header/cart.html"><img src="/src/header/basket.png"></a>
</div>
</header>
<main>
<div id="my-cart"></div>
</main>
goods-man.js:
var cart = {};
$(document).ready(function() {
filterShow();
checkCart();
showMiniCart();
var data;
function filterShow() {
var arr = [...document.querySelectorAll(".btn:checked")].map(({
value
}) => value);
var out = '';
for (var key in data) {
if (arr.length) {
var country = data[key].country;
if (!arr.includes(country)) continue;
}
out += '<div class="single-goods">';
out += '<h3>' + data[key]['name'] + '</h3>';
out += '<img src="' + data[key].image + '">';
out += '<p>Цена: ' + data[key]['cost'] + ' руб.'+ '</p>';
out += '<button class="add-to-cart" data-art="' + key + '">Купить</button>';
out += '</div>';
}
$('#goods').html(out);
$('button.add-to-cart').on('click', addToCart);
}
function filterShow2() {
var arr = [...document.querySelectorAll(".btn2:checked")].map(({
value
}) => value);
var out = '';
for (var key in data) {
if (arr.length) {
var brand = data[key].brand;
if (!arr.includes(brand)) continue;
}
out += '<div class="single-goods">';
out += '<h3>' + data[key]['name'] + '</h3>';
out += '<img src="' + data[key].image + '">';
out += '<p>Цена: ' + data[key]['cost'] + ' руб.'+ '</p>';
out += '<button class="add-to-cart" data-art="' + key + '">Купить</button>';
out += '</div>';
}
$('#goods').html(out);
$('button.add-to-cart').on('click', addToCart);
}
function addToCart() {
var articul = $(this).attr('data-art');
if (cart[articul]!=undefined) {
cart[articul]++;
}
else {
cart[articul] = 1;
}
localStorage.setItem('cart', JSON.stringify(cart) );
showMiniCart();
}
function checkCart(){
if ( localStorage.getItem('cart') != null) {
cart = JSON.parse (localStorage.getItem('cart'));
}
}
function showMiniCart(){
var out ='';
for (var w in cart){
out +='В корзине: '+ w + ' --- '+cart[w]+' шт.' +'<br>';
}
$('#mini-cart').html(out);
}
function init() {
filterShow();
$(".btn").on("click", filterShow);
$(".btn-filter").on("click", function() {
$(".btn").prop("checked", false);
filterShow()
})
}
function init2() {
filterShow2();
$(".btn2").on("click", filterShow2);
$(".btn-filter2").on("click", function() {
$(".btn2").prop("checked", false);
filterShow2()
})
}
$.getJSON('goods-man.json', function(json) {
data = json;
init();
init2();
})
});
cart-man.js
var cart = {};
$.getJSON('goods-man.json', function (data) {
var goods = data;
checkCart();
showCart();
function showCart() {
if ($.isEmptyObject(cart)) {
var out = 'Корзина пустая. Добавте товар в корзину <a href="man.html">Вернуться в раздел "Мужская одежда"</a>';
$('#my-cart').html(out);
}
else {
var out = '';
for (var key in cart) {
out += '<button class="delete" data-art="' + key + '" >x</button>';
out += '<img src="' + goods[key].image + '" width="48">';
out += goods[key].name;
out += '<button class="minus" data-art="' + key + '">-</button>';
out += cart[key];
out += '<button class="plus" data-art="' + key + '">+</button>';
out += cart[key] * goods[key].cost;
out += '<br>';
}
out += '<button class="p">Оплатити</button>';
$('#my-cart').html(out);
$('.plus').on('click', plusGoods);
$('.minus').on('click', minusGoods);
$('.delete').on('click', deleteGoods);
}
}
function plusGoods() {
var articul = $(this).attr('data-art');
cart[articul]++;
saveCartToLS();
showCart();
}
function minusGoods() {
var articul = $(this).attr('data-art');
if (cart[articul] > 1) {
cart[articul]--;
}
else {
delete cart[articul];
}
saveCartToLS();
showCart();
}
function deleteGoods() {
var articul = $(this).attr('data-art');
delete cart[articul];
saveCartToLS();
showCart();
}
});
function checkCart() {
if (localStorage.getItem('cart') != null) {
cart = JSON.parse(localStorage.getItem('cart'));
}
}
function saveCartToLS() {
localStorage.setItem('cart', JSON.stringify(cart));
}
goods-man.json (где храняться объекты (тоесть сами товары)):
{
"Рубашка №1" : {
"name" : "Рубашка №1",
"cost" : 500,
"country" : "turkey",
"image" : "images/clothes-man/1.jpg",
"brand": "Nvogue"
},
"Рубашка №2" : {
"name" : "Рубашка №2",
"cost" : 500,
"country" : "turkey",
"image" : "images/clothes-man/2.jpg",
"brand": "LMfasion"
},
"Рубашка №3" : {
"name" : "Рубашка №3",
"cost" : 500,
"country" : "china",
"image" : "images/clothes-man/3.jpg",
"brand": "Nvogue"
}
}
Для женских товаров файлы аналогичние используються, два JS файла, файл woman.html и goods-woman.json со своими объектами, поэтому писать их не буду.
