0

我有几个不同类别的按钮。当用户单击按钮时，应显示正确的类别。在每个类别中，都有一些产品，每个产品都有自己的“添加到购物车”按钮。
因此，用户单击“床”，然后将项目#3 添加到购物车（更新等等）。

如果用户无法选择类别，我已经设法使用类来做到这一点。如果我在 js 中动态添加按钮，它也可以在没有类的情况下工作。但同样，不允许用户选择类别。

我还希望用户能够搜索项目，显示项目/项目，并将其添加到购物车。

获取产品

class Products {
  async getProducts() {
    try {
      const result = await fetch("/data/products.json");
      const data = await result.json();
      let products = data.items;
      products = products.map((item) => {
        const { category, title, price } = item;
        const { id } = item.sys;
        const image = item.image.url;
        return { category, title, price, id, image };
      });
      return products;
    } catch (error) {
      console.log(error);
    }
  }
}

展示产品

class UI {   
  async displayProducts(products, searchText) { 
    let matches = products.filter(item => {
      const regex = new RegExp(`^${searchText}`,'gi');
      return item.category.match(regex);
    })  
     
    let result = "";
    matches.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">add to cart</i>
            </button>
          </div>
          <h3>${product.title}</h3>
          <h4>$${product.price}</h4>
        </article>     
         <!-- end single product -->
        `;
    });    
    productDOM.innerHTML = result;
  }
  
  getBagButtons() {
    const buttons = [...document.querySelectorAll(".bag-btn")];

在 HTML 中，我使用了 onclick="displayProducts('bed')"

这将不起作用，因为 displayProducts 在一个类中。

我还尝试为每个按钮添加一个 id 并在 DOMContentLoaded 中添加一个事件监听器，但这破坏了我的 DOMContentLoaded 的其余部分

DOMContentLoaded

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

  // setup app
  ui.setupAPP();
  
  products
    .getProducts()
    .then((products) => {  
         
      ui.displayProducts(products);
      Storage.saveProducts(products);
    })
    .then(() => {
      ui.getBagButtons(); 
      ui.cartLogic();
    });
});

这些只是我尝试过的一些事情，但每次尝试都会修复一个问题，但会添加一个或多个问题，所以我真的可以在这里使用一些帮助。谢谢！

4

1 回答 1

0

这些是我们所做的更改：

所有类别按钮都获取此事件侦听器

onclick="searchNdisplay(new UI, new Products, 'category text');"

这会初始化 ui 和产品并显示它们，因此我们将其更改为使用 searchNdisplay 功能

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

// setup app
ui.setupAPP();

searchNdisplay(ui, products, "");

Storage.saveProducts(products);
});

此功能使用符合搜索条件的产品重新填充页面。

function searchNdisplay(ui, products, search)
{

    products
        .getProducts()
        .then((products) => {

    if (search == "")
    {
        ui.displayProducts(products);
    }
    else
    {
        ui.displayProducts(products, search);
    }
})
    .then(() => {
        ui.getBagButtons();
        ui.cartLogic();
    });
}
于 2020-11-19T01:57:30.327 回答