カスタムコンポーネントの練習としてよくあるカルーセルの作成、今回は XM Cloud のコンポーネントにする手続きを元に作ってみたいと思います。作業量はあまりありませんが、説明が長くなるので分けて紹介をします。今回は前編です。

カルーセルのサンプルコードの準備

今回はカルーセルを一から作るのではなく、汎用のパッケージを利用してまずは Next.js で動かすことにしました。利用したパッケージはこちらです。

• react-responsive-carousel

これを Next.js で動くようにしたサンプルが以下の通りです。

• Carousel サンプル

ソースコードはここで公開しています。

• https://github.com/haramizu/Nextjs-Components/tree/main/src/app/Carousel

コンポーネントの作成

実際にコンポーネントの作成を進めていきます。まずは以下の記事を参考にしながら、Carousel のコンポーネントに必要なアイテムをウィザードで作成していきます。コンポーネント名は Carousel で作成します。

• Headless SXA - コンポーネントウィザードを利用する

今回のコンポーネントは複数のアイテムを利用して表示する形で作成します。このため、前回紹介をした Rendering Contents Resolver としては Datasource Item Children Resolver を利用します。

続いてこのコンポーネントで利用するコードを準備します。

jss scaffold Carousel

これで Carousel.tsx ファイルが準備できました。このコンポーネントを利用できるようにサイトの Presentation - Available Renderings に対してレンダリングを追加します。

コンポーネントが利用できるようになりました。

テンプレートを作成する

カルーセルのアイテムを持つ構造を決めていきます。カルーセルでは複数のスライドを持ち、そのデータを利用する形を想定しているため、カルーセル自体にはデータは持たないようにします。必要となる項目は、画像、タイトル、リンク先のこの３つを想定していきます。そこで、CarouselSlide というテンプレートを以下のように作成します。

これで２つのテンプレートを組み合わせて、Carousel アイテムの下に Carousel Item が３つ並ぶアイテムを作成します。スライドにはダミーのデータを入れておきます。

コンポーネントを Experience Editor で配置して、今回作成をしたデータソースを指定するようにします。

これで Sitecore 側の準備が整いました。続いて、コードの方を触っていきます。

スライドのデータを取得する

データソースを指定している状態で、子アイテムのデータを取得する方法は前回の記事で紹介をしました。

• Rendering Contents Resolvers の動作確認

前回はテキストフィールドのデータのみでしたが、画像やリンクの取得方法を確認していきましょう。まずはタイトルのみを取得して表示できるか確認をします。

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

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

interface CarouselProps {
  fields: {
    items: SlideFields[];
  };
  params: ComponentParams;
}

export const Default = (props: CarouselProps): 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>
  );
};

アイテムのタイトルを取得できているのがわかります。

実際に必要となるデータは画像やリンクなどになります。これらに対応するために項目を増やしていきます。まずは SlideFields を以下のように更新します。

interface SlideFields {
  displayName: string;
  fields: {
    Title: TextField;
    Image: ImageField;
    Link: LinkField;
  };
}

上記の ImageFields および LinkField に関しては、import をしておく必要があります。今回は以下のようになっています。

import {
  ComponentParams,
  ImageField,
  LinkField,
  TextField,
} from '@sitecore-jss/sitecore-jss-nextjs';

続いて取得したデータを変更するために、表示しているコードを以下のように変更します。

        <ul>
          {props.fields.items.map((item, index) => (
            <li key={index}>
              {item.fields.Title.value} - {item.fields.Image.value?.src} -
              {item.fields.Link.value?.href}
            </li>
          ))}
        </ul>

これで準備が完了となります。実際の結果は以下のように子アイテムからデータを取得することができました。

まとめ

今回はカルーセルを作るにあたって、初期のコンポーネントを準備、テンプレートの準備、そして最後にそのデータを取得できるところまで進めました。次回はこれをもう少し踏み込んで、カルーセルとして動くところまで進めていきます。