無料ギフト選択レンダリングのカスタマイズ

Version:

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

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

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

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

次のコードは、デフォルトのレンダリングバリアント内で定義されたFree Gift Selectionレンダリングの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>

Free Gift Selectionレンダリングモデル

Free Gift SelectionのScribanテンプレートでは、次の図に示すように、埋め込みアイテムo_modelを使用してFreeGiftSelectionRenderingModelモデルに含まれるプロパティとオブジェクトにアクセスします。

Diagram of the Free Gift Selection rendering model

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

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

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

無料ギフト選択レンダリングのカスタマイズ

Free Gift Selectionレンダリング モデル

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

Free Gift Selectionレンダリングモデル