レンダリングをコピーしてカスタマイズする

概要

スキャフォールディングでカスタム レンダリングを追加する方法について説明します。

SXA では、クローン スクリプトを使用して SXA レンダリングのコピーをすばやく作成できます。レンダリングのクローンを作成することにより、レンダリング定義アイテム、レンダリング パラメーター テンプレート、データソース テンプレート、およびブランチの正確なコピーを作成できます。既存のレンダリングをコピーし、別の名前とスタイルを設定します。これは、たとえば、すべて異なるスタイルの多くのプロモ レンダリングが必要な場合に便利です。

標準の SXA ツールボックス セクションは SXA の更新により上書きされるため、 派生レンダリング用に独自のツールボックス セクションを作成することをお勧めします。これは、SXA に新しいモジュールを追加することで実行できます。

新規モジュールの追加

新規モジュールを追加するには:

  1. /sitecore/システム/設定 に移動し、[機能] または [Foundation] を右クリックし、新しいフォルダーを挿入します。

  2. 新しいフォルダーを右クリックし、[挿入] をクリックして [モジュール] をクリックします。

  3. 名前を入力し、新しいフォルダーの下にモジュールをグループ化します。

レンダリングをコピーしてカスタマイズする

レンダリングをコピーしてカスタマイズするには:

  1. 使用するレンダリングを複製するには、/sitecore/レイアウト/Renderings/ に移動して、クローンするレンダリングを右クリックします。

  2. [スクリプト] をクリックして [クローン レンダリング] をクリックします。

  3. [派生レンダリングを作成] ダイアログ ボックスの次のフィールドに入力します。

タブ

フィールド

説明

全般

新しいレンダリング名

新しいレンダリングの名前を入力します。

モジュールに追加

新しいレンダリングが属するモジュールを選択します。標準の SXA ツールボックス セクションは SXA の更新によって上書きされるため、派生レンダリング用に独自のモジュールを追加することをお勧めします。

CSS クラスのレンダリング

レンダリングの CSS クラスを入力します。

パラメーター

レンダリング パラメーター

レンダリング パラメーターのコピー モードを選択します。

  • [既存のレンダリング パラメーターから継承]– 新しいアイテムを作成し、__Base template ソース レンダリング パラメーター テンプレートを指すように設定します。

  • [元のレンダリング パラメーターのコピーを作成]– ソース レンダリング パラメーターのコピーを新しい場所に作成します。これにより、パラメーターを拡張、削除、または並べ替えることができます。

データソース

データソース

データソースのコピー モードを選択します。

  • [既存のデータ ソースから継承] – 新しいアイテムを作成し、そのアイテムが __Base template ソース データソース テンプレートを指すよう設定します。レンダリングのスタイルを変更する場合のみ、このオプションを選択します。

  • [元のデータソースのコピーを作成] – ソース データソース テンプレートのコピーを新しい場所に作成します。標準データ アイテムを追加フィールドで拡張する場合は、このオプションを選択します。たとえば、画像フィールドを背景として使用する場合です。

ビュー

ビュー

ビューのコピー モードを選択します。

  • [元の MVC ビュー ファイルを使用] – 事前入力された [レンダリング ビューへのパス] フィールドからのビューを使用します。[ビュー] フィールドが指定されていない場合、StandardController は、アイテム名のレンダリングに基づいてビューを解決しようとします。スタイルのみを変更する場合は、このオプションを選択します。

  • [MVC ビューファイルをコピー (パスを以下に指定)] – [レンダリング ビューへのパス] フィールドに指定された場所にソース ビューをコピーします。既存のマークアップを拡張または変更する場合は、このオプションを選択します。

  • [既存の MVC ビュー ファイルを選択 (以下にパスを指定)] – [レンダリング ビューへのパス] フィールドに指定されたビューを使用しますが、コピーは作成しません。

レンダリング ビューへのパス

ビューの場所を入力します。次に例を示します。

レンダリング ビューのパスへの例。

これで、サイトのツールボックスに表示されるレンダリングを追加できるようになります。

ツールボックスにレンダリングを追加する

ツールボックスにレンダリングを追加するには:

  1. サイトのプレゼンテーション フォルダーに移動して、[有効なレンダリング] を右クリックします。

  2. [挿入] をクリックし、[有効なレンダリング] をクリックします。

  3. 追加するレンダリングのセクション名を入力して [OK] をクリックします。

  4. 作成した新しいセクションをクリックし、[データ] セクションの [編集] をクリックします。

  5. [アイテムを選択] ダイアログ ボックスの [レンダリング] フォルダーで、関連するレンダリングをクリックし、右矢印をクリックして選択したアイテムのリストに移動します。[OK] をクリックします。

    [アイテムを選択] ダイアログ ボックス

    新しいレンダリングをエクスペリエンス エディターで使用できるようになりました。

    EE で利用できるようになった、特別プロモーション コンポーネント。