Customizing the Free Gift Selection rendering

{{ # 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>