React用JS SDK Search

React用JS SDK Search
horizontal recommendation ウィジェットテンプレート

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

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

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

horizontal recommendationウィジェットには、ページネーションコントロール付きのrecommendationsが表示されます。

Screenshot of a horizontal recommendation widget.

以下のセクションでは、水平recommendationウィジェット・テンプレートについて説明し、APIリファレンスと、React SDK Searchforを使用してReactプロジェクトのWidgetsProviderに追加できるコード・ブロックの作成方法について説明します。ウィジェットは、検索結果クエリフックを使用してデータを要求および取得します。

ウィジェットコンポーネントを作成するには、Search UIコンポーネントCLI、コマンドラインインターフェイスを使用するか、コードブロックを手動でコピーして貼り付けるかを選択できます。

コンポーネントの生成または作成

大事な

ウィジェットテンプレートのエンティティモデルを実装に合わせて調整することを忘れないでください。

プレーンコンポーネント

TS CLI

Sitecore Search CLIを使用すると、ウィジェットテンプレートの必要なすべてのファイルをReactプロジェクトにレプリケートできます。次の手順には、プロジェクトにCLIをインストールする手順と、ウィジェットコンポーネントが作成される場所を指定する手順が含まれています。

以前にプロジェクトにCLIをインストールし、.sc-search-settings.jsonというファイルで場所を定義している場合は、手順3に直接進むことができます。

プロジェクトにUI Components CLIをインストールするには:

Search UI Components CLIをインストールするには、IDEまたはコマンドプロンプトのターミナルを開き、次のコマンドを実行します。
npx install --save-dev @sitecore-search/cli
ウィジェットコンポーネントが作成される場所を定義するには、プロジェクトのルートにある .sc-search-settings.jsonというファイルで、次のコードブロックに示すように場所を指定します。
{ "components-path": "src-test/components" }
ウィジェットコンポーネントを作成するには、.sc-search-settings.jsonファイルで定義した場所に移動し、IDEまたはコマンドプロンプトのターミナルを開いて、次のコマンドを実行します。
npx sc-search new-widget --language typescript --template recommendation-basic-horizontal --entity content --styling plain

TSマニュアル

Reactプロジェクトでウィジェットテンプレートを手動で作成する場合は、必要な依存関係をインストールし、必要なすべてのファイルを作成する必要があります。

必要なNPMパッケージを以前にインストールしたことがある場合は、依存関係のインストール手順をスキップできます。

このウィジェットテンプレートを使用してウィジェットコンポーネントをプロジェクトで作成するには、次のようにします。

プロジェクトで開発依存関係をインストールするには、IDEまたはコマンドプロンプトのターミナルを開き、次のコマンドを実行します。
npm install @radix-ui/react-icons@^1.3.0

// index.tsx
import type { RecommendationInitialState } from '@sitecore-search/react';
import { WidgetDataType, useRecommendation, widget } from '@sitecore-search/react';
import { ArticleCard, Presence } from '@sitecore-search/ui';

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'>;
const DEFAULT_IMG_URL = 'https://placehold.co/500x300?text=No%20Image'; // TODO: Update with corresponding fallback image

export const RecommendationBasicHorizontalComponent = ({ title = '', itemsToDisplay = 6 }: RecommendationProps) => {
  const {
    widgetRef,
    actions: { onItemClick },
    queryResult: { isLoading, isFetching, data: { content: articles = [] } = {} },
  } = useRecommendation<ArticleModel, InitialState>({
    state: {
      itemsPerPage: itemsToDisplay,
    },
  });
  const loading = isLoading || isFetching;
  return (
    <div>
      <Presence present={loading}>
        <div>
          <svg 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" />
          </svg>
        </div>
      </Presence>
      {!loading && (
        <>
          {title && <h3>{title}</h3>}
          <div ref={widgetRef}>
            {articles.map((item, index) => (
              <ArticleCard.Root key={item.id}>
                <div>
                  <ArticleCard.Image src={item?.image_url || DEFAULT_IMG_URL} />
                </div>
                <div>
                  <a
                    href={item.url}
                    onClick={(event) => {
                      event.preventDefault();
                      onItemClick({
                        id: item.id,
                        index,
                        sourceId: item.source_id,
                      });
                    }}
                  >
                    <ArticleCard.Title>{item.name}</ArticleCard.Title>
                    <ArticleCard.Subtitle>{item.author}</ArticleCard.Subtitle>
                  </a>
                </div>
              </ArticleCard.Root>
            ))}
          </div>
        </>
      )}
    </div>
  );
};
const RecommendationBasicHorizontalWidget = widget(RecommendationBasicHorizontalComponent, WidgetDataType.RECOMMENDATION, 'content');
export default RecommendationBasicHorizontalWidget;

JS CLIの

以前にプロジェクトにCLIをインストールし、.sc-search-settings.jsonというファイルで場所を定義している場合は、手順3に直接進むことができます。

プロジェクトにUI Components CLIをインストールするには:

Search UI Components CLIをインストールするには、IDEまたはコマンドプロンプトのターミナルを開き、次のコマンドを実行します。
npx install --save-dev @sitecore-search/cli
ウィジェットコンポーネントが作成される場所を定義するには、プロジェクトのルートにある .sc-search-settings.jsonというファイルで、次のコードブロックに示すように場所を指定します。
{ "components-path": "src-test/components" }
.sc-search-settings.jsonにリストされている場所に、index.jsxファイルにウィジェットコンポーネントを作成するには、次のコマンドをIDEのターミナルに貼り付けます。
npx sc-search new-widget --language javascript --template recommendation-basic-horizontal --entity content --styling plain

JSマニュアル

必要なNPMパッケージを以前にインストールしたことがある場合は、依存関係のインストール手順をスキップできます。

このウィジェットテンプレートを使用してウィジェットコンポーネントをプロジェクトで作成するには、次のようにします。

プロジェクトで開発依存関係をインストールするには、IDEまたはコマンドプロンプトのターミナルを開き、次のコマンドを実行します。
npm install @radix-ui/react-icons@^1.3.0

// index.jsx
import { WidgetDataType, useRecommendation, widget } from '@sitecore-search/react';
import { ArticleCard, Presence } from '@sitecore-search/ui';

const DEFAULT_IMG_URL = 'https://placehold.co/500x300?text=No%20Image'; // TODO: Update with corresponding fallback image

export const RecommendationBasicHorizontalComponent = ({ title = '', itemsToDisplay = 6 }) => {
  const {
    widgetRef,
    actions: { onItemClick },
    queryResult: { isLoading, isFetching, data: { content: articles = [] } = {} },
  } = useRecommendation({
    state: {
      itemsPerPage: itemsToDisplay,
    },
  });
  const loading = isLoading || isFetching;
  return (
    <div>
      <Presence present={loading}>
        <div>
          <svg 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" />
          </svg>
        </div>
      </Presence>
      {!loading && (
        <>
          {title && <h3>{title}</h3>}
          <div ref={widgetRef}>
            {articles.map((item, index) => (
              <ArticleCard.Root key={item.id}>
                <div>
                  <ArticleCard.Image src={item?.image_url || DEFAULT_IMG_URL} />
                </div>
                <div>
                  <a
                    href={item.url}
                    onClick={(event) => {
                      event.preventDefault();
                      onItemClick({
                        id: item.id,
                        index,
                        sourceId: item.source_id,
                      });
                    }}
                  >
                    <ArticleCard.Title>{item.name}</ArticleCard.Title>
                    <ArticleCard.Subtitle>{item.author}</ArticleCard.Subtitle>
                  </a>
                </div>
              </ArticleCard.Root>
            ))}
          </div>
        </>
      )}
    </div>
  );
};
const RecommendationBasicHorizontalWidget = widget(RecommendationBasicHorizontalComponent, WidgetDataType.RECOMMENDATION, 'content');
export default RecommendationBasicHorizontalWidget;

スタイル付きコンポーネント

TS CLI

以前にプロジェクトにCLIをインストールし、.sc-search-settings.jsonというファイルで場所を定義している場合は、手順3に直接進むことができます。

プロジェクトにUI Components CLIをインストールするには:

Search UI Components CLIをインストールするには、IDEまたはコマンドプロンプトのターミナルを開き、次のコマンドを実行します。
npx install --save-dev @sitecore-search/cli
ウィジェットコンポーネントが作成される場所を定義するには、プロジェクトのルートにある .sc-search-settings.jsonというファイルで、次のコードブロックに示すように場所を指定します。
{ "components-path": "src-test/components" }
ウィジェットコンポーネントをindex.tsxファイルとstyled.tsファイルに作成するには、.sc-search-settings.jsonファイルで定義した場所に移動し、IDEまたはコマンドプロンプトのターミナルを開いて、次のコマンドを実行します。
npx sc-search new-widget --language typescript --template recommendation-basic-horizontal --entity content --styling styled

TSマニュアル

必要なNPMパッケージを以前にインストールしたことがある場合は、依存関係のインストール手順をスキップできます。

このウィジェットテンプレートを使用してウィジェットコンポーネントをプロジェクトで作成するには、次のようにします。

プロジェクトで開発依存関係をインストールするには、IDEまたはコマンドプロンプトのターミナルを開き、次のコマンドを実行します。
npm install styled-components@^6.1.0 @radix-ui/react-icons@^1.3.0
プロジェクトで開発依存関係をインストールするには、IDEまたはコマンドプロンプトのターミナルを開き、次のコマンドを実行します。
npm install --save-dev @types/styled-components@^5.1.29

// index.tsx
import type { RecommendationInitialState } from '@sitecore-search/react';
import { WidgetDataType, useRecommendation, widget } 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'>;

const DEFAULT_IMG_URL = 'https://placehold.co/500x300?text=No%20Image'; // TODO: Update with corresponding fallback image

export const RecommendationBasicHorizontalComponent = ({ title = '', itemsToDisplay = 6 }: RecommendationProps) => {
  const {
    widgetRef,
    actions: { onItemClick },
    queryResult: { isLoading, isFetching, data: { content: articles = [] } = {} },
  } = useRecommendation<ArticleModel, InitialState>({
    state: {
      itemsPerPage: itemsToDisplay,
    },
  });

  const loading = isLoading || isFetching;

  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 RecommendationBasicHorizontalWidget = widget(RecommendationBasicHorizontalComponent, WidgetDataType.RECOMMENDATION, 'content');
export default RecommendationBasicHorizontalWidget;

// styled.ts
import { keyframes, styled } from 'styled-components';

import { ArticleCard, theme } from '@sitecore-search/ui';

const ArticleCardRootStyled = styled(ArticleCard.Root)`
  cursor: pointer;
  box-sizing: border-box;
  box-shadow: 0 0 2px 2px ${theme.vars.palette.grey['400']};
  background: #fff;
  margin: ${theme.vars.spacing.m};
  position: relative;
  -webkit-transition: 0.3s all ease;
  transition: 0.15s all ease;
  width: 250px;

  &:focus-within {
    box-shadow: 0 0 8px 3px rgba(0, 0, 0, 0.15);
    transform: scale(1.025);
    opacity: 1;
    transition: 0.35s all ease;
  }

  &:hover {
    box-shadow: 0 0 8px 3px rgba(0, 0, 0, 0.15);
    transform: scale(1.025);
    opacity: 1;
    transition: 0.35s all ease;
  }
`;

const ArticleCardContentStyled = styled.div`
  padding: ${theme.vars.spacing.m};
`;

const ArticleCardLinkStyled = styled.a`
  color: ${theme.vars.palette.text.primary};
  font-size: ${theme.vars.typography.fontSize3.fontSize};
  text-decoration: none;

  &:hover {
    text-decoration: none;
  }

  &:focus {
    text-decoration: none;
  }
  &::after {
    position: absolute;
    inset: 0;
    display: block;
    content: ' ';
  }
`;

const ArticleCardImageStyled = styled(ArticleCard.Image)`
  width: 100%;
`;

const ArticleCardImageWrapperStyled = styled.div`
  position: relative;
  height: 120px;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
`;
const ArticleCardTitleStyled = styled(ArticleCard.Title)`
  color: ${theme.vars.palette.text.primary};
  font-family: ${theme.vars.typography.fontFamilySystem};
  font-size: ${theme.vars.typography.h3.fontSize};
  font-weight: ${theme.vars.typography.h3.fontWeight};
  line-height: ${theme.vars.typography.h3.lineHeight};
  margin: 0 0 ${theme.vars.spacing.m};
`;

const ArticleCardSubtitleStyled = styled(ArticleCard.Subtitle)`
  color: ${theme.vars.palette.text.secondary};
  font-family: ${theme.vars.typography.fontFamilySystem};
  font-size: ${theme.vars.typography.fontSize3.fontSize};
  font-weight: ${theme.vars.typography.fontSize3.fontWeight};
  line-height: ${theme.vars.typography.fontSize3.lineHeight};
  margin: 0 0 ${theme.vars.spacing.m};
`;

export const TitleStyled = styled.h3`
  color: ${theme.vars.palette.primary.main};
  font-family: ${theme.vars.typography.fontFamilySystem};
  font-size: ${theme.vars.typography.h3.fontSize};
`;

export const GridStyled = styled.div`
  display: flex;
  flex-flow: row wrap;
`;

export const LoaderContainer = styled.div`
  align-items: center;
  display: flex;
  min-height: 50vh;
`;

const Rotate = keyframes`
  from {
      transform: rotate(0deg);
  }
  to {
      transform: rotate(360deg);
  }
`;

export const RecommendationContainer = styled.div`
  max-width: 1280px;
  margin: 0 auto;
`;

export const LoaderAnimation = styled.svg`
  animation: ${Rotate} 2s linear infinite;
  display: block;
  fill: ${theme.vars.palette.primary.main};
  height: 50px;
  margin: auto;
  width: 50px;
`;

export const ArticleCardStyled = {
  Root: ArticleCardRootStyled,
  Content: ArticleCardContentStyled,
  Link: ArticleCardLinkStyled,
  Image: ArticleCardImageStyled,
  ImageWrapper: ArticleCardImageWrapperStyled,
  Title: ArticleCardTitleStyled,
  Subtitle: ArticleCardSubtitleStyled,
};

JS CLIの

以前にプロジェクトにCLIをインストールし、.sc-search-settings.jsonというファイルで場所を定義している場合は、手順3に直接進むことができます。

プロジェクトにUI Components CLIをインストールするには:

Search UI Components CLIをインストールするには、IDEまたはコマンドプロンプトのターミナルを開き、次のコマンドを実行します。
npx install --save-dev @sitecore-search/cli
ウィジェットコンポーネントが作成される場所を定義するには、プロジェクトのルートにある .sc-search-settings.jsonというファイルで、次のコードブロックに示すように場所を指定します。
{ "components-path": "src-test/components" }
ウィジェットコンポーネントをindex.jsxファイルとstyled.jsファイルに作成するには、.sc-search-settings.jsonファイルで定義した場所に移動し、IDEまたはコマンドプロンプトのターミナルを開いて、次のコマンドを実行します。
npx sc-search new-widget --language javascript --template recommendation-basic-horizontal --entity content --styling styled

JSマニュアル

必要なNPMパッケージを以前にインストールしたことがある場合は、依存関係のインストール手順をスキップできます。

このウィジェットテンプレートを使用してウィジェットコンポーネントをプロジェクトで作成するには、次のようにします。

プロジェクトで開発依存関係をインストールするには、IDEまたはコマンドプロンプトのターミナルを開き、次のコマンドを実行します。
npm install styled-components@^6.1.0 @radix-ui/react-icons@^1.3.0
プロジェクトで開発依存関係をインストールするには、IDEまたはコマンドプロンプトのターミナルを開き、次のコマンドを実行します。
npm install --save-dev @types/styled-components@^5.1.29

// index.jsx
import { WidgetDataType, useRecommendation, widget } from '@sitecore-search/react';
import { Presence } from '@sitecore-search/ui';

import {
  ArticleCardStyled,
  GridStyled,
  LoaderAnimation,
  LoaderContainer,
  RecommendationContainer,
  TitleStyled,
} from './styled';

const DEFAULT_IMG_URL = 'https://placehold.co/500x300?text=No%20Image'; // TODO: Update with corresponding fallback image

export const RecommendationBasicHorizontalComponent = ({ title = '', itemsToDisplay = 6 }) => {
  const {
    widgetRef,
    actions: { onItemClick },
    queryResult: { isLoading, isFetching, data: { content: articles = [] } = {} },
  } = useRecommendation({
    state: {
      itemsPerPage: itemsToDisplay,
    },
  });
  const loading = isLoading || isFetching;
  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 RecommendationBasicHorizontalWidget = widget(RecommendationBasicHorizontalComponent, WidgetDataType.RECOMMENDATION, 'content');
export default RecommendationBasicHorizontalWidget;

// styled.js
import { keyframes, styled } from 'styled-components';

import { ArticleCard, theme } from '@sitecore-search/ui';

const ArticleCardRootStyled = styled(ArticleCard.Root)`
  cursor: pointer;
  box-sizing: border-box;
  box-shadow: 0 0 2px 2px ${theme.vars.palette.grey['400']};
  background: #fff;
  margin: ${theme.vars.spacing.m};
  position: relative;
  -webkit-transition: 0.3s all ease;
  transition: 0.15s all ease;
  width: 250px;

  &:focus-within {
    box-shadow: 0 0 8px 3px rgba(0, 0, 0, 0.15);
    transform: scale(1.025);
    opacity: 1;
    transition: 0.35s all ease;
  }

  &:hover {
    box-shadow: 0 0 8px 3px rgba(0, 0, 0, 0.15);
    transform: scale(1.025);
    opacity: 1;
    transition: 0.35s all ease;
  }
`;
const ArticleCardContentStyled = styled.div`
  padding: ${theme.vars.spacing.m};
`;
const ArticleCardLinkStyled = styled.a`
  color: ${theme.vars.palette.text.primary};
  font-size: ${theme.vars.typography.fontSize3.fontSize};
  text-decoration: none;

  &:hover {
    text-decoration: none;
  }

  &:focus {
    text-decoration: none;
  }
  &::after {
    position: absolute;
    inset: 0;
    display: block;
    content: ' ';
  }
`;
const ArticleCardImageStyled = styled(ArticleCard.Image)`
  width: 100%;
`;
const ArticleCardImageWrapperStyled = styled.div`
  position: relative;
  height: 120px;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
`;
const ArticleCardTitleStyled = styled(ArticleCard.Title)`
  color: ${theme.vars.palette.text.primary};
  font-family: ${theme.vars.typography.fontFamilySystem};
  font-size: ${theme.vars.typography.h3.fontSize};
  font-weight: ${theme.vars.typography.h3.fontWeight};
  line-height: ${theme.vars.typography.h3.lineHeight};
  margin: 0 0 ${theme.vars.spacing.m};
`;
const ArticleCardSubtitleStyled = styled(ArticleCard.Subtitle)`
  color: ${theme.vars.palette.text.secondary};
  font-family: ${theme.vars.typography.fontFamilySystem};
  font-size: ${theme.vars.typography.fontSize3.fontSize};
  font-weight: ${theme.vars.typography.fontSize3.fontWeight};
  line-height: ${theme.vars.typography.fontSize3.lineHeight};
  margin: 0 0 ${theme.vars.spacing.m};
`;
export const TitleStyled = styled.h3`
  color: ${theme.vars.palette.primary.main};
  font-family: ${theme.vars.typography.fontFamilySystem};
  font-size: ${theme.vars.typography.h3.fontSize};
`;
export const GridStyled = styled.div`
  display: flex;
  flex-flow: row wrap;
`;
export const LoaderContainer = styled.div`
  align-items: center;
  display: flex;
  min-height: 50vh;
`;
const Rotate = keyframes`
  from {
      transform: rotate(0deg);
  }
  to {
      transform: rotate(360deg);
  }
`;
export const RecommendationContainer = styled.div`
  max-width: 1280px;
  margin: 0 auto;
`;
export const LoaderAnimation = styled.svg`
  animation: ${Rotate} 2s linear infinite;
  display: block;
  fill: ${theme.vars.palette.primary.main};
  height: 50px;
  margin: auto;
  width: 50px;
`;
export const ArticleCardStyled = {
  Root: ArticleCardRootStyled,
  Content: ArticleCardContentStyled,
  Link: ArticleCardLinkStyled,
  Image: ArticleCardImageStyled,
  ImageWrapper: ArticleCardImageWrapperStyled,
  Title: ArticleCardTitleStyled,
  Subtitle: ArticleCardSubtitleStyled,
};

CSSスタイルコンポーネント

TS CLI

以前にプロジェクトにCLIをインストールし、.sc-search-settings.jsonというファイルで場所を定義している場合は、手順3に直接進むことができます。

プロジェクトにUI Components CLIをインストールするには:

Search UI Components CLIをインストールするには、IDEまたはコマンドプロンプトのターミナルを開き、次のコマンドを実行します。
npx install --save-dev @sitecore-search/cli
ウィジェットコンポーネントが作成される場所を定義するには、プロジェクトのルートにある .sc-search-settings.jsonというファイルで、次のコードブロックに示すように場所を指定します。
{ "components-path": "src-test/components" }
ウィジェットコンポーネントをindex.tsxファイルとstyles.cssファイルに作成するには、.sc-search-settings.jsonファイルで定義した場所に移動し、IDEまたはコマンドプロンプトのターミナルを開いて、次のコマンドを実行します。
npx sc-search new-widget --language typescript --template recommendation-basic-horizontal --entity content --styling css

TSマニュアル

プロジェクトで開発依存関係をインストールするには、IDEまたはコマンドプロンプトのターミナルを開き、次のコマンドを実行します。
npm install @radix-ui/react-icons@^1.3.0

// index.tsx
import type { RecommendationInitialState } from '@sitecore-search/react';
import { WidgetDataType, useRecommendation, widget } from '@sitecore-search/react';
import { ArticleCard, Presence } from '@sitecore-search/ui';

import './styles.css';

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'>;
const DEFAULT_IMG_URL = 'https://placehold.co/500x300?text=No%20Image'; // TODO: Update with corresponding fallback image

export const RecommendationBasicHorizontalComponent = ({ title = '', itemsToDisplay = 6 }: RecommendationProps) => {
  const {
    widgetRef,
    actions: { onItemClick },
    queryResult: { isLoading, isFetching, data: { content: articles = [] } = {} },
  } = useRecommendation<ArticleModel, InitialState>({
    state: {
      itemsPerPage: itemsToDisplay,
    },
  });
  const loading = isLoading || isFetching;
  return (
    <div className="sitecore-recommendation-container">
      <Presence present={loading}>
        <div className="sitecore-loader-container">
          <svg
            aria-busy={loading}
            aria-hidden={!loading}
            focusable="false"
            role="progressbar"
            viewBox="0 0 20 20"
            className="sitecore-loader-animation"
          >
            <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" />
          </svg>
        </div>
      </Presence>
      {!loading && (
        <>
          {title && <h3 className="sitecore-title">{title}</h3>}
          <div ref={widgetRef} className="sitecore-grid">
            {articles.map((item, index) => (
              <ArticleCard.Root key={item.id} className="sitecore-article-card-root">
                <div className="sitecore-article-card-image-wrapper">
                  <ArticleCard.Image src={item?.image_url || DEFAULT_IMG_URL} className="sitecore-article-card-image" />
                </div>
                <div className="sitecore-article-card-content">
                  <a
                    href={item.url}
                    onClick={(event) => {
                      event.preventDefault();
                      onItemClick({
                        id: item.id,
                        index,
                        sourceId: item.source_id,
                      });
                    }}
                    className="sitecore-article-card-link"
                  >
                    <ArticleCard.Title className="sitecore-article-card-title">{item.name}</ArticleCard.Title>
                    <ArticleCard.Subtitle className="sitecore-article-card-subtitle">
                      {item.author}
                    </ArticleCard.Subtitle>
                  </a>
                </div>
              </ArticleCard.Root>
            ))}
          </div>
        </>
      )}
    </div>
  );
};
const RecommendationBasicHorizontalWidget = widget(RecommendationBasicHorizontalComponent, WidgetDataType.RECOMMENDATION, 'content');
export default RecommendationBasicHorizontalWidget;

// styles.css
@keyframes rotate-animation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* ArticleCardRoot */
.sitecore-article-card-root {
  cursor: pointer;
  box-sizing: border-box;
  box-shadow: 0 0 2px 2px var(--sdc-palette-grey-400);
  background: #fff;
  margin: var(--sdc-spacing-m);
  position: relative;
  transition: 0.15s all ease;
  width: 250px;
}

.sitecore-article-card-root:focus-within {
  box-shadow: 0 0 8px 3px rgb(0 0 0 / 15%);
  transform: scale(1.025);
  opacity: 1;
  transition: 0.35s all ease;
}

.sitecore-article-card-root:hover {
  box-shadow: 0 0 8px 3px rgb(0 0 0 / 15%);
  transform: scale(1.025);
  opacity: 1;
  transition: 0.35s all ease;
}

/* ArticleCardContent */
.sitecore-article-card-content {
  padding: var(--sdc-spacing-m);
}

/* ArticleCardLink */
.sitecore-article-card-link {
  color: var(--sdc-palette-text-primary);
  font-size: var(--sdc-typography-fontSize3-fontSize);
  text-decoration: none;
}

.sitecore-article-card-link:hover {
  text-decoration: none;
}

.sitecore-article-card-link:focus {
  text-decoration: none;
}

.sitecore-article-card-link::after {
  position: absolute;
  inset: 0;
  display: block;
  content: ' ';
}

/* ArticleCardImage */
.sitecore-article-card-image {
  width: 100%;
}

/* ArticleCardImageWrapper */
.sitecore-article-card-image-wrapper {
  position: relative;
  height: 120px;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

/* ArticleCardTitle */
.sitecore-article-card-title {
  color: var(--sdc-palette-text-primary);
  font-family: var(--sdc-typography-fontFamilySystem);
  font-size: var(--sdc-typography-h3-fontSize);
  font-weight: var(--sdc-typography-h3-fontWeight);
  line-height: var(--sdc-typography-h3-lineHeight);
  margin: 0 0 var(--sdc-spacing-m);
}

/* ArticleCardSubtitle */
.sitecore-article-card-subtitle {
  color: var(--sdc-palette-text-secondary);
  font-family: var(--sdc-typography-fontFamilySystem);
  font-size: var(--sdc-typography-fontSize3-fontSize);
  font-weight: var(--sdc-typography-fontSize3-fontWeight);
  line-height: var(--sdc-typography-fontSize3-lineHeight);
  margin: 0 0 var(--sdc-spacing-m);
}

/* Title */
.sitecore-title {
  color: var(--sdc-palette-primary-main);
  font-family: var(--sdc-typography-fontFamilySystem);
  font-size: var(--sdc-typography-h3-fontSize);
}

/* Grid */
.sitecore-grid {
  display: flex;
  flex-flow: row wrap;
}

/* LoaderContainer */
.sitecore-loader-container {
  align-items: center;
  display: flex;
  min-height: 50vh;
}

/* RecommendationContainer */
.sitecore-recommendation-container {
  max-width: 1280px;
  margin: 0 auto;
}

/* LoaderAnimation */
.sitecore-loader-animation {
  animation: rotate-animation 2s linear infinite;
  display: block;
  fill: var(--sdc-palette-primary-main);
  height: 50px;
  margin: auto;
  width: 50px;
}

JS CLIの

以前にプロジェクトにCLIをインストールし、.sc-search-settings.jsonというファイルで場所を定義している場合は、手順3に直接進むことができます。

プロジェクトにUI Components CLIをインストールするには:

Search UI Components CLIをインストールするには、IDEまたはコマンドプロンプトのターミナルを開き、次のコマンドを実行します。
npx install --save-dev @sitecore-search/cli
ウィジェットコンポーネントが作成される場所を定義するには、プロジェクトのルートにある .sc-search-settings.jsonというファイルで、次のコードブロックに示すように場所を指定します。
{ "components-path": "src-test/components" }
ウィジェットコンポーネントをindex.jsxファイルとstyles.cssファイルに作成するには、.sc-search-settings.jsonファイルで定義した場所に移動し、IDEまたはコマンドプロンプトのターミナルを開いて、次のコマンドを実行します。
npx sc-search new-widget --language javascript --template recommendation-basic-horizontal --entity content --styling css

JSマニュアル

プロジェクトで開発依存関係をインストールするには、IDEまたはコマンドプロンプトのターミナルを開き、次のコマンドを実行します。
npm install @radix-ui/react-icons@^1.3.0

// index.jsx
import { WidgetDataType, useRecommendation, widget } from '@sitecore-search/react';
import { ArticleCard, Presence } from '@sitecore-search/ui';

import './styles.css';

const DEFAULT_IMG_URL = 'https://placehold.co/500x300?text=No%20Image'; // TODO: Update with corresponding fallback image

export const RecommendationBasicHorizontalComponent = ({ title = '', itemsToDisplay = 6 }) => {
  const {
    widgetRef,
    actions: { onItemClick },
    queryResult: { isLoading, isFetching, data: { content: articles = [] } = {} },
  } = useRecommendation({
    state: {
      itemsPerPage: itemsToDisplay,
    },
  });
  const loading = isLoading || isFetching;
  return (
    <div className="sitecore-recommendation-container">
      <Presence present={loading}>
        <div className="sitecore-loader-container">
          <svg
            aria-busy={loading}
            aria-hidden={!loading}
            focusable="false"
            role="progressbar"
            viewBox="0 0 20 20"
            className="sitecore-loader-animation"
          >
            <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" />
          </svg>
        </div>
      </Presence>
      {!loading && (
        <>
          {title && <h3 className="sitecore-title">{title}</h3>}
          <div ref={widgetRef} className="sitecore-grid">
            {articles.map((item, index) => (
              <ArticleCard.Root key={item.id} className="sitecore-article-card-root">
                <div className="sitecore-article-card-image-wrapper">
                  <ArticleCard.Image src={item?.image_url || DEFAULT_IMG_URL} className="sitecore-article-card-image" />
                </div>
                <div className="sitecore-article-card-content">
                  <a
                    href={item.url}
                    onClick={(event) => {
                      event.preventDefault();
                      onItemClick({
                        id: item.id,
                        index,
                        sourceId: item.source_id,
                      });
                    }}
                    className="sitecore-article-card-link"
                  >
                    <ArticleCard.Title className="sitecore-article-card-title">{item.name}</ArticleCard.Title>
                    <ArticleCard.Subtitle className="sitecore-article-card-subtitle">
                      {item.author}
                    </ArticleCard.Subtitle>
                  </a>
                </div>
              </ArticleCard.Root>
            ))}
          </div>
        </>
      )}
    </div>
  );
};
const RecommendationBasicHorizontalWidget = widget(RecommendationBasicHorizontalComponent, WidgetDataType.RECOMMENDATION, 'content');
export default RecommendationBasicHorizontalWidget;

// styles.css
@keyframes rotate-animation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* ArticleCardRoot */
.sitecore-article-card-root {
  cursor: pointer;
  box-sizing: border-box;
  box-shadow: 0 0 2px 2px var(--sdc-palette-grey-400);
  background: #fff;
  margin: var(--sdc-spacing-m);
  position: relative;
  transition: 0.15s all ease;
  width: 250px;
}

.sitecore-article-card-root:focus-within {
  box-shadow: 0 0 8px 3px rgb(0 0 0 / 15%);
  transform: scale(1.025);
  opacity: 1;
  transition: 0.35s all ease;
}

.sitecore-article-card-root:hover {
  box-shadow: 0 0 8px 3px rgb(0 0 0 / 15%);
  transform: scale(1.025);
  opacity: 1;
  transition: 0.35s all ease;
}

/* ArticleCardContent */
.sitecore-article-card-content {
  padding: var(--sdc-spacing-m);
}

/* ArticleCardLink */
.sitecore-article-card-link {
  color: var(--sdc-palette-text-primary);
  font-size: var(--sdc-typography-fontSize3-fontSize);
  text-decoration: none;
}

.sitecore-article-card-link:hover {
  text-decoration: none;
}

.sitecore-article-card-link:focus {
  text-decoration: none;
}

.sitecore-article-card-link::after {
  position: absolute;
  inset: 0;
  display: block;
  content: ' ';
}

/* ArticleCardImage */
.sitecore-article-card-image {
  width: 100%;
}

/* ArticleCardImageWrapper */
.sitecore-article-card-image-wrapper {
  position: relative;
  height: 120px;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

/* ArticleCardTitle */
.sitecore-article-card-title {
  color: var(--sdc-palette-text-primary);
  font-family: var(--sdc-typography-fontFamilySystem);
  font-size: var(--sdc-typography-h3-fontSize);
  font-weight: var(--sdc-typography-h3-fontWeight);
  line-height: var(--sdc-typography-h3-lineHeight);
  margin: 0 0 var(--sdc-spacing-m);
}

/* ArticleCardSubtitle */
.sitecore-article-card-subtitle {
  color: var(--sdc-palette-text-secondary);
  font-family: var(--sdc-typography-fontFamilySystem);
  font-size: var(--sdc-typography-fontSize3-fontSize);
  font-weight: var(--sdc-typography-fontSize3-fontWeight);
  line-height: var(--sdc-typography-fontSize3-lineHeight);
  margin: 0 0 var(--sdc-spacing-m);
}

/* Title */
.sitecore-title {
  color: var(--sdc-palette-primary-main);
  font-family: var(--sdc-typography-fontFamilySystem);
  font-size: var(--sdc-typography-h3-fontSize);
}

/* Grid */
.sitecore-grid {
  display: flex;
  flex-flow: row wrap;
}

/* LoaderContainer */
.sitecore-loader-container {
  align-items: center;
  display: flex;
  min-height: 50vh;
}

/* RecommendationContainer */
.sitecore-recommendation-container {
  max-width: 1280px;
  margin: 0 auto;
}

/* LoaderAnimation */
.sitecore-loader-animation {
  animation: rotate-animation 2s linear infinite;
  display: block;
  fill: var(--sdc-palette-primary-main);
  height: 50px;
  margin: auto;
  width: 50px;
}

CSSモジュールスタイルコンポーネント

TS CLI

以前にプロジェクトにCLIをインストールし、.sc-search-settings.jsonというファイルで場所を定義している場合は、手順3に直接進むことができます。

プロジェクトにUI Components CLIをインストールするには:

Search UI Components CLIをインストールするには、IDEまたはコマンドプロンプトのターミナルを開き、次のコマンドを実行します。
npx install --save-dev @sitecore-search/cli
ウィジェットコンポーネントが作成される場所を定義するには、プロジェクトのルートにある .sc-search-settings.jsonというファイルで、次のコードブロックに示すように場所を指定します。
{ "components-path": "src-test/components" }
ウィジェットコンポーネントをindex.tsxファイルとstyles.module.cssファイルに作成するには、.sc-search-settings.jsonファイルで定義した場所に移動し、IDEまたはコマンドプロンプトのターミナルを開いて、次のコマンドを実行します。
npx sc-search new-widget --language typescript --template recommendation-basic-horizontal --entity content --styling cssModule

TSマニュアル

プロジェクトで開発依存関係をインストールするには、IDEまたはコマンドプロンプトのターミナルを開き、次のコマンドを実行します。
npm install @radix-ui/react-icons@^1.3.0

// index.tsx
import type { RecommendationInitialState } from '@sitecore-search/react';
import { WidgetDataType, useRecommendation, widget } from '@sitecore-search/react';
import { ArticleCard, Presence } from '@sitecore-search/ui';

import styles from './styles.module.css';

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'>;
const DEFAULT_IMG_URL = 'https://placehold.co/500x300?text=No%20Image'; // TODO: Update with corresponding fallback image

export const RecommendationBasicHorizontalComponent = ({ title = '', itemsToDisplay = 6 }: RecommendationProps) => {
  const {
    widgetRef,
    actions: { onItemClick },
    queryResult: { isLoading, isFetching, data: { content: articles = [] } = {} },
  } = useRecommendation<ArticleModel, InitialState>({
    state: {
      itemsPerPage: itemsToDisplay,
    },
  });
  const loading = isLoading || isFetching;
  return (
    <div className={styles['sitecore-recommendation-container']}>
      <Presence present={loading}>
        <div className={styles['sitecore-loader-container']}>
          <svg
            aria-busy={loading}
            aria-hidden={!loading}
            focusable="false"
            role="progressbar"
            viewBox="0 0 20 20"
            className={styles['sitecore-loader-animation']}
          >
            <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" />
          </svg>
        </div>
      </Presence>
      {!loading && (
        <>
          {title && <h3 className={styles['sitecore-title']}>{title}</h3>}
          <div ref={widgetRef} className={styles['sitecore-grid']}>
            {articles.map((item, index) => (
              <ArticleCard.Root key={item.id} className={styles['sitecore-article-card-root']}>
                <div className={styles['sitecore-article-card-image-wrapper']}>
                  <ArticleCard.Image
                    src={item?.image_url || DEFAULT_IMG_URL}
                    className={styles['sitecore-article-card-image']}
                  />
                </div>
                <div className={styles['sitecore-article-card-content']}>
                  <a
                    href={item.url}
                    onClick={(event) => {
                      event.preventDefault();
                      onItemClick({
                        id: item.id,
                        index,
                        sourceId: item.source_id,
                      });
                    }}
                    className={styles['sitecore-article-card-link']}
                  >
                    <ArticleCard.Title className={styles['sitecore-article-card-title']}>{item.name}</ArticleCard.Title>
                    <ArticleCard.Subtitle className={styles['sitecore-article-card-subtitle']}>
                      {item.author}
                    </ArticleCard.Subtitle>
                  </a>
                </div>
              </ArticleCard.Root>
            ))}
          </div>
        </>
      )}
    </div>
  );
};
const RecommendationBasicHorizontalWidget = widget(RecommendationBasicHorizontalComponent, WidgetDataType.RECOMMENDATION, 'content');
export default RecommendationBasicHorizontalWidget;

// styles.module.css
@keyframes rotate-animation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* ArticleCardRoot */
.sitecore-article-card-root {
  cursor: pointer;
  box-sizing: border-box;
  box-shadow: 0 0 2px 2px var(--sdc-palette-grey-400);
  background: #fff;
  margin: var(--sdc-spacing-m);
  position: relative;
  transition: 0.15s all ease;
  width: 250px;
}

.sitecore-article-card-root:focus-within {
  box-shadow: 0 0 8px 3px rgb(0 0 0 / 15%);
  transform: scale(1.025);
  opacity: 1;
  transition: 0.35s all ease;
}

.sitecore-article-card-root:hover {
  box-shadow: 0 0 8px 3px rgb(0 0 0 / 15%);
  transform: scale(1.025);
  opacity: 1;
  transition: 0.35s all ease;
}

/* ArticleCardContent */
.sitecore-article-card-content {
  padding: var(--sdc-spacing-m);
}

/* ArticleCardLink */
.sitecore-article-card-link {
  color: var(--sdc-palette-text-primary);
  font-size: var(--sdc-typography-fontSize3-fontSize);
  text-decoration: none;
}

.sitecore-article-card-link:hover {
  text-decoration: none;
}

.sitecore-article-card-link:focus {
  text-decoration: none;
}

.sitecore-article-card-link::after {
  position: absolute;
  inset: 0;
  display: block;
  content: ' ';
}

/* ArticleCardImage */
.sitecore-article-card-image {
  width: 100%;
}

/* ArticleCardImageWrapper */
.sitecore-article-card-image-wrapper {
  position: relative;
  height: 120px;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

/* ArticleCardTitle */
.sitecore-article-card-title {
  color: var(--sdc-palette-text-primary);
  font-family: var(--sdc-typography-fontFamilySystem);
  font-size: var(--sdc-typography-h3-fontSize);
  font-weight: var(--sdc-typography-h3-fontWeight);
  line-height: var(--sdc-typography-h3-lineHeight);
  margin: 0 0 var(--sdc-spacing-m);
}

/* ArticleCardSubtitle */
.sitecore-article-card-subtitle {
  color: var(--sdc-palette-text-secondary);
  font-family: var(--sdc-typography-fontFamilySystem);
  font-size: var(--sdc-typography-fontSize3-fontSize);
  font-weight: var(--sdc-typography-fontSize3-fontWeight);
  line-height: var(--sdc-typography-fontSize3-lineHeight);
  margin: 0 0 var(--sdc-spacing-m);
}

/* Title */
.sitecore-title {
  color: var(--sdc-palette-primary-main);
  font-family: var(--sdc-typography-fontFamilySystem);
  font-size: var(--sdc-typography-h3-fontSize);
}

/* Grid */
.sitecore-grid {
  display: flex;
  flex-flow: row wrap;
}

/* LoaderContainer */
.sitecore-loader-container {
  align-items: center;
  display: flex;
  min-height: 50vh;
}

/* RecommendationContainer */
.sitecore-recommendation-container {
  max-width: 1280px;
  margin: 0 auto;
}

/* LoaderAnimation */
.sitecore-loader-animation {
  animation: rotate-animation 2s linear infinite;
  display: block;
  fill: var(--sdc-palette-primary-main);
  height: 50px;
  margin: auto;
  width: 50px;
}

JS CLIの

以前にプロジェクトにCLIをインストールし、.sc-search-settings.jsonというファイルで場所を定義している場合は、手順3に直接進むことができます。

プロジェクトにUI Components CLIをインストールするには:

Search UI Components CLIをインストールするには、IDEまたはコマンドプロンプトのターミナルを開き、次のコマンドを実行します。
npx install --save-dev @sitecore-search/cli
ウィジェットコンポーネントが作成される場所を定義するには、プロジェクトのルートにある .sc-search-settings.jsonというファイルで、次のコードブロックに示すように場所を指定します。
{ "components-path": "src-test/components" }
ウィジェットコンポーネントをindex.jsxファイルとstyles.module.cssファイルに作成するには、.sc-search-settings.jsonファイルで定義した場所に移動し、IDEまたはコマンドプロンプトのターミナルを開いて、次のコマンドを実行します。
npx sc-search new-widget --language javascript --template recommendation-basic-horizontal --entity content --styling cssModule

JSマニュアル

プロジェクトで開発依存関係をインストールするには、IDEまたはコマンドプロンプトのターミナルを開き、次のコマンドを実行します。
npm install @radix-ui/react-icons@^1.3.0

// index.jsx
import { WidgetDataType, useRecommendation, widget } from '@sitecore-search/react';
import { ArticleCard, Presence } from '@sitecore-search/ui';

import styles from './styles.module.css';

const DEFAULT_IMG_URL = 'https://placehold.co/500x300?text=No%20Image'; // TODO: Update with corresponding fallback image

export const RecommendationBasicHorizontalComponent = ({ title = '', itemsToDisplay = 6 }) => {
  const {
    widgetRef,
    actions: { onItemClick },
    queryResult: { isLoading, isFetching, data: { content: articles = [] } = {} },
  } = useRecommendation({
    state: {
      itemsPerPage: itemsToDisplay,
    },
  });
  const loading = isLoading || isFetching;
  return (
    <div className={styles['sitecore-recommendation-container']}>
      <Presence present={loading}>
        <div className={styles['sitecore-loader-container']}>
          <svg
            aria-busy={loading}
            aria-hidden={!loading}
            focusable="false"
            role="progressbar"
            viewBox="0 0 20 20"
            className={styles['sitecore-loader-animation']}
          >
            <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" />
          </svg>
        </div>
      </Presence>
      {!loading && (
        <>
          {title && <h3 className={styles['sitecore-title']}>{title}</h3>}
          <div ref={widgetRef} className={styles['sitecore-grid']}>
            {articles.map((item, index) => (
              <ArticleCard.Root key={item.id} className={styles['sitecore-article-card-root']}>
                <div className={styles['sitecore-article-card-image-wrapper']}>
                  <ArticleCard.Image
                    src={item?.image_url || DEFAULT_IMG_URL}
                    className={styles['sitecore-article-card-image']}
                  />
                </div>
                <div className={styles['sitecore-article-card-content']}>
                  <a
                    href={item.url}
                    onClick={(event) => {
                      event.preventDefault();
                      onItemClick({
                        id: item.id,
                        index,
                        sourceId: item.source_id,
                      });
                    }}
                    className={styles['sitecore-article-card-link']}
                  >
                    <ArticleCard.Title className={styles['sitecore-article-card-title']}>{item.name}</ArticleCard.Title>
                    <ArticleCard.Subtitle className={styles['sitecore-article-card-subtitle']}>
                      {item.author}
                    </ArticleCard.Subtitle>
                  </a>
                </div>
              </ArticleCard.Root>
            ))}
          </div>
        </>
      )}
    </div>
  );
};
const RecommendationBasicHorizontalWidget = widget(RecommendationBasicHorizontalComponent, WidgetDataType.RECOMMENDATION, 'content');
export default RecommendationBasicHorizontalWidget;

// styles.module.css
@keyframes rotate-animation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* ArticleCardRoot */
.sitecore-article-card-root {
  cursor: pointer;
  box-sizing: border-box;
  box-shadow: 0 0 2px 2px var(--sdc-palette-grey-400);
  background: #fff;
  margin: var(--sdc-spacing-m);
  position: relative;
  transition: 0.15s all ease;
  width: 250px;
}

.sitecore-article-card-root:focus-within {
  box-shadow: 0 0 8px 3px rgb(0 0 0 / 15%);
  transform: scale(1.025);
  opacity: 1;
  transition: 0.35s all ease;
}

.sitecore-article-card-root:hover {
  box-shadow: 0 0 8px 3px rgb(0 0 0 / 15%);
  transform: scale(1.025);
  opacity: 1;
  transition: 0.35s all ease;
}

/* ArticleCardContent */
.sitecore-article-card-content {
  padding: var(--sdc-spacing-m);
}

/* ArticleCardLink */
.sitecore-article-card-link {
  color: var(--sdc-palette-text-primary);
  font-size: var(--sdc-typography-fontSize3-fontSize);
  text-decoration: none;
}

.sitecore-article-card-link:hover {
  text-decoration: none;
}

.sitecore-article-card-link:focus {
  text-decoration: none;
}

.sitecore-article-card-link::after {
  position: absolute;
  inset: 0;
  display: block;
  content: ' ';
}

/* ArticleCardImage */
.sitecore-article-card-image {
  width: 100%;
}

/* ArticleCardImageWrapper */
.sitecore-article-card-image-wrapper {
  position: relative;
  height: 120px;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

/* ArticleCardTitle */
.sitecore-article-card-title {
  color: var(--sdc-palette-text-primary);
  font-family: var(--sdc-typography-fontFamilySystem);
  font-size: var(--sdc-typography-h3-fontSize);
  font-weight: var(--sdc-typography-h3-fontWeight);
  line-height: var(--sdc-typography-h3-lineHeight);
  margin: 0 0 var(--sdc-spacing-m);
}

/* ArticleCardSubtitle */
.sitecore-article-card-subtitle {
  color: var(--sdc-palette-text-secondary);
  font-family: var(--sdc-typography-fontFamilySystem);
  font-size: var(--sdc-typography-fontSize3-fontSize);
  font-weight: var(--sdc-typography-fontSize3-fontWeight);
  line-height: var(--sdc-typography-fontSize3-lineHeight);
  margin: 0 0 var(--sdc-spacing-m);
}

/* Title */
.sitecore-title {
  color: var(--sdc-palette-primary-main);
  font-family: var(--sdc-typography-fontFamilySystem);
  font-size: var(--sdc-typography-h3-fontSize);
}

/* Grid */
.sitecore-grid {
  display: flex;
  flex-flow: row wrap;
}

/* LoaderContainer */
.sitecore-loader-container {
  align-items: center;
  display: flex;
  min-height: 50vh;
}

/* RecommendationContainer */
.sitecore-recommendation-container {
  max-width: 1280px;
  margin: 0 auto;
}

/* LoaderAnimation */
.sitecore-loader-animation {
  animation: rotate-animation 2s linear infinite;
  display: block;
  fill: var(--sdc-palette-primary-main);
  height: 50px;
  margin: auto;
  width: 50px;
}

オプション

表示するアイテム

itemsToDisplayこのコンポーネントに表示されるアイテムの最大数を設定します。

デフォルト: 6

<RecommendationCarousel
	rfkId="rfkid_2"
 	title="Latest news"
 	itemsToDisplay={12}
/>

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

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

コンポーネントの生成または作成

プレーンコンポーネント

TS CLI

TSマニュアル

JS CLIの

JSマニュアル

スタイル付きコンポーネント

TS CLI

TSマニュアル

JS CLIの

JSマニュアル

CSSスタイル コンポーネント

TS CLI

TSマニュアル

JS CLIの

JSマニュアル

CSSモジュール スタイル コンポーネント

TS CLI

TSマニュアル

JS CLIの

JSマニュアル

オプション

表示するアイテム

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

CSSスタイルコンポーネント

CSSモジュールスタイルコンポーネント