- UIコンポーネント参照
ウィジェットテンプレート
このページの翻訳はAIによって自動的に行われました。可能な限り正確な翻訳を心掛けていますが、原文と異なる表現や解釈が含まれる場合があります。正確で公式な情報については、必ず英語の原文をご参照ください。
Widgetsは検索体験の設定です。さまざまなツールやコントロールを用いて、コンテンツストラテジストはウィジェットをSitecore Searchで設定します。Sitecore Searchインターフェースでは、認証、エンティティ、属性、ソース、機能などのドメイン設定も確認できます。
Sitecore Searchウィジェットは、特定の体験を提供するためにページやメールに追加される動的なコンポーネントです。主な目的はSearchのコンテンツを表示することです。すべてのウィジェットには「 rfk_id」と呼ばれる固有のプロパティがあります。
コンソールに慣れておくことをお勧めします。統合時にコンソールから様々な設定にアクセスする必要があるかもしれません。
以下のウィジェットは、以前設定されたコンテンツを表示します:
- バナー - 画像や簡単なテキストのための基本的なコンポーネントです。
- HTML Block - マーケターがページにHTMLコンテンツを挿入できるようにします。
検索によって駆動されるWidgetsは、エンティティで表現されたデータをレンダリングします。これらのウィジェットには以下のような種類があります:
- Search Result - 提出されたキーワードフレーズやその他の設定に基づくコンテキスト検索の結果を表示します。
- プレビューSearch - コンテキスト検索の結果の一部をポップアップで表示します。
ウィジェットコンポーネントは、ランタイム時に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';
!注ウィジェットコンポーネントはWidgetsProviderタグ内のどこにでも配置可能です。