如何在 Shopify 上按 productType 过滤产品？

Question

赏金将在 3 天后到期。 此问题的答案有资格获得+50声望赏金。 汤姆威克斯想引起更多关注这个问题。

期望的行为是让用户能够使用菜单中的productType按产品类型过滤产品。

目前我正在查询 Shopify 店面 API 并在lib/Shopify.js中取回产品

export async function getProductsInCollection() {
  const query = `
  {
    collectionByHandle(handle: "frontpage") {
      title
      products(first: 25) {
        edges {
          node {
            id
            title
            productType
            handle
          }
        }
      }
    }
  }`

  const response = await ShopifyData(query)
  const allProducts = response.data.collectionByHandle.products.edges ? response.data.collectionByHandle.products.edges : []
  return allProducts
}

export function filter(type) {
  let filtredProducts = getProductsInCollection().filter(product => product.node.productType === type);
  return filtredProducts;
}

lib/Shopify.js还包含一个 function 以获取商店中的所有产品类型。

export async function getProductTypes() {
  const query = 
  `{
    shop {
      products(first:250, query:"-product_type:''") {
        edges {
            node {
              productType
          }
        }
      }
    }
  }`

  const response = await ShopifyData(query)
  const rawProductTypes = response.data.shop.products ? response.data.shop.products.edges : []
  const productTypes = Array.from(new Set(rawProductTypes));
  return productTypes
}

然后shop.js循环遍历所有 productType 并将它们显示在菜单中。 它还循环遍历所有产品。

import { getProductsInCollection, getProductTypes, filter } from "../lib/shopify"
import React, { useState, useEffect } from "react";
import Link from 'next/link'

export default function Shop({ products, pages, projects, productTypes }) {
  const [filtredProducts, setFiltredProducts] = useState(null);

  useEffect(() => {
    setFiltredProducts(getProductsInCollection());
  }, []);

  var categories = new Map();
  productTypes.forEach( function( item ) {
    categories.set(JSON.stringify(item), item);
  });

  function handleCategories(e) {
    let type = e.target.value;
    type !== "all"
      ? setFiltredProducts(filter(type))
      : setFiltredProducts(getProductsInCollection());
  }

  const deduped = Array.from(new Set(productTypes));

  return (
    <div>
      <div>
         {categories &&
        [...categories.values()].map((category, index) => (
          <>
            <button className="mr-8 mb-6 underline" key={index} value={category.node.productType} onClick={handleCategories}>
             {category.node.productType}
            </button>
          </>
        ))}
      {filtredProducts &&
          filtredProducts.map(p => (
            <ul>
              <li>{p.node.title}</li>
            </ul>
          ))}
      </div>
    </div>
  )
}

export async function getStaticProps() {
    const products = await getProductsInCollection()
    const productTypes = await getProductTypes()
  
    return {
      props: { 
        products,
        productTypes,
      },
    }
  }

当用户尝试单击过滤器时，他们会收到以下错误。

类型错误：getProductsInCollection(...).filter 不是 function

什么是让过滤器工作的正确方法，以便菜单过滤下面的产品？

Answer 1

您正在尝试在 Promise 上调用.filter() ，而不是数组。 尝试像这样修改您的代码：

export async function filter(type) {
  let products = await getProductsInCollection();
  let filteredProducts = products.filter(product => product.node.productType === type);
  return filteredProducts;
}

请记住，在调用filter()时，您需要再次使用await ，因为它现在也是异步 function。

Answer 2

getProductsInCollection 返回 promise，在过滤器之前使用 async/await。

在 shop.js 中，您还必须在设置为 state 之前使用 async/await。

export async function getProductsInCollection() {
  const query = `
  {
    collectionByHandle(handle: "frontpage") {
      title
      products(first: 25) {
        edges {
          node {
            id
            title
            productType
            handle
          }
        }
      }
    }
  }`;

  const response = await ShopifyData(query);
  const allProducts = response.data.collectionByHandle.products.edges
    ? response.data.collectionByHandle.products.edges
    : [];
  return allProducts;
}

export async function filter(type) {
  let filtredProducts = await getProductsInCollection();
  return filtredProducts.filter((product) => product.node.productType === type);
}

// shop.js
async function handleCategories(e) {
  let type = e.target.value;
  let products = [];
  if (type !== "all") {
    products = await filter(type);
  } else {
    products = getProductsInCollection();
  }
  setFiltredProducts(products);
}