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

Basic recommendation widgetテンプレートの解剖学

UI Components 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<ArticleModel, InitialState>({ 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) => ( <ArticleCardStyled.Root key={item.id}> <ArticleCardStyled.ImageWrapper> <ArticleCardStyled.Image src={item?.image_url || DEFAULT_IMG_URL} /> </ArticleCardStyled.ImageWrapper> <ArticleCardStyled.Content> <ArticleCardStyled.Link href={item.url} onClick={(event) => { event.preventDefault(); onItemClick({ id: item.id, index, sourceId: item.source_id }); }} > <ArticleCardStyled.Title>{item.name}</ArticleCardStyled.Title> <ArticleCardStyled.Subtitle>{item.author}</ArticleCardStyled.Subtitle> </ArticleCardStyled.Link> </ArticleCardStyled.Content> </ArticleCardStyled.Root> ))} </> )} );

この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<ArticleModel, InitialState>({ state: { itemsPerPage: itemsToDisplay, }, });

const loading = !isLoading && !isFetching && articles.length > 0;

return ( <LoaderAnimation aria-busy={loading} aria-hidden={!loading} focusable="false" role="progressbar" viewBox="0 0 20 20"