Tag: shopping

I tried to find out why there is an error in my shopping cart, but apparently you cannot find it. The problem started when I added the content of the description field and a small change to my Js file.

Here is the link to the project on github http://elvin247.github.io

Here is my Js code:

// JavaScript document
const client = contentful.createClient ({
// This is the space ID. The content of a space is like a project folder
Space: "r742wojtl7kg",
// This is the access token for this area. You usually get both the ID and the token in the Contentful web application
Access token:
A8PNnqkBaRJN4TvjyNxDR0C0erFG9LgntCJ_0hL68jM
});

// 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 = ();
let buttonDOM = ();
// syntactic sugar of the writing constructor function

// Products
Class products {
async getProducts () {
// always returns a promise so we can add .then
// We can use wait until the promise is fulfilled and return the result
To attempt {
// let result = wait for fetch ("products.json");
// leave data = wait for result.json ();
let contentful = wait for client.getEntries ({
content_type: "reejuviProducts"
});
console.log (contentful.items);

  let products = contentful.items;
  products = products.map(item => {
     const { title, price, description } = item.fields;
    const { id } = item.sys;
    const image = item.fields.image.fields.file.url;
   return { title, price, description, image };
  });

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

}}
}}

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


Add to Cart

$ {product.title}

$ {product.description}

& # 8358; $ {product.price}


;;
});
productsDOM.innerHTML = result;
}}
getBagButtons () {
let button = (… document.querySelectorAll (". bag-btn"));
buttonDOM = buttons;
button.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 => {
    // disable button
    event.target.innerText = "In Cart";
    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 ​​(shopping 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 ("shopping cart");
div.innerHTML = `

$ {item.title}
₦ $ {item.price}
remove

      
`;
cartContent.appendChild(div);

}}
showCart () {
cartOverlay.classList.add ("transparentBcg");
cartDOM.classList.add ("showCart");
}}
setupAPP () {
cart = Storage.getCart ();
this.setCartValues ​​(cart);
this.populateCart (shopping cart);
cartBtn.addEventListener ("click", this.showCart);
closeCartBtn.addEventListener ("click", this.hideCart);
}}
populateCart (shopping cart) {
cart.forEach (item => this.addCartItem (item));
}}
hideCart () {
cartOverlay.classList.remove ("transparentBcg");
cartDOM.classList.remove ("showCart");
}}
cartLogic () {
clearCartBtn.addEventListener ("click", () => {
this.clearCart ();
});
cartContent.addEventListener ("click", event => {
if (event.target.classList.contains ("remove-item")) {
let removeItem = event.target;
let id = removeItem.dataset.id;
cartContent.removeChild (removeItem.parentElement.parentElement);
// remove item
this.removeItem (id);
} 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 (shopping 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 (shopping cart);
this.setCartValues ​​(cart);
lowerAmount.previousElementSibling.innerText = tempItem.amount;
} else {
cartContent.removeChild (lowerAmount.parentElement.parentElement);
this.removeItem (id);
}}
}}
});
}}
clearCart () {
// console.log (this);
let cartItems = cart.map (item => item.id);
cartItems.forEach (id => this.removeItem (id));
while (cartContent.children.length> 0) {
cartContent.removeChild (cartContent.children (0));
}}
this.hideCart ();
}}
removeItem (id) {
cart = cart.filter (item => item.id! == id);
this.setCartValues ​​(cart);
Storage.saveCart (shopping cart);
let button = this.getSingleButton (id);
button.disabled = false;
button.innerHTML = add to cart;;
}}
getSingleButton (id) {
return buttonDOM.find (button => button.dataset.id === id);
}}
}}

Class memory {
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 (shopping cart) {
localStorage.setItem ("cart", JSON.stringify (cart));
}}
static getCart () {
return localStorage.getItem ("cart")
? JSON.parse (localStorage.getItem ("cart"))
: ();
}}
}}

document.addEventListener ("DOMContentLoaded", () => {
const ui = new user interface ();
const products = new products ();
ui.setupAPP ();

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