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…
Mostra o código pra a gente entender melhor
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();
});
});
aqui não deu erro. Seu código ta no github?