Rendering Contents Resolvers の動作確認

公開日 :

今回は Sitecore XM / XM Cloud で提供している便利な機能、Rendering Contents Resolvers について取り上げます。レンダリングの定義で複数の定義が用意されており、これを活用することで効率よくコンポーネントを作成することができます。

レイアウトサービスからデータを取得する

コンポーネントが Sitecore のアイテムからデータを取得する方法としては、以前パンくずリストの時に GraphQL を利用してデータを取得しました。

これ以外に用意されている方法として、組み込まれている Rendering Contents Resolver を利用する、もしくはカスタマイズしたものを組み込むことができます。カスタマイズに関しては、以下のページをご覧ください。

この設定は Rendering の定義の Layout Service の中に含まれています。

random desc

今回は組み込まれている Rendering Contents Resolver の動きとして子アイテムを利用するDatasource Item Children Resolver の動作を確認をしたいと思います。

サンプルのコンポーネントを作成する

検証をするためのベースのコンポーネントのコードを準備します。まず、テンプレートとしては heading および content （どちらも Single-Line Text ）を定義します。

random desc

続いて、テンプレートを利用してデータとしてアイテムを作成しておきます。

random desc

最後にこのコンポーネントのコードを以下のように設定します。

import React from 'react';
import { ComponentParams, Field, RichText } from '@sitecore-jss/sitecore-jss-nextjs';
import { ComponentProps } from 'lib/component-props';

interface ContentBlockFields {
  heading: Field<string>;
  content: Field<string>;
}

interface TestComponentProps extends ComponentProps {
  fields: ContentBlockFields;
  params: ComponentParams;
}

export const Default = (props: TestComponentProps): JSX.Element => {
  const id = props.params.RenderingIdentifier;

  return (
    <div className={`component ${props.params.styles}`} id={id ? id : undefined}>
      <div className="component-content">
        Heading - <RichText field={props.fields.heading} />
        Content - <RichText field={props.fields.content} />
      </div>
    </div>
  );
};

以下のようにサンプルが動くようになりました。

random desc

Datasource Item Children Resolver

これは指定したアイテムの下にあるアイテムからデータを取得することができる Resolver になります。実際にサンプルのコードを用意していきます。まずは、テストコンポーネントの Resolver を以下のように指定します。

random desc

続いてアイテムを用意していきます。今回は 3 つのアイテムを用意しました。

random desc

続いてコンポーネントのコードを書き換えていきます。以下のように一気に書き換えました。

import React from 'react';
import { ComponentParams, TextField } from '@sitecore-jss/sitecore-jss-nextjs';
import { ComponentProps } from 'lib/component-props';

interface PageItemFields {
  displayName: string;
  fields: {
    Title: TextField;
  };
}

interface TestComponentProps extends ComponentProps {
  fields: {
    items: PageItemFields[];
  };
  params: ComponentParams;
}

export const Default = (props: TestComponentProps): JSX.Element => {
  const id = props.params.RenderingIdentifier;

  return (
    <div className={`component ${props.params.styles}`} id={id ? id : undefined}>
      <div className="component-content">
        <ul>
          {props.fields.items.map((item, index) => (
            <li key={index}>{item.fields.Title.value}</li>
          ))}
        </ul>
      </div>
    </div>
  );
};

この変更で、以下のように子アイテムのタイトルを一覧で表示しています。

random desc

１つ追加すると、きちんと追加されていることを確認できます。

random desc

まとめ

子アイテムを利用してコンポーネントでレンダリングする方法を今回は確認しました。次回は、この仕組みを利用したコンポーネントを作成したいと思います。