ReactプロジェクトでJS SDKを設定する方法

JS SDKをインストールしてUI Components React

開発者はSitecore Search JS SDKやUI Componentsパッケージをプロジェクトにインストールできます。Reactコードでは、他のJSパッケージと同様にこれらのパッケージからクラス、関数、オブジェクトをインポートできます。

Reactの最新のJS SDKとUI Componentsをインストールするには:

1. Search JS SDK for Reactをプロジェクトに追加するには、プロジェクト内で以下の動作を実行してください。

   npm install --save @sitecore-search/react

2. プロジェクトにReact Search UI Componentsを追加するには、プロジェクト内で以下の手順を実行してください。

   npm install --save @sitecore-search/ui

3. ReactプロジェクトのRootコンポーネントで、WidgetsProviderとコンポーネントPageControllerインポートします。

   import { PageController, WidgetsProvider } from "@sitecore-search/react";

   const Root = () => { PageController.getContext().setLocaleLanguage('en'); PageController.getContext().setLocaleCountry('us'); return ( )};

   !注複数のロケージを設定していない場合は、PageControllerコンポーネントとreturn文の前の2行を削除できます。この場合、デフォルトのロケールが自動的に使われます。

認証情報の取得

プライバシーとコンテンツを保護するため、申請をする前にアプリケーションがSearchで認証することを求めています。アカウントとドメインに関連付けられた認証情報を使用する必要があります。

Searchの認証情報を取得するには:

1. Sitecore Searchの認証情報でログインしてSitecore Searchしてください。
2. メニューバーで Developer Resourcesをクリックします。
3. 右側の APIキー ペインで、データリクエスト用のキーをコピーします。

認証情報で認証してください

プライバシーとコンテンツを保護するため、申請を行う前にアプリケーションはSearchで認証する必要があります。アカウントとドメインに関連付けられた認証情報を使用する必要があります。データ請求の前や最初のデータ請求時に認証を選択することができます。

!重要JS SDKはクッキーを設定し、イベントを追跡する際にUUIDを含みます。検索結果をパーソナライズするために訪問者情報(UUID)が必要です。

JS SDKがアプリケーションを認証した後、JS SDKは今後のすべてのリクエストに必要な認証情報を含めます。

React申請のRootまたはAppの要素に資格を含めることをお勧めします。

サブドメインが設定されたときに認証するには:

ReactプロジェクトのRootコンポーネントで、認証用の正しい認証情報を持つWidgetsProviderコンポーネントと、ロケールを設定するPageControllerコンポーネントを追加してください。これは以下のコードブロックに示されています。

import { PageController, WidgetsProvider } from "@sitecore-search/react";

const Root = () => { PageController.getContext().setLocaleLanguage('en'); PageController.getContext().setLocaleCountry('us'); return ( <WidgetsProvider env='' customerKey='' serviceHost=''