無料ギフト セレクション レンダリングのカスタマイズ

概要

コードを変更することでカスタマイズできる無料ギフトレンダリング Scriban テンプレートの概要。

無料ギフト セレクション レンダリングには、Scriban テンプレートの形式のレンダリング バリアントが含まれています。無料ギフト セレクション レンダリングには独自のデフォルトのレンダリング バリアント ルートとデフォルトのレンダリング バリアント (/sitecore/Content/<tenant>/<site>/Presentation/Rendering Variants/Free Gift Selection) があり、マークアップを生成するための Scriban テンプレートと、CD への AJAX 呼び出しを使用して、[ギフトを取得] ボタンがクリックされたときにカートに追加イベントをトリガーします。無料ギフトは API を使用してカート品目に追加され、IsFreeGift プロパティが true に設定されます。

Scriban テンプレートを変更することはできますが、この場合、ソフトウェアのアップグレード時にカスタマイズがオーバーライドされないように、新しいカスタム レンダリング バリアントを作成することをお勧めします。レンダリングのラベルを変更することもできます。

次のコードは、デフォルトのレンダリング バリアント内で定義された無料ギフト セレクション レンダリングの Scriban テンプレートを示しています。買い物客が無料ギフトを選択できる販売可能なアイテムのリストは、埋め込まれたアイテム o_model を使用して Scriban テンプレートに渡されます。

{{ # The hidden <div> element contains serialized data in JSON format. }}
<div class="freegiftselection-data" style="display: none;">
    {{ sc_xc_serialize o_model.free_gift_selections | html.escape }}
</div>

{{ ## The hidden <div> element contains texts related to the component.
      These values are populated from data model and datasource. ## }}
<div class="freegiftselection-messages" style="display: none;">
    <span data-type="heading-text">{{ sc_raw i_datasource 'Heading Text' | html.escape }}</span>
    <span data-type="no-selection-message">{{ sc_raw i_datasource 'No Selection Message' | html.escape }}</span>
    <span data-type="exceed-max-count-message">{{ sc_raw i_datasource 'Exceed Maximum Count Message' | html.escape }}</span>
    <span data-type="error-claim-message">{{ sc_raw i_datasource 'Error Claim Message' | html.escape }}</span>
    <span data-type="invalid-variant-message">{{ sc_raw i_datasource 'Invalid Variant Message' | html.escape }}</span>
</div>

{{ # The <div> element shows a list of multiple free gift selections based on various qualifications. }}
<div data-bind="visible: isVisible, foreach: freeGiftSelectionGroups" style="display: none;">
    <div class="freegiftselection-group" data-bind="css: { 'no-selection-item': !hasSelectionItem() }">

        {{ ## The <div> element displays the selected free gift that has been chosen and the maximum number
              of free gifts that a shopper can choose from the free gift selection. ## }}
        <div class="freegiftselection-header">
            <span class="freegiftselection-header-title" data-bind="text: headingText"></span>
            <div class="freegiftselection-header-claimed-text" data-bind="visible: hasClaimedItem()">
                <span class="freegiftselection-header-selectedtext">
                    <span>{{ sc_field i_datasource 'Free Gift Chosen Text' }}</span>
                    <span data-bind="text: claimedItemName"></span>
                </span>
                <span class="freegiftselection-header-changeselectiontext">{{ sc_field i_datasource 'Free Gift Selection Text' }}</span>
            </div>
        </div>

        {{ # The <div> element contains a checkbox, product image, display name, description, stock status, variant combinations for each free gift. }}
        <div class="freegiftselection-body" data-bind="foreach: selectionItems">

            {{ # The <div> element displays each item as free gift selection in the list populated from data model. }}
            <div class="freegiftselection-item">

                {{ # The <div> element shows whether a free gift is already included in the free gift selection. }}
                <div class=" freegiftselection-checkbox">
                    <input type="checkbox" data-bind="checked: isSelected, disable: isClaimed || isNotClaimable" />
                </div>
                {{ # The <div> element display product image. }}
                <div class="freegiftselection-image">
                    <a data-bind="attr: { href: productLink }">
                        <img data-bind="attr: { src: displayImage }" />
                    </a>
                </div>
                {{ # The <div> element displays product display name, description, valid variant combinations. }}
                <div class="freegiftselection-info">
                    <a data-bind="attr: { href: productLink }">
                        <h5 class="freegiftselection-info-displayname" data-bind="text: displayName"></h5>
                    </a>
                    <span class="freegiftselection-info-description" data-bind="text: productDescription"></span>
                    <div data-bind="visible: hasOnlyOneVariantCombination(), foreach: variantSelections">

                        {{ # The <div> element displays the variant combination when there is only one valid variant combination. }}
                        <div class="variant-information">
                            {{ # The <span> element displays the variant name. }}
                            <span class="variant-property-name" data-bind="text: propertyName"></span><span>:</span>
                            {{ # The <span> element displays the variant value. }}
                            <span class="variant-value" data-bind="text: firstOptionDisplayValue()"></span>
                        </div>

                    </div>
                </div>
                {{ # The <div> element contains the selections for variant properties. }}
                <div class="freegiftselection-variant">

                    <div data-bind="visible: hasMultipleVariantCombinations(), foreach: variantSelections">

                        <div class="variant-selection-group">
                            {{ # The <label> element contains the display name of the variant. }}
                            <label class="variant-property-name" data-bind="text: propertyName"></label>
                            <select class="variant-selection-selector" data-bind="value: currentSelection, options: options, optionsText: 'propertyDisplayValue', optionsValue: 'propertyValue', event: { change: onSelectionChange }"></select>
                        </div>

                    </div>
                </div>
                {{ # The <div> element displays stock status of the free gift. }}
                <div class="freegiftselection-stockstatus" data-bind="text: stockStatusName"></div>
                {{ # The <div> element displays the sale and list prices of the free gift. }}
                <div class="freegiftselection-total">
                    <span class="freegiftselection-sellprice" data-bind="text: sellPriceWithCurrency"></span>
                    <span class="freegiftselection-listprice" data-bind="text: listPriceWithCurrency"></span>
                </div>
            </div>

        </div>
        {{ # The <div> element contains the button to claim the free gift. The text of the button is populated from the datasource. }}
        <div class="freegiftselection-buttons">
            <span class="error-message" data-bind="text: errorMessage"></span>
            <button type="submit" class="claim-gift-btn" data-bind="click: claimSelectedFreeGiftItems, enable: isValidToClaim ">
                {{ sc_field i_datasource 'Button Text' }}
            </button>
        </div>
    </div>
</div>

無料ギフト セレクションの Scriban テンプレートでは、次の図に示すように、埋め込まれたアイテム o_model を通じて、FreeGiftSelectionRenderingModel モデルに含まれているプロパティとオブジェクトにアクセスします。

無料ギフト セレクション レンダリング モデルの図

次のシーケンス図は、買い物客が無料ギフトを選択して請求したときに行われる呼び出しの概要を示しています。最新のカートの詳細を取得するために 1 回の呼び出しのみが使用されるため、買い物客が変更を加えるたびに、無料ギフト セレクション レンダリングが自動的に更新されます。

無料ギフト セレクションのシーケンス図