1. React用JS SDK Search

チュートリアル: Reactアプリケーションへのウィジェットの追加

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

このページの翻訳はAIによって自動的に行われました。可能な限り正確な翻訳を心掛けていますが、原文と異なる表現や解釈が含まれる場合があります。正確で公式な情報については、必ず英語の原文をご参照ください。

このチュートリアルは、Search UIコンポーネントを使用した迅速な開発のチュートリアル シリーズのパート4です。

Sitecore SearchのUIを開発するこの最後のステップでは、以前に作成したウィジェットコンポーネントをReactアプリケーションにまとめます。

このチュートリアルでは、次の方法について説明します。

  • WidgetsProviderコンポーネントを使用したレンダリング

  • テーマを使用したウィジェットコンポーネントのスタイル設定

WidgetsProviderコンポーネントを使用したレンダリング

次のコードブロックは、ドメインがSearchで設定されていない場合の認証用の資格情報を持つWidgetsProviderコンポーネントを示しています。ここでは、この実装の最上位ドメインがCookieを制限するため、publicSuffixがtrueに設定されています。

次の手順とコードブロックは、次の設定があることを前提としています。

  • header_psは、すべてのページに表示されるように設定されたプレビューウィジェットです。

  • footer_recは、すべてのページに表示されるように設定されたrecommendationウィジェットです。

header_psとfooter_recをWebページに追加するには、次のコードブロックを貼り付けます。

import { WidgetsProvider }from "@sitecore-search/react";
import MyGlobalPreviewSearchWidget from "./widgets/myGlobalPreviewSearch";
import MySearchResultsWidget from "./widgets/mySearchResultsWidget";


const Root = () => {
    return (
          <WidgetsProvider
                publicSuffix='true'
                env='<environment>'
                customerKey='<customer key>'
                apiKey='<api key>'
                >

            <header>
              <h1>My Application</h1>
              <MyGlobalPreviewSearchWidget rfkId="header_ps" />
            </header>
          
            <div class="content">
                <MySearchResultsWidget rfkid="sdk_search">
            </div>
          
            <footer>
                FOOTER CONTENT GOES HERE
            </footer>

          </WidgetsProvider>
)};

テーマを使用したウィジェットコンポーネントのスタイル設定

CSS変数を使用してアプリケーションをテーマにすることは、コンポーネントのスタイルを設定する最速の方法です。デフォルトのテーマまたはカスタムテーマを使用できます。

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