プロダクトバンドルレンダリングのカスタマイズ

デフォルトの製品バンドルレンダリングには 、Scribanテンプレートという形のレンダリングバリアントが含まれています。デフォルトのProduct Bundleレンダリングは、静的バンドルと動的 バンドルの両方を扱います。元のレンダリングバリアントに含まれていたすべてのネストされたアイテムは、単一のScribanテンプレートに統合されます。Scribanテンプレートを修正することもできますが、ソフトウェアのアップグレード時にカスタマイズが上書きされないように、新しいカスタムレンダリングバリアントを作成するのが最善です。例えば カスタムラベルを追加するなどテンプレートを簡単に変更できるため、Scribanテンプレートは非常にカスタマイズ性と拡張性が高いです。レンダリング時の ラベルも変更 可能です。

!注Product Bundleの廃止レンダリングは既存サイトでのみ利用可能で、レンダリングバリアントのScribanテンプレートではなくMVCビューに基づいています。

Product Bundleレンダリングバリアントは独自のデフォルトレンダリングバリアントルート とデフォルトレンダリングバリアント (/sitecore/Content///Presentation/Rendering Variants/Product Bundle)を持っています。マークアップ生成にはScribanテンプレート、AJAXリクエストとして株価情報の取得にはScribanテンプレート、JavaScriptはAJAXリクエストとして取得し、ラベル翻訳にはSXA辞書を使用します。

以下のコードは、デフォルトのレンダリングバリアント内で定義されたProduct BundleレンダリングScribanテンプレートを示しています。カタログ名とバンドルIDはMVCコントローラーに渡され、対応するバンドルリポジトリを使ってモデルを埋める責任があります。モデルはビューに渡され、レンダリングバリアントや埋め込みアイテムo_model(the-embedded-commerce-items-and-objects-for-scriban-templates.md "The embedded Commerce items and objects for Scriban templates")を用いるScribanテンプレートで利用可能です。モデルは、オプションのバンドルアイテムやアップグレード可能なアイテムを含む、製品バンドルをレンダリングするために必要なすべてのオブジェクトと値を公開します。

{{ # The

element contains the bundle data attributes with the values populated from the data model and data source. }}

{{ # The

element displays the bundle title text retrieved from the data source. }}

{{ i\_datasource.TitleText }}

{{ # The

element contains all the bundle line items. }}

{{ # Iterate through each bundle line item. }} {{ for bundleLineItem in o\_model.line\_items }} {{ ## The

element contains the bundle data attributes with the values populated from the bundle line item. The 'noPanel' CSS class will be applied if the 'hasPanel' computed property in the view model returns false. ## }} {{ # The

element contains all the header elements. }}

{{ # The

element has a binding with the click event to show or hide its content. }}

{{ ## The element displays the bundle line item summary in this format: Example: Habitat Dwell Digital Wifi Scale (Black) - 2 pcs ## }} {{ ## The element displays the display name of the bundle line item. It has a text binding with the bundleLineItemName observable to ensure the value is updated in the case when an upgrade item is selected. ## }} {{ bundleLineItem.display\_name }} {{ # The element displays the separator. }} - {{ ## The element displays the quantity of the bundle line item. It has a text binding with the bundleLineItemQuantity observable to ensure the value is updated in the case when an upgrade item is selected. ## }} {{ bundleLineItem.quantity }} {{ # The element displays the unit of measurement retrieved from the data source. }} {{ i\_datasource.UnitOfMeasurement }} {{ # The setArrowClass computed property in the view model determines whether to display the accordion toggle button. }} {{ ## The element is a link to the product page of the bundle line item. Link text is retrieved from the data source. It has a href attribute binding with the bundleLineItemLink observable to ensure the value is updated in the case when an upgrade item is selected. ## }} {{ i\_datasource.ViewProductText }}

{{ ## The

element has a visible binding with the bundle line item 'is\_optional' flag. Hence, it will only be displayed if the flag is true. ## }}

{{ ## The element is a checkbox with a checked binding to indicate whether the bundle line item is included in the bundle or not. The element is disabled if the computed property 'isCheckboxDisabled' returns true. ## }} {{ # The element is the checkbox label text that is retrieved from the data source. }} {{ i\_datasource.IncludeItemText }}

{{ ## The

element contain all elements to display and modify the bundle line item quantity. It has a visible binding with the 'is\_dynamic\_bundle' flag in the model. Hence, it will only be displayed if the flag is true. ## }}

{{ # The element is the quantity label text that is retrieved from the data source. }} {{ i\_datasource.QuantityLabel }} {{ ## The

element contains the input field and buttons to set the quantity. }}

{{ ## The element is used to decrease the bundle line item quantity by one (1) unit. Whenever the button is clicked, the click binding will invoke the 'decreaseBundleItemQuantity' function. The button is enabled if the computed property 'isQuantityEnabled' returns true. ## }} {{ ## The element is a field to enter the desired quantity for the bundle line item. Whenever the input value is changed, the event binding will invoke the 'updateBundleItemQuantity' function. The input is enabled if the computed property 'isQuantityEnabled' returns true. ## }} {{ ## The element is used to increase the bundle line item quantity by one (1) unit. Whenever the button is clicked, the click binding will invoke the 'increaseBundleItemQuantity' function. The button is enabled if the computed property 'isQuantityEnabled' returns true. ## }}

{{ ## The element contains the validation message which is displayed when the bundleLineItemQuantity is invalid. }}

{{ ## The

element displays information on the selected variants for the bundle line item. It has a foreach binding to iterate through the selected variants and is only visible if the bundle line item has selected variants. ## }}

{{ ## The

element groups together the variant's key and value. }}

{{ # The elements displays the variant's key and value from the view model in this format: : }}

{{ # The

element contains all the body elements. }}

{{ # The

element contains the available upgrade items of the bundle line item. }}

{{ ## The

element contains the selection elements for the upgrade items. The element is visible if the bundle item is upgradable and disabled otherwise. ## }}

{{ # The element is the upgrade options label text that is retrieved from the data source. }} {{ i\_datasource.UpgradeOptionsLabel }} {{ ## The element contains all the viable upgrade items. Whenever the option is changed, the event binding will invoke the 'onUpgradeItemChanged' function. ## }} {{ ## Default element when no upgrade item is selected, which is the bundle line item itself. The element contains data attributes that is required to update the view model. The placeholder text is retrieved from the data source. ## }} {{ sc\_raw i\_datasource "UpgradeOptionsPlaceholder" }} {{ # Iterate through the upgradable items of the bundle item. }} {{ for upgradeItem in bundleLineItem.upgradable\_sellable\_item\_list }} {{ # Populate the display name of the upgrade item into the element. }} {{ upgradeItem.display\_name | html.escape }} {{ end }}

{{ # The

element contains the available variant selections of the bundle line item. }}

{{ # Iterate through each variant selection. }} {{ for variantselection in bundleLineItem.variant\_selections }}

{{ # The element contains the display name of the variant. }} {{ variantselection.display\_name }} {{ ## The element contains all the viable options for the variant selection. Whenever the option is changed, the event binding will invoke the 'onBundleItemChanged' function. The element is disabled if there is only one option and enabled otherwise. ## }} {{ # Iterate through the options of each variant selection. }} {{ for option in variantselection.options }} {{ # Populate the option value into the element. }} {{ option.value }} {{ end }}

{{ end }}

{{ # Iterate through each upgrade item of the bundle line item. }} {{ for upgradeItem in bundleLineItem.upgradable\_sellable\_item\_list }}

{{ # Iterate through each upgrade item variant selection. }} {{ for variantselection in upgradeItem.variant\_selections }}

{{ # The element contains the display name of the variant. }} {{ variantselection.display\_name }} {{ # The element contains all the viable options for the variant selection. }} {{ # Iterate through the options of each variant selection. }} {{ for option in variantselection.options }} {{ # Populate the option value into the element. }} {{ option.value }} {{ end }}

{{ end }}

{{ end }}

{{ ## The element is a link to the product page of the bundle line item. Link text is retrieved from the data source. It has a href attribute binding with the bundleLineItemLink observable to ensure the value is updated in the case when an upgrade item is selected. ## }} {{ i\_datasource.ViewProductText }}

{{ # The

element contains the combination of variants that are valid. }}

{{ # Iterate through the valid product variants. }} {{ for validProductVariant in bundleLineItem.valid\_product\_variants }} {{ # The

element has data attributes to store the product ID and variant ID. }}
{{ # Iterate through the variants of the valid product variants. }} {{ for variant in validProductVariant.variant\_properties }} {{ # The
• element has data attributes to store the variant key and value. }}
{{ end }}
{{ end }}

{{ # Iterate through each upgrade item of the bundle line item. }} {{ for upgradeItem in bundleLineItem.upgradable\_sellable\_item\_list }}

{{ # Iterate through the valid product variants. }} {{ for validProductVariant in upgradeItem.valid\_product\_variants }} {{ # The

element has data attributes to store the product ID and variant ID. }}
{{ # Iterate through the variants of the valid product variants. }} {{ for variant in validProductVariant.variant\_properties }} {{ # The
• element has data attributes to store the variant key and value. }}
{{ end }}
{{ end }}

{{ end }} {{ end }}

プロダクトバンドルレンダリングモデル

Product Bundle Scribanテンプレートでは、以下の図に示すように埋め込まれたアイテムo_modelを通じて、ProductBundleRenderingModelモデルに含まれるプロパティやオブジェクトにアクセスできます。