Erro no JS ao tentar guardar imagem do LocalStorage do PC

Bom Dia, tarde ou noite, Galera

Estou cursando ADS e estou programando um site interligado a banco de dados para o fim do semestre.
A dúvida, é que ao construir a parte do Front end do site seguindo tutoriais no YouTube, acabei enfrentando o seguinte erro: app.js:72 Uncaught (in promise) TypeError: Storage.saveProducts is not a function
at app.js:72:13.
Assim, usando o DevTools, não há Keys que deveria ser “products” nem os values correspondentes, e já tentei de tudo para resolver, ou salvar. Assim, as imagens que deveriam aparecer como produtos são comprometidas
Alguém teria alguma sugestão de como proceder? Com esse erro, daqui para a frente, o processo de criação está prejudicado…

JS, que não está completo.

const cartBtn = document.querySelector(".cart-btn");
const closeCartBtn = document.querySelector(".close-cart");
const clearCartBtn = document.querySelector(".clear-cart");
const cartDOM = document.querySelector(".cart");
const cartOverLay = document.querySelector(".cart-overlay");
const cartIems = document.querySelector(".cart-items");
const cartTotal = document.querySelector(".cart-total");
const cartContent = document.querySelector(".cart-content");
const productsDOM = document.querySelector(".products-center");
console.log(btns);
// cart
let cart = [];
//buttons
let buttonsDOM = [];

// getting the product
class Products{
    async getProducts(){
        try{
            let result = await fetch ('products.json')
            let data = await result.json();

            let products = data.items;
            products = products.map(item =>{
                const {title,price} = item.fields;
                const {id} = item.sys
                const image = item.fields.image.fields.file.url;
                return {title,price,id,image}
            })
            return products
        } catch (error) {
            console.log(error);
         }
    }
}
// display products
class UI {
    displayProducts(products){
        let result = '';
        products.forEach(product => {
            result += `
            <!-- single product -->
                <article class="product">
                  <div class="img-container">
                 <img src= "${product.image}" alt="product" class="product-img"/>
                 <button class="bag-btn" data-id=${product.id}>
                    <i class="fas fa-shopping-cart"></i>
                    Carrinho 
                </button>
            </div>
            <h3>${product.title}</h3>
            <h4>$${product.price}</h4>
            </article>
            <!-- end of single product-->
         `;
        });
        productsDOM.innerHTML = result;
    }
   getBagButtons(){
    const buttons = [...document.querySelectorAll(".bag-btn")];
    buttonsDOM = buttons;
    buttons.forEach(button => {
        let id = button.dataset.id;
        let inCart = cart.find(item => item.id === id);
        if(inCart) {
            button.innerText = "In Cart";
            button.disabled = true
        }
          button.addEventListener("click",(event)=>{
           event.target.innerText = "In Cart";
           event.target.disabled = true;
           // get products from products
           let cartItem = {...Storage.getProduct(id),amount:1};
           // add products to the cart
           cart = [...cart,cartItem];
           /// save cart in local storage
           Storage.saveCart(cart)
           //set cart values 
           // display cart item
           //show the cart
          }); 
    });
   }
}
//local storage
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))
    }
}

document.addEventListener("DOMContentLoaded", () => {
    const ui = new UI();
    const products = new Products ();

    //get all products
    products
    .getProducts()
    .then(products => { 
    ui.displayProducts(products); 
    Storage.saveProducts(products);
    });
    then(()=>{
     ui.getBagButtons();
    });
});

3 Respostas

Topicos relacionados