I'm having a shopping-page where everything works fine until I add a search function.
My JavaScript file is built with classes like:
- Products{getProducts}
- UI{displayProducts}
- Storage{saveProducts}
- DOMContentLoaded
which make things go in the correct order =>
get the products (from a JSON-file), store the products in localStorage
and get them from the localStorage
when they are needed.
In my HTML I have buttons where you can choose the category of the products. I have these set to onclick => performTask
.
Since I haven't found out how to enter the UI{displayProducts}
(which is really what I want, since that's the only thing that should really happen when a button is pressed - show the correct products) - I have made a new function in my js-file. This function works very much as the DOMContentLoaded
and at first, it seems it's working really well, until you restart the app a couple of times and try to change a number of products in the cart or remove all items in the cart.
If I for example want to add an extra copy of an item already in the cart, the value will not be added by one, but with one plus all the items in the cart. If I try to remove all the items in the cart, I will have to do it as many times as I have restarted and added things to the app.
Therefore I wonder if I somehow can reach the class UI{displayProducts}
directly from my HTML-file and in the UI-class add the filter for displaying the correct products? And how? Is there a better solution?
Of course, I can add some code if you like, just let me know which part since the code is quite lengthy.
class Products {
async getProducts(){
try{
const res = await fetch('/data/products.json');
const data = await res.json();
let products = data.items;
products = products.map(item => {
const {id,category,title,color,price} = item;
const image = item.image.url;
return {id,category,title,color,price,image}
})
return products;
}catch(err){
console.log(err)
}
}
}
class UI {
displayProducts(products){
// This is where the products get displayed
}
}
class Storage {
static saveProducts(products) {
localStorage.setItem("products", JSON.stringify(products));
}
static getProduct(id) {
let products = JSON.parse(localStorage.getItem("products"));
return products.find((product) => product.id === id);
}
static saveCart(cart) {
localStorage.setItem("cart", JSON.stringify(cart));
}
static getCart() {
return localStorage.getItem("cart")
? JSON.parse(localStorage.getItem("cart"))
: [];
}
}
document.addEventListener('DOMContentLoaded',()=>{
const ui = new UI();
const products = new Products();
ui.setupAPP();
products
.getProducts()
.then((products) => {
ui.displayProducts(products);
Storage.saveProducts(products);
})
})
HTML
<ul class="dropdown">
<li class="category-button" onclick="displaySearch(new UI, new Products, 'beds')"><a href="#hidden">beds</a></li>
<li class="category-button" onclick="displaySearch(new UI, new Products, 'sofas')"><a href="#hidden">sofas</a></li>
<li class="category-button" onclick="displaySearch(new UI, new Products, 'dressers')"><a href="#hidden">dressers</a></li>
<li class="category-button" onclick="displaySearch(new UI, new Products, 'news')"><a href="#hidden">news</a></li>
</ul>
goes to the "new" function displaySearch
(which I'd rather not use).