Получать количество товаров в корзине JS
Всем привет, никак не могу разобраться как получить текущее количество элементов в корзине. Так же были попытки добавить это значение в localStorage, получалось NuN. Так же не знаю, как после удаления заново получать это количество.
window.onload = function() {
let cart = {};
let goods = {};
function loadCartToStorage() {
if (localStorage.getItem('cart') != undefined) {
cart = JSON.parse(localStorage.getItem('cart'));
}
}
loadCartToStorage();
let getJSON = function(url, callback) {
let xhr = new XMLHttpRequest();
xhr.open('GET', url, true);
xhr.responseType = 'json';
xhr.onload = function() {
let status = xhr.status;
if (status === 200) {
callback(null, xhr.response);
} else {
callback(status, xhr.response);
}
};
xhr.send();
}
getJSON('https://spreadsheets.google.com/feeds/list/1jpfc_qA__UhF7zcqlS_axsn-qi9xr0r8DXFSr1M2f-Q/od6/public/values?alt=json', function(err, data) {
console.log(data);
if (err !== null) {
alert('Error: ' + err);
} else {
data = data['feed']['entry'];
console.log(data);
goods = arrayHelper(data);
console.log(goods);
document.querySelector('.shop-field').innerHTML = showGoods(data);
showCart();
}
});
function showGoods(data) {
let out = '';
for(let i = 0; i < data.length; i++) {
if (data[i]['gsx$show']['$t'] == 1) {
out += `<div class="col-lg-3 col-md-3 col-sm-2 text-center">`;
out += `<div class="goods">`;
out += `<h5>${data[i]['gsx$name']['$t']}</h5>`;
out += `<img class="good-photo" src="${data[i]['gsx$image']['$t']}" alt="">`;
out += `<p class="cost">Цена: ${data[i]['gsx$cost']['$t']}грн</p>`;
out += `<p class="cost">На складе: ${data[i]['gsx$kg']['$t']}кг</p>`;
out += `<p><button class="btn btn-success buy" type="button" data="${data[i]['gsx$id']['$t']}" name="add-to-cart">Купить</button></p>`
out += `</div>`;
out += `</div>`;
}
}
return out;
}
document.onclick = function(e) {
let counter = document.querySelector('.counter');
let counterVal = parseInt(counter.innerHTML);
if (e.target.attributes.name != undefined) {
if (e.target.attributes.name.nodeValue == 'add-to-cart') {
addToCart(e.target.attributes.data.nodeValue);
} else if (e.target.attributes.name.nodeValue == 'delete-goods') {
delete cart[e.target.attributes.data.nodeValue];
showCart();
localStorage.setItem('cart', JSON.stringify(cart));
} else if (e.target.attributes.name.nodeValue == 'plus-goods') {
cart[e.target.attributes.data.nodeValue]++;
showCart();
localStorage.setItem('cart', JSON.stringify(cart));
} else if (e.target.attributes.name.nodeValue == 'minus-goods') {
if (cart[e.target.attributes.data.nodeValue] - 1 == 0) {
delete cart[e.target.attributes.data.nodeValue];
} else {
cart[e.target.attributes.data.nodeValue]--;
}
showCart();
localStorage.setItem('cart', JSON.stringify(cart));
}
}
}
function addToCart(elem) {
if (cart[elem] !== undefined) {
cart[elem]++;
} else {
cart[elem] = 1;
}
console.log(cart);
showCart();
localStorage.setItem('cart', JSON.stringify(cart));
}
function arrayHelper(arr) {
let out = {};
for (let i = 0; i < arr.length; i++) {
let temp = {};
temp['articul'] = arr[i]['gsx$articul']['$t'];
temp['name'] = arr[i]['gsx$name']['$t'];
temp['category'] = arr[i]['gsx$category']['$t'];
temp['cost'] = arr[i]['gsx$cost']['$t'];
temp['image'] = arr[i]['gsx$image']['$t'];
out [arr[i]['gsx$id']['$t']] = temp;
}
return out;
}
function showCart() {
let ul = document.querySelector('.cart');
let total = document.querySelector('.final-prise');
ul.innerHTML = '';
sum = 0;
for (let key in cart) {
let li = '<li>';
li += goods[key]['name'] + ' ';
li += cart[key] + 'кг.' + ' ';
li += goods[key]['cost'] * cart[key] + 'грн ';
li += `<div class="controls">`
li += `<button class="btn btn-success control" name="plus-goods" data="${key}">+</button> `;
li += `<button class="btn btn-success control" name="minus-goods" data="${key}">-</button> `;
li += `<button class="btn btn-success control" name="delete-goods" data="${key}">x</button> `;
li += `</div>`
li += '</li>'
sum += goods[key]['cost'] * cart[key];
ul.innerHTML += li;
}
total.innerHTML = 'Итого: ' + sum + 'грн';
}
}