---
title: "無料ギフトセレクションレンダリングのカスタマイズ"
slug: "customizing-the-free-gift-selection-rendering"
abstract: "コードを修正することでカスタマイズ可能なFree GiftレンダリングScribanテンプレートの概要。"
---
# 無料ギフトセレクションレンダリングのカスタマイズ

[Free Gift Selectレンダリング](https://doc.sitecore.com/xp/en/users/100/sitecore-experience-commerce/commerce-cart-renderings.html)には[、Scriban](https://doc.sitecore.com/xp/ja/developers/100/sitecore-experience-commerce/working-with-scriban-templates.html "Working with Scriban templates")テンプレートというレンダリングバリアントが含まれています。Free Gift Selectionレンダリングには独自のデフォルトの[レンダリングバリアントrootとデフォルトレンダリングバリアント](https://doc.sitecore.com/xp/en/users/93/sitecore-experience-commerce/en/using-rendering-variants-to-display-product-information.html)(*/sitecore/Content///Presentation/Rendering Variants/Free Gift Selection*)があり、Scribanテンプレートを使ってマークアップを生成し、**Claim**ギフトボタンをクリックするとAdd-to-cartイベントをトリガーするためにCDにAJAX呼びかけを行います。Free giftはAPIを使ってカートラインに追加され、IsFreeGiftプロパティはtrueに設定されています。

Scribanテンプレートを変更することもできますが、ソフトウェアのアップグレード時にカスタマイズが上書きされないように、新しいカスタムレンダリングバリアントを作成するのが最善です。レンダリングの [ラベルを変更する](https://doc.sitecore.com/xp/ja/developers/100/sitecore-experience-commerce/modify-a-label-for-a-rendering-that-uses-a-scriban-template.html "Modify a label for a rendering that uses a Scriban template") ことも可能です。

以下のコードは、デフォルトのレンダリングバリアント内で定義された無料ギフト選択レンダリングのScribanテンプレートを示しています。買い物客が無料ギフトを選べる販売可能なアイテムのリストは、埋め込まれたアイテムo\_model(the-embedded-commerce-items-and-objects-for-scriban-templates.md "The embedded Commerce items and objects for Scriban templates")を使って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(/xp/en/developers/sxa/100/sitecore-experience-accelerator/en/the-embedded-items-and-objects-in-the-scriban-context.html)を通じてFreeGiftSelectionRenderingModelモデルに含まれるプロパティやオブジェクトにアクセスできます。以下の図に示されています。

![Diagram of the Free Gift Selection rendering model](https://doc.sitecore.com/api/markdown-image/xp/ja/developers/100/sitecore-experience-commerce/images/FreeGiftSelectionModel.png)

## 無料ギフトセレクションのコールシーケンス

以下のシーケンス図は、買い物客が無料ギフトを選択し、請求した際にかけられる通話の概要を示しています。最新のカート情報を取得するために使われる通話は1回のみで、購入者が変更を加えるたびに無料ギフト選択レンダリングが自動的に更新されます。

![Free Gift Selection sequence diagram](https://doc.sitecore.com/api/markdown-image/xp/ja/developers/100/sitecore-experience-commerce/images/Visio_FreeGiftSelection.png)