1. React用JS SDK Search

ウィジェットテンプレート

日本語翻訳に関する免責事項

このページの翻訳は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タグ内の任意の場所に配置できます。

この記事を改善するための提案がある場合は、 お知らせください!