javascript - 如何编辑我的 js 应用程序以包含多个产品部分？

Question

我正在考虑如何编辑我的 javascript 应用程序，以便我可以在同一页面上有多个产品部分。

通常我可以通过研究找出在哪里可以找到答案，但我似乎无法在一次搜索中确定我想要做什么。我对 javascript 很陌生，并按照教程构建了这个。

我在想它可以像复制和粘贴 //display products 部分一样简单，但我几乎可以确定这是我的新手头脑控制。

我想有一个我已经拥有的最畅销部分，但是我想为每种类型的产品（最多 5 种不同类型，最多 50 种产品）设置一个部分，其中包括最畅销部分中的一些产品. 问题是当前应用程序似乎如何按 JSON 文件的顺序调用和显示所有产品（或者在本例中为内容 API）。

我的另一个想法是复制提到产品的整个脚本，更改变量名称和 ID 以区分，但我确信这将无法与您在下面看到的购物车集成。

由于我对该主题的了解，我觉得我没有很好地提出我的问题或解释我需要什么，所以我非常乐意回答更多问题！

我开始这个项目的目的是尽可能多地学习 Javascript 并帮助朋友。所以我避免使用任何可以为我做这一切的程序/软件:)

    //------------------------------------Shopping Cart Index.HTML------------------------------------//

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


//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 closeVartBtn = document.querySelector('.close-cart');
const cartContent = document.querySelector('.cart-cont');
const productsDOM = document.querySelector('.products-center');

// cart
let cart = [];

// buttons
let buttonsDOM = [];

// getting products
class Products{
  async getProducts(){
    try {

      let contentful = await client.getEntries()
      content_type: 'brewBerryProducts'

      // local data
      // 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}
          })
          return products
    } catch (error) {
      console.log(error);
    }
  }
}

// display products
class UI{
  displayProducts(products){
    let result = '';
    products.forEach(product => {
      result += `
      <!-- Product 1 -->
      <article class="product">
        <div class="img-container">
          <img src=${product.image} alt="Chilli Oil" class="product-img">
          <button class="bag-btn" data-id=${product.id}>
            <i class="fas fa-shopping-cart"></i>
            add to cart
          </button>
        </div>
        <h3>${product.title}</h3>
        <h4>£${product.price}</h4>
      </article>
      <!-- End of Product 1 -->
      `;
    });
    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.disable = true
      } 
      button.addEventListener('click',(event)=>{
        event.target.innerText = "In Cart";
        event.target.disabled = true;
        // get product from products
        let cartItem = {...Storage.getProduct(id), amount:1};
        // add product to the cart
        cart = [...cart,cartItem];
        console.log(cart);
        // save cart in local storage
        Storage.saveCart(cart);
        // set cart values
        this.setCartValues(cart);
        // display cart item
        this.addCartItem(cartItem);
        // show the cart
        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 = `<img src=${item.image} alt="Chilli Oil">
                    <div>
                      <h4>${item.title}</h4>
                      <h5>£${item.price}</h5>
                    <span class="remove-item" data-id=${item.id}>remove</span>
                    </div>
                    <div>
                      <i class="fas fa-chevron-up" data-id=${item.id}></i>
                      <p class="item-amount">${item.amount}</p>
                      <i class="fas fa-chevron-down" data-id=${item.id}></i>
                    </div>`;
    cartContent.appendChild(div);
  }
  showCart() {
    cartOverlay.classList.add('transparentBcg');
    cartDOM.classList.add('showCart');
  }
  setupAPP() {
    cart = Storage.getCart();
    this.setCartValues(cart);
    this.populateCart(cart);
    cartBtn.addEventListener('click',this.showCart);
    closeCartBtn.addEventListener('click',this.hideCart)
  }
  populateCart(cart){
    cart.forEach(item =>this.addCartItem(item));
  }
  hideCart(){
    cartOverlay.classList.remove('transparentBcg');
    cartDOM.classList.remove('showCart');
  }
  cartLogic() {
    // clear cart button
    clearCartBtn.addEventListener('click', ()=> {
      this.clearCart();
    });
    // cart functionality
    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);
        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(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 {
          cartContent.removeChild(lowerAmount.parentElement.parentElement);
          this.removeItem(id);
        }
      }
    });
  }
  clearCart(){
    let cartItems = cart.map(item => item.id);
    cartItems.forEach(id => this.removeItem(id));
    console.log(cartContent.children);
    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(cart);
    let button = this.getSingleButton(id);
    button.disabled = false;
    button.innerHTML = `<i class="fas fa-shopping-cart"></i>add to cart`;
  }
  getSingleButton(id) {
    return buttonsDOM.find(button => button.dataset.id === id);
  }
}

// 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));
  }
  static getCart() {
    return localStorage.getItem('cart')?JSON.parse(localStorage.getItem('cart')):[]
  }
}


document.addEventListener("DOMContentLoaded",()=>{
  const ui = new UI();
  const products = new Products()
  // setup app
  ui.setupAPP();
    // get all products
    products.getProducts() .then(products => {
      ui.displayProducts(products);
      Storage.saveProducts(products);
    }).then(()=>{
      ui.getBagButtons();
      ui.cartLogic();
    });
  });

标签： javascriptarraysjson