Storefront Customizations

📘
If your website employs the default StoreFront Reference Architecture (SFRA), this step is not necessary.

This section covers modifications made to the template in the custom storefront. All changes can be found in the Templates folder (cartridge int_progressive_sfra) and are marked with the comment Progressive code.

The given code is located in the Grand Total block of the cartridge/templates/default/checkout/orderTotalSummary.isml file.

<isif condition="${pdict.isProgressiveConfirmation !== null}">
 <small>${Resource.msg('progressive.confirmation.totalAmountLabel', 'progressive', null)}</small>
</isif>

The subsequent section of code is in charge of gathering and transmitting data needed by the checkout page. This code is situated in the .summary-details.billing block after span order-summary-email block of the cartridge/templates/default/checkout/billing/billingSummary.isml file.

<isset name="progressive" value="${require('*/cartridge/scripts/progressive')}" scope="page" />
<isset name="CurrentBasket" value="${require('dw/order/BasketMgr').getCurrentBasket()}" scope="page" />

<isif condition="${CurrentBasket}">
    <isset name="basketCheck" value="${CurrentBasket.getAllProductLineItems().isEmpty()}" scope="page" />

    <isif condition="${!basketCheck}">
        <isscript>
            var assets = require('*/cartridge/scripts/assets.js');
            assets.addJs('/js/progressive-checkout-ui.js');
        </isscript>
        <div
            data-checkout='<isprint value="${progressive.basket.getCheckout(CurrentBasket, 1)}" encoding="htmlsinglequote" />'
            data-merchant='<isprint value="${progressive.basket.getMerchant()}" encoding="htmlsinglequote" />'
            data-csrfname='<isprint value="${dw.web.CSRFProtection.getTokenName()}" encoding="htmlsinglequote" />'
            data-csrftoken='<isprint value="${dw.web.CSRFProtection.generateToken()}" encoding="htmlsinglequote" />'
            id="progressive-checkout-data">
        </div>

        <isinclude template="progressive/progressiveCheckout" />
        </isif>
</isif>

The following code segment collects the data necessary for the checkout page. You can find this code within the updateUrl function of the cartridges/int_progressive_sfra/cartridge/client/default/js/checkout/checkout.js file.

function updateUrl(currentStage) {
    history.pushState(
        checkoutStages[currentStage],
        document.title,
        location.pathname
        + '?stage='
        + checkoutStages[currentStage]
        + '#'
        + checkoutStages[currentStage]
    );

    // Progressive code
    if (checkoutStages[currentStage] === 'payment') {
        $('.payment-options > .nav-item').on('click', function (e) {
            let paymentId = $(this).data('method-id');

            if (paymentId) {
                $('input[name$="paymentMethod"]', plugin).val(paymentId);
            }
        });

        $('.progressive-payment-tab').trigger('click');
    } else if (checkoutStages[currentStage] === 'placeOrder') {
        var paymentInformation = $('.payment-information');
        if (paymentInformation.data('payment-method-id') === 'Progressive') {
            var progressiveConfig = $('#progressive-config'),
                url = progressiveConfig.data('update-url');

            $.spinner().start();

            $.ajax({
                url: url,
                method: 'GET',
                success: function (data) {
                    var progressiveCheckoutData = $('#progressive-checkout-data');

                    progressiveCheckoutData.data('checkout-data', JSON.parse(data.checkout_data));
                    progressiveCheckoutData.data('merchant-data', JSON.parse(data.merchant_data));

                    $.spinner().stop();
                }
            });
        }

The upcoming code segment allows the customization of the checkout button. You can find this code in the cartridges/int_progressive_sfra/cartridge/client/default/js/checkout/checkout.js file at line 291.
```
if ( // Progressive conditions code
    ($('.payment-summary .js-progressive-payment-step').length <= 0) ||
    ($('#progressive-checkout-data').data('completed'))
) {
    … code
}
```
The next code segment introduces Email and Phone fields to the billing form. These fields are optional and can be filled in during the Progressive checkout process if missing. You can find this code under the billing-address fieldset of the cartridge/templates/default/checkout/billing/billing.isml file.
```
<isinclude template="checkout/billing/paymentOptions/billingUserContent" />
```
To define the form fields for this section, update the code segment in the cartridge/forms/default/billing.xml file following the paymentMethod field. These changes will be implemented after the billingUser.xml file in your cartridge is imported from the cartridges/int_progressive_sfra/cartridge/forms/default folder.
```
<include formid="billingUserFields" name="billingUser"/>
```
The subsequent code section adds the Progressive Leasing payment option to the payment page. This code can be found under the isloop section of the cartridge/templates/default/checkout/billing/paymentOptions/paymentOptionsContent.isml file.
```
<isif condition="${payment.paymentMethod === 'Progressive'}">
    ${Resource.msg('progressive.payment.name', 'progressive', null)}
</isif>
```
The following code section adds Progressive Leasing to the payment page. You can find this code under the isloop section of the cartridge/templates/default/checkout/billing/paymentOptions/paymentOptionsTabs.isml file.
```
<isif condition="${paymentOption.ID === 'Progressive'}">
    <isinclude template="progressive/progressivePaymentLi" />
</isif>
```

The final code section facilitates the customization of the summary page. You can find this code under the updatePaymentInformation function of the cartridge/client/default/js/checkout/billing.js file. Please note that to activate the updates, the JS client has to be rebuilt.

function updatePaymentInformation(order) {
    // update payment details
    var $paymentSummary = $('.payment-details');
    var htmlToAppend = '';

    // Progressive code
    if (order.billing.payment && order.billing.payment.selectedPaymentInstruments
        && order.billing.payment.selectedPaymentInstruments.length > 0
        && ($('.payment-information').data('payment-method-id') === 'CREDIT_CARD')
    ) {
        htmlToAppend += '<span>' + order.resources.cardType + ' '
            + order.billing.payment.selectedPaymentInstruments[0].type
            + '</span><div>'
            + order.billing.payment.selectedPaymentInstruments[0].maskedCreditCardNumber
            + '</div><div><span>'
            + order.resources.cardEnding + ' '
            + order.billing.payment.selectedPaymentInstruments[0].expirationMonth
            + '/' + order.billing.payment.selectedPaymentInstruments[0].expirationYear
            + '</span></div>';
    } else if ($('.payment-information').data('payment-method-id') === "Progressive") {
        var progressiveConfig = $('#progressive-config'),
            paymentMethodName = progressiveConfig.data('payment-name');

        if (paymentMethodName) {
            htmlToAppend += `<span><div class="js-progressive-payment-step">${paymentMethodName}</div></span>`;
        }
    }
    // End Progressive code

    $paymentSummary.empty().append(htmlToAppend);
}