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

【问题标题】：Algolia - AutoComplete with Suggestion + Search Results Page - NextJSAlgolia - 带有建议 + 搜索结果页面的自动完成功能 - NextJS
【发布时间】：2022-05-12 07:44:33
【问题描述】：

正在我的 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-cat=header-search

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

疑问二：

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

疑点三：

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

<RefinementList attribute="brand" />

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

【问题讨论】：

标签： next.js algolia instantsearch.js react-instantsearch

【解决方案1】：

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

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

下面是我搭建的一个例子，也许对你有帮助：

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>
      </>
    )
  }

【讨论】：