从现在开始,你可以使用Algolia的建议 从InstantSearch,简化你的整合 两个图书馆!

学习如何随行迁徙 升级指南。 。 。 .

import {
  InstantSearch,
  FrequentlyBoughtTogether,
  RelatedProducts,
} from 'react-instantsearch';
import algoliasearch from 'algoliasearch/lite';
const searchClient = algoliasearch('YourApplicationID', 'YourSearchOnlyAPIKey');

function App() {
  return (
    <InstantSearch searchClient={searchClient} indexName={indexName}>
      <FrequentlyBoughtTogether objectIDs={[currentObjectID]} />
      <RelatedProducts objectIDs={[currentObjectID]} />
    </InstantSearch>
  );
}

@algolia/recommend-react

反应软件包 阿尔戈利亚建议。 。 。 .

安装

所有推荐软件包均可在 无 登记.

yarn add @algolia/recommend-react
# or
npm install @algolia/recommend-react

使用量

导入 FrequentlyBoughtTogether 财务报告和审定财务报表 RelatedProducts 并用在您的父组件中.

import React from 'react';
import {
  FrequentlyBoughtTogether,
  RelatedProducts,
} from '@algolia/recommend-react';
import recommend from '@algolia/recommend';

const recommendClient = recommend('YourApplicationID', 'YourSearchOnlyAPIKey');
const indexName = 'YOUR_INDEX_NAME';

function App({ currentObjectID }) {
  // ...

  return (
    <div>
      <FrequentlyBoughtTogether
        recommendClient={recommendClient}
        indexName={indexName}
        objectIDs={[currentObjectID]}
        itemComponent={({ item }) => {
          return (
            <pre>
              <code>{JSON.stringify(item)}</code>
            </pre>
          );
        }}
      />
      <RelatedProducts
        recommendClient={recommendClient}
        indexName={indexName}
        objectIDs={[currentObjectID]}
        itemComponent={({ item }) => {
          return (
            <pre>
              <code>{JSON.stringify(item)}</code>
            </pre>
          );
        }}
      />
    </div>
  );
}

继续读我们 开始 向导.

文档

这个 文档 提供一些了解建议图书馆的方法:

• 跟着 构建您的推荐 UI 指南 在您的网站上显示推荐.
• 参见 API 参考 为综合参数和选项清单.