ウィジェットテンプレート
このページの翻訳はAIによって自動的に行われました。可能な限り正確な翻訳を心掛けていますが、原文と異なる表現や解釈が含まれる場合があります。正確で公式な情報については、必ず英語の原文をご参照ください。
Widgetsは、検索エクスペリエンスの構成です。さまざまなツールとコントロールを使用して、コンテンツ ストラテジストはCustomer Engagement Console (CEC) でウィジェットを構成します。CECでは、認証、エンティティ、属性、ソース、機能など、ドメインの構成も確認できます。
Sitecore Searchウィジェットは、特定のエクスペリエンスを提供するためにページまたはメールに追加される動的コンポーネントです。主な目的は、Search.すべてのウィジェットには、rfk_idという一意のプロパティがあります。
コンソールに慣れておくことをお勧めします。統合中にコンソールからさまざまな設定にアクセスする必要がある場合があります。
ウィジェットコンポーネントは、実行時にSearch JS SDKに登録されるUIコンポーネントです。これには、Searchサービスからコンテンツを要求してレンダリングするために必要なコードが含まれています。バナーとHTMLブロックウィジェットコンポーネントは、完全に事前設定されているため、SDKに含まれています。
ウィジェットテンプレート
ウィジェットテンプレートには、特定の動作パターンを抽象化するためのさまざまなコンポーネントとUIプリミティブが含まれています。基本的には、ウィジェットのレイアウトです。 Search UI componentsパッケージ パッケージには、Searchからのデータが入力されたウィジェットのさまざまなテンプレートがあります。
JSXで記述されたテンプレートは、レイアウトのコードと、クエリフックを介してSearch APIと接続するロジックを含むコンポーネントです。ウィジェットの種類ごとにテンプレートには 、クエリフック、アクション、状態変数が異なります。クエリ フックはJS SDKに含まれています。
テンプレートの構造
次のコード ブロックには、検索結果ウィジェットのテンプレートのコア要素が含まれています。
import { useSearchResults } from '@sitecore-search/react';
const MyTemplate = () => {
const {
widgetRef,
actions: {
// Here, insert the actions you want to use.
},
state: {
// Here, insert the variables you want to use to describe the state.
},
queryResult: {
isLoading,
data: {
// Here, insert the API response properties you want to use.
} = {},
},
} = useSearchResults({
query: (query) => {query.getRequest().setOffset(10);} // Optional. This function initializes the quest with provided values
state: {
itemsPerPage,
}
});
return (
// Here goes the JSX code.
);
};クエリフックを利用可能にする
テンプレートをウィジェット コンポーネントに変換するには、JS SDKに登録します。これにより、クエリフックをデータ交換に使用できるようになります。ウィジェットの高次関数を使用して、テンプレートをウィジェットコンポーネントとしてインスタンス化します。
import { WidgetDataType, widget } from '@sitecore-search/react';
const MySearchResultsWidget = widget(MyTemplate, WidgetDataType.SEARCH_RESULTS, 'content');ウィジェットテンプレートの登録
ウィジェットコンポーネントは、ReactアプリケーションのWidgetsProviderタグ内にあるときにレンダリングされます。次のコード ブロックは、MySearchResultsWidget.
import { WidgetsProvider } from '@sitecore-search/react';
<div>
<WidgetsProvider
env='<environment>'
customerKey='<customer key>'
apiKey='<api key>'
>
<MySearchResultsWidget rfkId="my_widget_id" />
</WidgetsProvider>
</div>ウィジェットコンポーネントは、WidgetsProviderタグ内の任意の場所に配置できます。