コンポーネント内で動的プレースホルダーを使う
このページの翻訳はAIによって自動的に行われました。可能な限り正確な翻訳を心掛けていますが、原文と異なる表現や解釈が含まれる場合があります。正確で公式な情報については、必ず英語の原文をご参照ください。
動的プレースホルダーを使って、ページ上の各コンポーネントごとにユニークなプレースホルダーキーを生成することができます。場合によっては、単一のコンポーネント内に複数のプレースホルダーキーが生成されることもあります。例えば、Column Splitterコンポーネントにカラムを追加する場合などです。
このウォークスルーでは、動的プレースホルダーを使用するようにコンポーネントを設定する方法について説明します:
- コンポーネントにIsRenderingsWithDynamicPlaceholdersプロパティを追加してください
- IDynamicPlaceholderのベーステンプレートをレンダリングパラメータテンプレートに追加してください
- ワイルドカードを使ってプレースホルダーキーを定義します
- プレースホルダー設定項目をコンポーネントにリンクしてください
- プレースホルダー設定項目をコンポーネントにリンクします:::
コンポーネントにIsRenderingsWithDynamicPlaceholdersプロパティを追加します
動的なプレースホルダーやその中のコンポーネントの解決を可能にするために、コンポーネントにIsRenderingsWithDynamicPlaceholdersプロパティを追加してください。
コンポーネントにIsRenderingsWithDynamicPlaceholdersプロパティを追加するには:
-
コンテンツツリーで /sitecore/Layout/Renderings/Feature/Headless Experience Acceleratorに移動し、興味のあるコンポーネントをクリックしてください。
-
「その他のプロパティ」フィールドでIsRenderingsWithDynamicPlaceholdersプロパティを入力し、その値をtrueに設定します。
-
変更を保存してください。
IDynamicPlaceholderベーステンプレートをレンダリングパラメータテンプレートに追加します
IDynamicPlaceholderベーステンプレートをコンポーネントのレンダリングパラメータテンプレートに追加すると、DynamicPlaceholderIDという新しいパラメータが付与されます。このパラメータはプレースホルダーキーに動的にIDを割り当てます。
IDynamicPlaceholderベーステンプレートを追加するには:
-
コンテンツツリーでRendering Parametersフォルダに移動し、レンダリングパラメータテンプレートを選択します。
!注フォルダの場所はインスタンスによって異なる場合がありますが、通常は /sitecore/Templates/Featureで見つかります。
-
コンテンツタブで*/Templates/Foundation/Experience Accelerator/Dynamic Placeholders/Rendering Parameters*に移動します。
-
IDynamicPlaceholderアイテムをダブルクリックして「選択済み」セクションに移動します。以下のスクリーンショットは、組み込みのコンテナコンポーネントのレンダリングパラメータテンプレートを示しています。
ワイルドカードを使ってプレースホルダーキーを定義します
プレースホルダーキーの定義の一部としてワイルドカードを使います。その結果、そのコンポーネントのインスタンスがプレースホルダーに追加されるたびに、DynamicPlaceholderIDパラメータは一意なIDを生成し、例えばmyrendering-1、myrendering-2など、プレースホルダーキーの値に使われたワイルドカードを動的に置き換えます。
プレースホルダーキーの定義:
-
コンテンツツリーで、動的プレースホルダーを有効にしたいコンポーネントのプレースホルダー設定項目に移動します。コンポーネントがどこに保存されているかによって、設定項目は以下のいずれかの場所にあるかもしれません。
-
/sitecore/Layout/Placeholder Settings/Feature.
-
/sitecore/Layout/Placeholder Settings/Project.
!注設定項目がまだ存在しない場合は、作成し、コンポーネントの名前に従って名前を付けてください。
-
-
設定項目をクリックし、プレースホルダーキー 欄に、TSXファイルで定義されたコンポーネント名の後に -{*}(例: myrendering-{*})を入力します。
-
変更を保存してください。
プレースホルダー設定項目をコンポーネントにリンクしてください
プレースホルダー内のコンポーネントをレンダリングするには、レイアウトサービスを通じてプレースホルダー設定の項目をコンポーネントとリンクしてください。
プレースホルダー設定項目をコンポーネントにリンクするには:
-
コンテンツツリーでsitecore/Layout/Renderings/Featureに移動し、コンポーネントが入っているフォルダを開き、そのコンポーネントをクリックします。
-
レイアウト サービスのプレースホルダー 欄で、以前設定したプレースホルダー設定の項目に移動します。
-
プレースホルダー設定項目をダブルクリックして 「選択 済み」ペインに追加してください。
コンポーネントTSXファイルでプレースホルダーキーを定義します
コンポーネントTSXファイルでプレースホルダーコンポーネントを定義する際、プレースホルダーキー フィールドの名前をphKey定数に渡す必要があります。ワイルドカードの代わりに、レンダリングパラメータの動的プレースホルダー IDを使う必要があります。
コード例:
const phKey = `myrendering-${props.params.DynamicPlaceholderId}`;