XM Cloud のコンポーネントウィザードの設定 - その５ Component variants : Haramizu.com

Language:

XM Cloud のコンポーネントウィザードの設定 - その５ Component variants

XM Cloud Headless SXA

公開日: 2024-10-09

Sitecore Headless SXA ではコンポーネントのレンダリングに関して、Variants を利用して切り替えることができます。今回は、コンポーネントを作成する際のベーステンプレートに関して調べていきます。

標準のコンポーネントの作成

今回は検証用として、まず標準的なコンポーネントとして以下の設定をしている Sample を作成します。

Datasource のタブでは、Datasouce の項目を Automatically create data source under page （ Data フォルダの下にアイテムを自動で作成する）および Rendering template を以下のように設定します。

また Behaviors に対しては、Dynamic placeholders を設定します。

これで CMS 側でのコンポーネントの準備ができました。続いて、このコンポーネントで利用するサンプルを作成します。Next.js アプリのルートパスで以下のコマンドを実行します。

PowerShell

jss scaffold Sample

サンプルで生成されたコードに対して、Test を追加します。

TypeScript

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

interface SampleProps {
  rendering: ComponentRendering & { params: ComponentParams };
  params: ComponentParams;
}

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

  return (
    <div className={`component ${props.params.styles}`} id={id ? id : undefined}>
      <div className="component-content">
        <p>Sample Component</p>
      </div>
    </div>
  );
};

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

  return (
    <div className={`component ${props.params.styles}`} id={id ? id : undefined}>
      <div className="component-content">
        <p>Sample Test Component</p>
      </div>
    </div>
  );
};

これで、コンポーネントを配置して標準では Default を指定する形として、 Smaple Component が表示され、Test を指定した場合は Sample Test Component が表示されるようになります。

Variants の作成

上記のコンポーネントに対しての Variants の設定を追加していきます。これはサイトの下にある Presentation - Headless Variants の下に、今回のコンポーネントの名前である Sample を、その下に Default と Test を用意します。

Experience Editor での動作確認

作成をしたコンポーネントを配置すると、Variant: の項目で Default と Test が表示されているのが分かります。

無事、Variant の項目が表示されていることを確認することができました。

Pages での動作確認

今度は Pages で上記の設定を確認します。Pages の場合はパラメーターを参照している形ですが、Variants の項目が無いため選択することができません。

今回作成をしたコンポーネントの Rendering Parameters を参照しにいくと、以下のようになっています。

例えば、Promo コンポーネントの Rendering Parameters を参照しに行くと以下のテンプレートを継承していることが分かります。

この Base Rendering Parameters に関しては、 /sitecore/templates/Foundation/JSS Experience Accelerator/Presentation/Rendering Parameters/BaseRenderingParameters で定義されており、Standard Value を確認しにいくと Variant の項目が含まれていることが分かります。