next.js - Algolia - 带有建议 + 搜索结果页面的自动完成功能 - NextJS

Question

在我的 NextJS 应用程序中实现 Algolia 搜索。我已经设置了数据源和索引。我试图设置的内容类似于 Gucci 在搜索中所做的事情。Gucci 正在使用 Algolia 来提供搜索功能。

我尝试使用 Algolia 的react-instantsearch-dom包。我/pages/_app.js像这样更新了我的文件（这里只写了相关的代码）：

/**
 *      /pages/_app.js
 * 
 */

//-------- Algolia
import algoliasearch from 'algoliasearch/lite';
import { InstantSearch } from 'react-instantsearch-dom';

const searchClient = algoliasearch( 'xxxxxxxxxx', 'yyyyyyyyyyyyyyy' );
//-------- /Algolia

function MyApp({ Component, pageProps }) {
    return (
        <>
            <InstantSearch searchClient={searchClient} indexName={ 'abc_test_products' }>
                <Component {...pageProps} />                                
            </InstantSearch>   
        </>
    )
}

export default MyApp

这样我就可以使用react-instantsearch-dom任何地方的组件。

我对这里的三件事感到困惑。

---

疑点一：

如何将 algolia 查询和过滤器传递到此处的搜索结果页面并使用组件显示结果：https ://www.gucci.com/us/en/st/newsearchpage?facetFilters=categoryLevel1_en%3AChildren&searchString=handbags&search-猫=标题搜索

因此，基本上，当用户单击其中一个 algolia 搜索建议（从单击页面右上角的搜索框后的下拉菜单中）时，他们会被带到搜索结果页面，并且似乎 Algolia 搜索已被实例化并显示结果。

---

疑点二：

如何并排显示自动建议和产品图片？

---

疑点三：

显示动态过滤器/优化选项。我知道如果brand我们的 Algoia 索引/数据集中有一个属性，我可以将其包含在搜索过滤器中，如下所示：

<RefinementList attribute="brand" />

但是，如果我想显示优化列表的不同属性，比如“颜色”、“品牌”等，我将如何从搜索结果中动态显示优化选项的标题和列表。

---

Answer 1

您的 UI 示例看起来像是左侧的 Query Suggestions 面板和右侧的 Hits 列表的混搭。您可以在渲染之前自定义 a 的hit外观以获取图像。过滤器菜单会随着用户过滤器自动更新。

我没有尝试将查询参数放入 URL，这会很有趣。我认为您必须添加useRouter到您的下一页，然后使用将 Algolia 参数推送到字符串上onClick。

下面是我建立的一个例子，也许它可以帮助你：

const Search = () => {

  const Hit = ({ hit }) => {
    return (
      <HitContainer>
        <span>{hit.type}</span>
        <h2><a href={hit.path}>{hit.title}</a></h2>
        {
          hit.content &&
            <p>{ `${hit.content.substring(0,150)} ...` }</p>
        }
        <hr />
      </HitContainer>
    )
  }

  return (
    <>
        <InstantSearch
          searchClient={ AlgoliaReactClient } 
          indexName="MAINSITE" >
          
          <CustomSearchBox 
            translations={{
              submitTitle: 'Submit your search query.',
              resetTitle: 'Clear your search query.',
              placeholder: 'What are you looking for?',
            }}
          />
          <HitsAndFilters>
            <AllFilters>
              <h3>Topics</h3>
              <FilterMenu
                attribute="topics" 
                limit={5}
                showMore
              />
              <h3>Locations</h3>
              <FilterMenu
                attribute="locations" 
                limit={5}
                showMore
              />
            </AllFilters>
            <AllHits hitComponent={Hit} />
          </HitsAndFilters>
        </InstantSearch>
      </>
    )
  }


  [1]: https://www.peopleforbikes.org