製品バンドルの構造

Version:

日本語翻訳に関する免責事項

このページの翻訳はAIによって自動的に行われました。可能な限り正確な翻訳を心掛けていますが、原文と異なる表現や解釈が含まれる場合があります。正確で公式な情報については、必ず英語の原文をご参照ください。

Product Bundleレンダリングは、Bundle HeaderコンポーネントとBundle Groups Containerコンポーネントで構成されます。これはSXAレンダリングバリアントに基づいており、ModelReferenceコンポーネントで拡張されています。

次の図は、製品バンドルコンポーネントのHTML構造の概要を示しています。

Content EditorでProduct Bundleコンポーネントを操作するには、sitecore/Content/<tenant>/<site>/Presentation/Rendering Variants/Product Bundlesに移動します。

既存のCSSクラスを再利用しない限り、新しいフィールドレンダラーアイテムをProduct Bundleレンダリングバリアント階層に追加でき、親子関係を壊さない限り、階層内のアイテムを移動できます。

メモ

NVelocityテンプレートは、Product Bundle定義では使用されません。

バンドルヘッダーコンポーネント

バンドルヘッダーコンポーネントには、商品バンドルのラベルと、商品バンドルに関連する情報が含まれています。JavaScriptコンポーネントの初期化中に、関連付けられたデータ属性が格納され、必要に応じて使用されます。

アイテム	形容	種類	CSSクラス
バンドルヘッダー	このセクションには、製品バンドルのラベルと、次のデータ属性が含まれています。データカタログ名データバンドルID データバンドルリスト価格データバンドル調整価格データバンドルは販売中ですデータバンドル-節約率データバンドルエラーメッセージ	バリアントセクション	バンドルヘッダー

バンドルグループコンテナコンポーネント

バンドルグループコンテナコンポーネントは、すべてのバンドル品目のコンテナです。

アイテム	形容	種類	CSSクラス
バンドルグループコンテナ	バンドル品目のコンテナ。	バリアントセクション	バンドルグループコンテナ
バンドルグループ参照	Pass Through Fieldフィールド(LineItems)を反復処理して、マークアップ内にバンドル品目の詳細を入力するモデル参照。	モデルリファレンス
バンドルグループ	このセクションには、1つのバンドル明細と次のデータ属性が含まれています。 data-bundle-line-item id (データバンドル行項目ID) データバンドル行項目名データバンドル行品目数量 data-bind (バンドル行アイテムにバリアントが関連付けられているかどうかを示すKnockoutJSバインディング。明細項目にバリアントがない場合は、この要素にクラスが追加されます。	バリアントセクション	バンドルグループ
バンドルグループヘッダーコンテナ	このセクションは、バンドル広告申込情報の詳細(名前や選択したバリアントなど)のコンテナです。また、バンドルグループ本文コンテナを非表示および表示するためのハンドラも含まれています。これには、次のデータ属性が含まれています。 data-bind (バリアントドロップダウン選択セクションを切り替えるKnockoutJSバインディング)。	バリアントセクション	バンドルグループヘッダーコンテナ
バンドルグループヘッダー	このセクションには、バンドル品目のラベルと、バンドルグループ本文コンテナを切り替えるための矢印ハンドラが含まれています。	バリアントセクション	バンドルグループヘッダー
選択したバリアントのプレビュー	このセクションには、選択したバリアントのラベルと、次のデータ属性が含まれます。 data-bind (選択したバリアントをレンダリングするKnockoutJSバインディング。	バリアントセクション	選択済みバリアントプレビュー
バンドルグループボディコンテナ	このセクションは、バリアントのドロップダウン選択とバンドル品目へのナビゲーションリンクのコンテナです。	バリアントセクション	バンドルグループボディコンテナ
グループバリアントセクション	このセクションには、バリアントのドロップダウン選択リストが含まれています。	バリアントセクション	グループバリアントセクション
製品バリエーション	Pass Through FieldVariantSelectionsを反復処理して、バリアントの組み合わせ情報をドロップダウン選択に入力するモデル参照。	モデルリファレンス
グループバリアント選択	このセクションには、バンドル明細で利用可能なバリアントの実際のドロップダウンリストが含まれています。	バリアントセクション	グループバリアント選択
Product Linkコンテナ	このセクションには、バンドル品目へのナビゲーションリンクが含まれています。	バリアントセクション	製品リンクコンテナ
バンドルバリアント	このセクションには、バンドル明細で利用可能なすべての有効なバリアントの組み合わせのメタデータが含まれています。バリアントの組み合わせは、JavaScriptコンポーネントの初期化中に一度だけ入力されます。 data-bind (親バンドルの行項目に関連付けられたバリアントがあるかどうかを示すKnockoutJSバインディング。使用可能なバリアントがない場合は、この要素にクラスが追加されます。	バリアントセクション	隠れた d-なしバンドルバリアントの組み合わせリスト
バンドルバリアントリファレンス	Pass Through Field (ValidProductVariants) を反復処理して有効なバリアントの組み合わせを生成するモデル参照。	モデルリファレンス
バンドルバリアントデータ	このセクションには、1つの有効なバリアントの組み合わせが含まれており、次のデータ属性があります。 data-variant-id (バリアントの組み合わせID)	バリアントセクション	バンドルバリアントの組み合わせ
バンドルバリアント値の参照	Pass Through Field (Variants) を反復処理して有効なバリアントを生成するモデル参照。	モデルリファレンス
バンドルバリアント値	このセクションには、有効なバリアントのバリアントキーと値が含まれ、次のデータ属性があります。データバリアントキーデータバリアント値	バリアントセクション	バンドルバリアントの組み合わせ値

大事な

表にリストされている項目は、クラス名を介してJavaScriptコンポーネントによって参照されます。したがって、既存のクラス名を変更することは避ける必要があります。ただし、新しい要素名またはクラス名を追加することはできます。

この記事を改善するための提案がある場合は、お知らせください!