When I try adding product to cart it shows this error in the developer tools Uncaught TypeError: Cannot read properties of null (reading 'push') [1]: https://i.stack.imgur.com/gdEVp.png
And this is the code for adding items to cart:
/*-------------------------
Shopping Cart Function
---------------------------*/
var countTotalItem;//var to count total
var cart=[];//object cart
var Item=function(url, name, price, count){
this.url=url;
this.name=name;
this.price=price;
this.count=count;
this.size=42;
};//object item
var Item1=function(url, name, price, count, size){
this.url=url;
this.name=name;
this.price=price;
this.count=count;
this.size=size;
};
function addToCart(url, name, price, count){
for(var i in cart){
if(cart[i].name===name){
cart[i].count+=count;
//if there are same item, then just change the total count
countTotalItem= countTotalItem + 1;
saveCart();//save it to local storage
return;
}
}
var item= new Item(url, name, price, count);
cart.push(item);//if new item, then add it to cart object
countTotalItem= countTotalItem + 1;
saveCart();
}
function addToCart(url, name, price, count,size){
for(var i in cart){
if(cart[i].name===name){
cart[i].count+=count;
countTotalItem= countTotalItem + 1;
saveCart();
return;
}
}
var item1= new Item1(url, name, price, count,size);
cart.push(item1);
countTotalItem= countTotalItem + 1;
saveCart();
}
function removeFromCart(name){
var substractCount=0;
for(var i in cart){
if(cart[i].name===name){
substractCount=cart[i].count;
countTotalItem-=substractCount;
//if find the item that match name, then remove it.
cart.splice(i, 1);
saveCart();// save to local storage
break;
}
}
}
function listCart(){
var cartCopy=[];
for(var i in cart){
var item=cart[i];
var itemCopy={};
for(var p in itemCopy){
itemCopy[p]=item[p];
}
cartCopy.push(itemCopy);
}
return cartCopy;
}
function clearCart(){
cart = [];//clear the cart
count=0;
saveCart();//save to local storage
}
function countTotalPrice(){
var totalPrice=0;
for(var i in cart){
//count total price
totalPrice += cart[i].price * cart[i].count;
}
return totalPrice;
}
function saveCart(){
//save the cart object to local storage with in string form
localStorage.setItem('shoppingCart', JSON.stringify(cart));
localStorage.setItem('countItem', JSON.stringify(countTotalItem));
}
function loadCart(){
//get the string of cart then parse it into object
cart= JSON.parse(localStorage.getItem('shoppingCart'));
countTotalItem= JSON.parse(localStorage.getItem('countItem'));
}
loadCart();
And from the answer of David setting the cart array as null it solves the problem of reading the data in LocalStorage but when I try to open the cart it remains empty. Can anyone please help me for the clicked product to show in the cart? I am a beginner in jQuery your help is deeply appreciated.