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

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

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

Sitecore Searchウィジェットは、特定のエクスペリエンスを提供するためにページまたはメールメッセージに追加される動的コンポーネントです。ウィジェットの主な目的は、Searchのコンテンツを表示することです。以前に設定されたコンテンツのみを表示するコンテンツパーソナライゼーションウィジェットとは異なり、マーチャンダイジングウィジェットは、コンテキストやユーザーの操作に基づいてデータリクエストを変更できます。

ReactパッケージのSearchJS SDKには、rfk_idでのみインスタンス化できる次のウィジェットテンプレートが含まれています。実行時に、JS SDKはウィジェットのデータを要求し、構成と表示に必要なデータをウィジェットに提供します。

メモ

Search results、preview search、およびrecommendationウィジェットは、機能的なReactコンポーネントを関連付ける必要があるため、JS SDKには含まれていません。

JS SDKは、コンポーネントまたはテンプレートの作成に使用できるクエリフックと高次関数のみを提供します。

基本的なrecommendationウィジェットテンプレートの構造

ウィジェットがUIコンポーネントCLIパッケージでどのように記述されているかを理解するために、スタイル付きrecommendationウィジェットのコードは小さなブロックに分割されています。各ブロックには、ウィジェットテンプレートのさまざまな要素を説明するための注釈が付けられます。

RequestResponse

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'>;

このブロックには、次のものが含まれます。

Discover JS SDK for the Reactから、WidgetDataType列挙子、useRecommendationクエリフック、およびwidget関数のステートメントをインポートします。
UIコンポーネントCLIパッケージからArticleCardStyledヘッドレスプリミティブUIコンポーネントのステートメントをインポートします。
エンティティ型のArticleModelarticle 要求クエリで使用されます。
RecommendationPropsウィジェットに必要なプロパティに置き換えます。
InitialState

RequestResponse

これは、基本的なrecommendationウィジェットのReact UIコンポーネントの宣言です。次の表では、titleが出力で使用され、productsToDisplayがクエリで渡される引数について説明します。

財産	種類	形容
title	糸	ウィジェットのタイトルとして使用される文字列。
itemsToDisplay	整数	応答内のアイテムの最大数とウィジェットに表示されるアイテムの最大数。デフォルト: 4

財産

種類

形容

title

糸

ウィジェットのタイトルとして使用される文字列。

itemsToDisplay

整数

応答内のアイテムの最大数とウィジェットに表示されるアイテムの最大数。

デフォルト: 4

RequestResponse
```
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配列を抽出します。
RequestResponse
ウィジェットは、クエリフックの応答、isLoading、isFetching 、およびproductsを使用してブール値の準備が整ったときに表示されます。

RequestResponse

return (
    <RecommendationContainer>
      <Presence present={loading}>
        <LoaderContainer>
          <LoaderAnimation
            aria-busy={loading}
            aria-hidden={!loading}
            focusable="false"
            role="progressbar"
            viewBox="0 0 20 20"
          >
            <path d="M7.229 1.173a9.25 9.25 0 1 0 11.655 11.412 1.25 1.25 0 1 0-2.4-.698 6.75 6.75 0 1 1-8.506-8.329 1.25 1.25 0 1 0-.75-2.385z" />
          </LoaderAnimation>
        </LoaderContainer>
      </Presence>
      {loading && (
        <>
          {title && <TitleStyled>{title}</TitleStyled>}
          <GridStyled ref={widgetRef}>
            {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>
            ))}
          </GridStyled>
        </>
      )}
    </RecommendationContainer>
  );

このReactコンポーネントによって返されるHTMLは、この単純なコンポーネントの表示を説明しています。 articles配列をループし、ヘッドレスArticleCardStyledプリミティブUIコンポーネントを設定します。表示内の属性は、応答に含めるようにマークされているものだけを使用できます。マークされていない属性は、エラーにつながる可能性があります。

RequestResponse
widgetは、React UIコンポーネントをWidgetsProviderの子孫として追加できるウィジェットコンポーネントに変換する高次関数です。また、結果のウィジェットとエンティティタイプも提供する必要があります。React UIコンポーネントで使用されるクエリフックは、widget関数で使用されるウィジェットタイプと一致する必要があります。
RequestResponse
ウィジェットコンポーネントのエクスポートステートメント。

以下は、基本的なrecommendationウィジェットのコード全体です。検索結果とpreview searchウィジェットの場合は、それぞれのクエリフックを使用します。

RequestResponse

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 (
    <RecommendationContainer>
      <Presence present={loading}>
        <LoaderContainer>
          <LoaderAnimation
            aria-busy={loading}
            aria-hidden={!loading}
            focusable="false"
            role="progressbar"
            viewBox="0 0 20 20"
          >
            <path d="M7.229 1.173a9.25 9.25 0 1 0 11.655 11.412 1.25 1.25 0 1 0-2.4-.698 6.75 6.75 0 1 1-8.506-8.329 1.25 1.25 0 1 0-.75-2.385z" />
          </LoaderAnimation>
        </LoaderContainer>
      </Presence>
      {loading && (
        <>
          {title && <TitleStyled>{title}</TitleStyled>}
          <GridStyled ref={widgetRef}>
            {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>
            ))}
          </GridStyled>
        </>
      )}
    </RecommendationContainer>
  );
};

const RecommendationStyledWidget = widget(RecommendationBasicHorizontalStyledComponent, WidgetDataType.RECOMMENDATION, "content");

何かフィードバックはありますか?

この記事を改善するための提案がある場合は、