I am doing a shopping cart using jQuery and local storage and I have come across an occurring problem.
I have created a function renderCart(), which I want to show every time the page reloads, but if I initialize it inside my document.ready function it won't execute the code, but if I create a button #show-cart and I pass it my renderCart() function then after i click on it I will see the rendered cart.
Do you know why my code won't initialize when reloading the page and how can I make it work?.
'use strict'
const products = [{
"id": 0,
"name": "Bamboo Tootbrush",
"price": 9.99,
"description": "This is a description of the item that you are about to buy. It is eco-friendly and buy buying this product you are helping the environment and the planet..",
"url": "css/img/item1.jpg",
"sale": true,
"category": "bathroom"
},
{
"id": 1,
"name": "Bamboo Dental Floss",
"price": 10.99,
"description": "This is a description of the item that you are about to buy. It is eco-friendly and buy buying this product you are helping the environment and the planet.",
"url": "css/img/item2.jpg",
"sale": false,
"category": "bathroom"
},
{
"id": 2,
"name": "Bamboo Swabs",
"price": 8.99,
"description": "This is a description of the item that you are about to buy. It is eco-friendly and buy buying this product you are helping the environment and the planet.",
"url": "css/img/item3.jpg",
"sale": true,
"category": "bathroom"
},
{
"id": 3,
"name": "Eco-friendly Straws",
"price": 12.99,
"description": "This is a description of the item that you are about to buy. It is eco-friendly and buy buying this product you are helping the environment and the planet.",
"url": "css/img/item4.jpg",
"sale": true,
"category": "kitchen"
},
{
"id": 4,
"name": "Set of 3 produce bags",
"price": 11.99,
"description": "This is a description of the item that you are about to buy. It is eco-friendly and buy buying this product you are helping the environment and the planet.",
"url": "css/img/item5.jpg",
"sale": false,
"category": "kitchen"
},
{
"id": 5,
"name": "MESH produce bags",
"price": 11.99,
"description": "This is a description of the item that you are about to buy. It is eco-friendly and buy buying this product you are helping the environment and the planet.",
"url": "css/img/item6.jpg",
"sale": false,
"category": "kitchen"
},
{
"id": 6,
"name": "Straws",
"price": 11.99,
"description": "This is a description of the item that you are about to buy. It is eco-friendly and buy buying this product you are helping the environment and the planet.",
"url": "css/img/item7.jpg",
"sale": false,
"category": "kitchen"
},
{
"id": 7,
"name": "Tootbrush ECOholic",
"price": 11.99,
"description": "This is a description of the item that you are about to buy. It is eco-friendly and buy buying this product you are helping the environment and the planet.",
"url": "css/img/item8.jpg",
"sale": false,
"category": "bathroom"
}
]
$(document).ready(function() {
//Nacitanie navigacie a footeru na vsetkych strankach
$('.menu').load('http://127.0.0.1:5500/ITvKurze-Projekt/menu.html');
$('footer').load('http://127.0.0.1:5500/ITvKurze-Projekt/footer.html');
showFavProduct();
showProduct();
filter();
addToCart();
renderCart(); //this wont render
//this below will
$('#show-cart').click(function showCart() {
renderCart();
});
addCartInfoToCartList();
cartCount();
for (let i = 0; i < products.length; i++) {
console.log(products[i]);
}
$('.clear-btn').click(function clearCartbutton() {
clearCart();
});
function addToCart() {
$('.add-btn').on("click", function(e) {
let productID = e.target.attributes.productid.value
let actualCart = localStorage.getItem('productsID');
if (actualCart == null) {
actualCart = [];
} else {
actualCart = JSON.parse(actualCart);
}
actualCart.push(productID);
localStorage.setItem('productsID', JSON.stringify(actualCart));
console.log(`Just added product to cart with ID: ${ productID }`);
cartCount();
console.log(JSON.stringify(actualCart));
renderCart();
});
};
function addCartInfoToCartList() {
for (let i = 0; i < products.length; i++) {
products[i].qty = undefined;
}
let actualCart = localStorage.getItem('productsID');
if (actualCart === null) {
actualCart = [];
} else {
actualCart = JSON.parse(actualCart);
}
for (let i = 0; i < actualCart.length; i++) {
let productPosition = actualCart[i];
if (products[productPosition].qty === undefined) {
products[productPosition].qty = 1;
} else {
products[productPosition].qty++;
}
}
}
function cartCount() {
let cartLength;
if (!localStorage.getItem('productsID')) {
cartLength = [];
console.log('Your cart is empty');
$('.cart').text(`(0)`);
// !!!!! neviem preco mi nefunguje pri prvom inicializovani riadok vyssie !!!!
} else {
cartLength = localStorage.getItem('productsID');
let cartCount = JSON.parse(cartLength).length;
console.log(`Number of products in cart: ${ cartCount }.`);
$('.cart').text(`(${ cartCount })`);
}
};
function clearCart() {
localStorage.clear();
for (let i = 0; i < products.length; i++) {
products[i].qty = undefined;
}
$('.cart-container').empty();
console.log('Your cart is empty');
};
//ZOBRAZENIE PRODUKTOV V CART ELEMENTE
function renderCart() {
for (let i of products) {
if (i.qty !== undefined) {
let productDiv = `<div class="fav-wrap ${i.category}">`;
productDiv += `<img class="fav" src="${i.url}">`;
productDiv += `<div class="name">${ i.name }</div>`;
productDiv += `<div>Price: ${ i.price } EUR</div>`
productDiv += `<div class="add-btn" productid="${ i.id }">ADD TO CART</div>`;
productDiv += '</div>';
$('.cart-container').append(productDiv);
};
};
};
//Zobrazenie akciovych produktov na index.html v sekcii Our Favourites
function showFavProduct() {
for (let i of products) {
if (i.sale === true) {
let productDiv = `<div class="fav-wrap ${i.category}">`;
productDiv += `<img class="fav" src="${i.url}">`;
productDiv += `<div class="name">${ i.name }</div>`;
productDiv += `<div>Price: ${ i.price } EUR</div>`
productDiv += `<div class="add-btn" productid="${ i.id }">ADD TO CART</div>`;
productDiv += '</div>';
$('#fav-products').append(productDiv);
}
}
}
//Zobrazenie vsetkych produktov na SHOP.html
function showProduct() {
for (let i of products) {
let productDiv = `<div class="fav-wrap ${i.category}">`;
productDiv += `<img class="fav" src="${i.url}">`;
productDiv += `<div class="name">${ i.name }</div>`;
productDiv += `<div>Price: ${ i.price } EUR</div>`
productDiv += `<div class="add-btn" productid="${ i.id }">ADD TO CART</div>`;
productDiv += '</div>';
$('#all-products').append(productDiv);
}
}
//Vyber kategorie v SHOPE
function filter() {
$('#all').click(function() {
$(".kitchen, .bathroom").show();
$(this).addClass("selected");
$("#cat-kitchen, #cat-bath").removeClass("selected");
});
$('#cat-kitchen').click(function() {
$(".bathroom").hide();
$(".kitchen").show();
$("#all, #cat-bath").removeClass("selected");
$(this).addClass("selected");
});
$('#cat-bath').click(function() {
$(".kitchen").hide();
$(".bathroom").show();
$("#all, #cat-kitchen").removeClass("selected");
$(this).addClass("selected")
});
}
});I expect that I will see the actual cart that I have stored in my local storage right after reloading the page, so I do not have to click the show cart button every time.
Your code does run and your function does execute.
But it contains only a loop with if (i.qty !== undefined).
And indeed, none of your objects contains qty at start, so the loop doesn't do anything. It does what it's supposed to do.
// No "qty" anywhere.
{
"id": 1,
"name": "Bamboo Dental Floss",
"price": 10.99,
"description": "This is a description of the item that you are about to buy. It is eco-friendly and buy buying this product you are helping the environment and the planet.",
"url": "css/img/item2.jpg",
"sale": false,
"category": "bathroom"
}