--- title: "ウィジェットテンプレート" slug: "widget-templates" abstract: "JS SDKのウィジェットテンプレートSitecore Search Overview。" --- # ウィジェットテンプレート Sitecore Searchウィジェットは、特定の体験を提供するためにページやメールメッセージに追加される動的なコンポーネントです。ウィジェットの主な目的はSearchのコンテンツを表示することです。コンテンツパーソナライズウィジェットが既に設定されたコンテンツのみを表示するのに対し、マーチャンダイジングウィジェットはコンテキストやユーザーのインタラクションに基づいてデータリクエストを修正できます。 SearchJS SDK for Reactパッケージには、rfk\_idでのみインスタンス化可能な以下のウィジェットテンプレートが含まれています。実行時にJS SDKウィジェットのデータを求め、設定や表示に必要なデータを供給します。 - [ウィジェット](https://doc.sitecore.com/search/ja/developers/search-js-sdk-for-react/js-sdk-reference/components/widget.html "Widget") - [バナーウィジェット](https://doc.sitecore.com/search/ja/developers/search-js-sdk-for-react/js-sdk-reference/components/bannerwidget.html "BannerWidget") - [HTMLBlockWidget](https://doc.sitecore.com/search/ja/developers/search-js-sdk-for-react/js-sdk-reference/components/htmlblockwidget.html "HTMLBlockWidget") > !注Search Results、preview search、recommendationウィジェットは、機能的なReactコンポーネントを関連付ける必要があるため、JS SDKには含まれていません。 > > JSのSDKは、クエリフックや高次関数のみを提供し、コンポーネントやテンプレートを作成するために使えます。 ## Basic recommendation widgetテンプレートの解剖学 [UI Components CLI](https://www.npmjs.com/package/@sitecore-search/cli)パッケージでウィジェットがどのように書かれているかを理解するために、styled recommendationウィジェットのコードをより小さなブロックに分解しています。各ブロックにはウィジェットテンプレートのさまざまな要素を説明するために注釈が付けられています。 1. import ( React ) from 'react'; import { WidgetDataType, useRecommendation, widget, RecommendationInitialState } from '@sitecore-search/react'; import { Presence } from '@sitecore-search/ui'; import { ArticleCardStyled, GridStyled, LoaderAnimation, LoaderContainer, RecommendationContainer, TitleStyled, } from './styled'; type ArticleModel = { id: string; name: string; author?: string; url?: string; image\_url?: string; source\_id?: string; }; type RecommendationProps = { title?: string; itemsToDisplay?: number; }; type InitialState = RecommendationInitialState<'itemsPerPage'>; このブロックには以下が含まれます: - 列挙子 WidgetDataType 文をインポートし、クエリフック useRecommendation 、Discover JS SDK for Reactから関数 widget 。 - [UIコンポーネントのCLI](https://www.npmjs.com/package/@sitecore-search/cli)パッケージからArticleCardStyledヘッドレスプリミティブUIコンポーネントの文をインポートします。 - エンティティタイプのArticleModelarticle リクエストクエリで使用されます。 - RecommendationProps ウィジェットに必要なプロパティを備えて。 - InitialState 2. export const RecommendationBasic = ({ title = '', itemsToDisplay = 6 }) => { これは基本的なrecommendationウィジェットのReact UIコンポーネントの宣言です。以下の表は引数を説明します: titleは出力で使用され、クエリではproductsToDisplayが渡されます。 財産 種類 概要 title ストリング Stringはウィジェットのタイトルとして使われています。 itemsToDisplay 整数 レスポンスとウィジェット内の表示に最大項目数を表示します。 デフォルト:4 3. export const RecommendationBasicHorizontalStyledComponent = ({ title = '', itemsToDisplay = 6 }: RecommendationProps) => { const { widgetRef, actions: { onItemClick }, queryResult: { isLoading, isFetching, data: { content: articles = } = {} }, } = useRecommendation({ state: { itemsPerPage: itemsToDisplay, }, }); recommendationウィジェットを作成するには、useRecommendationクエリフックを使用する必要があります。このクエリフックの汎用レスポンスには、action、state、queryResultの3つのオブジェクトが含まれます。この例では、製品名をクリックすると、レスポンスからonItemClickアクションをトリガーします。また、レスポンス内のdataからarticles配列も抽出します。 4. const loading = !isLoading && !isFetching && articles.length > 0; ウィジェットは、クエリフック応答isLoading、isFetching 、productsを用いてブール値を評価したときに表示されます。 5. return ( {loading && ( <> {title && {title}} {articles.map((item, index) => ( { event.preventDefault(); onItemClick({ id: item.id, index, sourceId: item.source\_id }); }} > {item.name} {item.author} ))} )} ); このReactコンポーネントが返すHTMLは、この単純なコンポーネントの表示を記述します。このコンポーネントはarticles配列をループし、ヘッドレスArticleCardStyledプリミティブなUIコンポーネントを埋め込みます。応答に含まれるようにマークされた表示属性のみを使用できます。マークされていない属性はエラーを引き起こす可能性があります。 6. const RecommendationBasicWidget = widget(RecommendationBasicHorizontalStyledComponent, WidgetDataType.RECOMMENDATION,"content"); [widget](./high-order-functions/widget-function.md "widget function")は高次関数で、React UIコンポーネントをウィジェットコンポーネントに変換し、WidgetsProviderの子孫として追加できます。また、結果のウィジェットとエンティティタイプも提供する必要があります。React UIコンポーネントで使用されるクエリフックは、widget関数で使われるウィジェットタイプと一致しなければなりません。 7. export default RecommendationBasicWidget; ウィジェットコンポーネントのエクスポートステートメント。 以下はBasic recommendationウィジェットの全コードです。検索結果およびpreview searchウィジェットについては、それぞれのクエリフックをご利用ください。 import React from 'react'; import { WidgetDataType, useRecommendation, widget, RecommendationInitialState } from '@sitecore-search/react'; import { Presence } from '@sitecore-search/ui'; import { ArticleCardStyled, GridStyled, LoaderAnimation, LoaderContainer, RecommendationContainer, TitleStyled, } from './styled'; type ArticleModel = { id: string; name: string; author?: string; url?: string; image\_url?: string; source\_id?: string; }; type RecommendationProps = { title?: string; itemsToDisplay?: number; }; type InitialState = RecommendationInitialState<'itemsPerPage'>; export const RecommendationBasicHorizontalStyledComponent = ({ title = '', itemsToDisplay = 6 }: RecommendationProps) => { const { widgetRef, actions: { onItemClick }, queryResult: { isLoading, isFetching, data: { content: articles = } = {} }, } = useRecommendation({ state: { itemsPerPage: itemsToDisplay, }, }); const loading = !isLoading && !isFetching && articles.length > 0; return ( {loading && ( <> {title && {title}} {articles.map((item, index) => ( { event.preventDefault(); onItemClick({ id: item.id, index, sourceId: item.source\_id }); }} > {item.name} {item.author} ))} )} ); }; const RecommendationStyledWidget = widget(RecommendationBasicHorizontalStyledComponent, WidgetDataType.RECOMMENDATION, "content"); export default RecommendationStyledWidget;