我无法使用 Algolia 小部件

发布于 2025-01-16 12:30:13 字数 1184 浏览 2 评论 0原文

我在我的 React 应用程序上使用 Algolia 进行即时搜索,它可以很好地获取点击率和结果, 但为了通过添加排序方式(价格:升序或降序)使其提供更友好的用户体验,它不起作用,我使用了 Algolia 提供的排序方式组件。

这是代码:

function Search() {

  const searchClient = algoliasearch('C*********X', 'd***************************9');

  const Hit = ({hit}) =>  {
   return <div>
    <h2>{hit.ProductName}</h2>
    <h3>{hit.ProductPrice}</h3>
  </div>
  }


  return (
    <div>
  <InstantSearch searchClient={searchClient} indexName="Products">
    <SearchBox />
    <Hits hitComponent={Hit}/>
  </InstantSearch>
    </div>
  )
}


这工作正常,但是当我添加排序依据组件时,就像

<div>
  <InstantSearch searchClient={searchClient} indexName="Products">
    <SearchBox />
<SortBy
  defaultRefinement="Products"
  items={[
    { value: 'relevent', label: 'Relevent' },
    { value: 'product_price_asc', label: 'Price asc.' },
    { value: 'product_price_desc', label: 'Price desc.' },
  ]}
/>
    <Hits hitComponent={Hit}/>
  </InstantSearch>
    </div>

我更改它时显示的排序依据选择一样,什么也没有发生,有没有一种简单的方法来实现 Algolia 小部件,我已经坚持了好几天了现在请帮忙​​。

Am using Algolia on my React App to do an instant search It works fine to get the Hits and results,
but to make it a more friendly user experience by adding the Sort-By(price: asc or desc) its doesn't work, I used the Sort-By component provided by Algolia.

Here is the code:

function Search() {

  const searchClient = algoliasearch('C*********X', 'd***************************9');

  const Hit = ({hit}) =>  {
   return <div>
    <h2>{hit.ProductName}</h2>
    <h3>{hit.ProductPrice}</h3>
  </div>
  }


  return (
    <div>
  <InstantSearch searchClient={searchClient} indexName="Products">
    <SearchBox />
    <Hits hitComponent={Hit}/>
  </InstantSearch>
    </div>
  )
}


This works fine but when I add the Sort-by component Like

<div>
  <InstantSearch searchClient={searchClient} indexName="Products">
    <SearchBox />
<SortBy
  defaultRefinement="Products"
  items={[
    { value: 'relevent', label: 'Relevent' },
    { value: 'product_price_asc', label: 'Price asc.' },
    { value: 'product_price_desc', label: 'Price desc.' },
  ]}
/>
    <Hits hitComponent={Hit}/>
  </InstantSearch>
    </div>

The Sort-By Select Shows up by when I change it nothing happens, Is there an easy way to implement the Algolia widgets Ive been stuck on this for days now please help.

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

痴梦一场 2025-01-23 12:30:13

sortBy 小部件只是在 Algolia 索引之间交换。实际排序根据索引及其副本的排序/排名标准进行。您代码中的小部件正在三个索引/副本之间交换:

  • relevent
  • Product_price_asc
  • Product_price_desc

您能否确认所有三个索引/副本都存在并且可以使用当前的仅搜索 API 密钥进行访问?

The sortBy widget simply swaps between Algolia indices. The actual sorting occurs within your index and its replicas based on their sorting/ranking criteria. The widget in your code is swapping between three indices/replicas:

  • relevent
  • product_price_asc
  • product_price_desc

Can you confirm all three indices/replicas exist and are accessible with your current search-only API key?

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文