チュートリアル: 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ページに追加するには、次のコードブロックを貼り付けます。
RequestResponse
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変数を使用してアプリケーションをテーマにすることは、コンポーネントのスタイルを設定する最速の方法です。デフォルトのテーマまたはカスタムテーマを使用できます。