john-smilga / setup-files-js-comfy-house Goto Github PK

Hi John,

Please my product images do not show on the live page and I am wondering if it is because I cannot seem to link the json file to the index.html file.

I mean no product image shows up

Having an issue where the buttons in the Shopping cart popout are not working. The Remove button nor the Large button at the bottom do anything. Not sure what is causing this.

Sir i have trying to add method to get all products list to next page where i can make payment method but i m unable to sort the issues. @john-smilga

Please provide me app.js file @john-smilga @john-smilga

@john-smilga I am getting two error while i am adding site to contentful.
error 1:-
"
TypeError: "item.fields.image is undefined" app.js:54:15
products http://localhost:8080/app.js:47
getProducts http://localhost:8080/app.js:44
"

error 2:-
"
TypeError: products is undefined app.js:63:5
"

// const client = contentful.createClient({
// // This is the space ID. A space is like a project folder in Contentful terms
// space: "YOUR API KEY",
// // This is the access token for this space. Normally you get both ID and the token in the Contentful web app
// accessToken:
// "YOUR API KEY"
// });
--------------------------This is my app.js code------------------

const client = contentful.createClient({
// This is the space ID. A space is like a project folder in Contentful terms
space: "ie3gh68oht59",
// This is the access token for this space. Normally you get both ID and the token in the Contentful web app
accessToken: "3h4t1oU0uNbKMkKRUJmkYISE5KaLvXBZwHwplCnz7zk"
});
console.log(client);

// variables
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 cartItems = document.querySelector(".cart-items");
const cartTotal = document.querySelector(".cart-total");
const cartContent = document.querySelector(".cart-content");
const productsDOM = document.querySelector(".products-center");
let cart = [];

// products
class Products {
async getProducts() {
try {
let contentful = await client.getEntries({
content_type: 'shoppingcart'
});

//let result = await fetch("products.json");
// let data = await result.json();

let products = contentful.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 };
});
console.log(products);

return products;
} catch (error) {
console.log(error);
}

}
}

// ui
class UI {
displayProducts(products) {
let result = "";
products.forEach(product => {
result += `

<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>
      add to bag
    </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")];
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;
} else {
button.addEventListener("click", event => {
// disable button
event.target.innerText = "In Bag";
event.target.disabled = true;
// add to cart
let cartItem = { ...Storage.getProduct(id), amount: 1 };
cart = [...cart, cartItem];
Storage.saveCart(cart);
// add to DOM
this.setCartValues(cart);
this.addCartItem(cartItem);
this.showCart();
});
}
});

}
setCartValues(cart) {
let tempTotal = 0;
let itemsTotal = 0;
cart.map(item => {
tempTotal += item.price * item.amount;
itemsTotal += item.amount;
});
cartTotal.innerText = parseFloat(tempTotal.toFixed(2));
cartItems.innerText = itemsTotal;
}

addCartItem(item) {
const div = document.createElement("div");
div.classList.add("cart-item");
div.innerHTML =

this.setCartValues(cart);
Storage.saveCart(cart);
cartContent.removeChild(removeItem.parentElement.parentElement);
const buttons = [...document.querySelectorAll(".bag-btn")];
buttons.forEach(button => {
  if (parseInt(button.dataset.id) === id) {
    button.disabled = false;
    button.innerHTML = `<i class="fas fa-shopping-cart"></i>add to bag`;
  }
});

} else if (event.target.classList.contains("fa-chevron-up")) {
let addAmount = event.target;
let id = addAmount.dataset.id;
let tempItem = cart.find(item => item.id === id);
tempItem.amount = tempItem.amount + 1;
Storage.saveCart(cart);
this.setCartValues(cart);
addAmount.nextElementSibling.innerText = tempItem.amount;
} else if (event.target.classList.contains("fa-chevron-down")) {
let lowerAmount = event.target;
let id = lowerAmount.dataset.id;
let tempItem = cart.find(item => item.id === id);
tempItem.amount = tempItem.amount - 1;
if (tempItem.amount > 0) {
Storage.saveCart(cart);
this.setCartValues(cart);
lowerAmount.previousElementSibling.innerText = tempItem.amount;
} else {
cart = cart.filter(item => item.id !== id);
// console.log(cart);

  this.setCartValues(cart);
  Storage.saveCart(cart);
  cartContent.removeChild(lowerAmount.parentElement.parentElement);
  const buttons = [...document.querySelectorAll(".bag-btn")];
  buttons.forEach(button => {
    if (parseInt(button.dataset.id) === id) {
      button.disabled = false;
      button.innerHTML = `<i class="fas fa-shopping-cart"></i>add to bag`;
    }
  });
}

}
});

}
clearCart() {
// console.log(this);

cart = [];
this.setCartValues(cart);
Storage.saveCart(cart);
const buttons = [...document.querySelectorAll(".bag-btn")];
buttons.forEach(button => {
button.disabled = false;
button.innerHTML = <i class="fas fa-shopping-cart"></i>add to bag;
});
while (cartContent.children.length > 0) {
cartContent.removeChild(cartContent.children[0]);
}
this.hideCart();

}
}

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();

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