Within my Angular App, there exists a list of objects that can be added to the cart. When an item is added to the cart, I save the cart in local storage. However, a problem arises when the item is added from the product detail page where the item image is large, leading to a localstorage error due to memory constraints.
To address this issue, I plan to set the item's image to null when it is added from the item detail page. Then, when the user navigates to the cart, I will call an API to retrieve images for all products without the image.
The challenge lies in the addToCart function within my cart service:
addToCart(product: Plu, big_image?: boolean): any{
if (big_image) {
product.img = null;
}
this.carrello.plu.push({ ...product});
this.cartTotal();
}
As the product: Plu is a reference, setting the image to null also affects the actual Plu in the detail item page. Therefore, the best solution would involve setting the Plu image to null before adding it to this.carrello.plu.
One potential solution could be:
addToCart(product: Plu, big_image?: boolean): any{
const clone = Object.assign({}, product);
if (big_image) {
clone.img = null;
}
this.carrello.plu.push({ ...clone });
this.cartTotal();
}
I am considering if this is the optimal solution...