SFRA: Changes in Scripts, Templates, Client Script

Changes in app_storefront_base scripts

In app_storefront_base/cartridge/scripts/checkout/checkoutHelpers.js, add order.orderToken to the arguments provided to HookMgr.callHook as seen here in line 14:

Changes in app_storefront_base templates

In app_storefront_base/cartridge/templates/default/cart/cart.isml

Add Catch styles and script on the page in lines 4 and 6:

assets.addJs('/js/catch.js');
assets.addCss('/css/catch.css');

Add the following rows at line 81:

<iscomment> Catch code </iscomment>
  <div class="row">
    <div class="col center">
      <isinclude url="${URLUtils.url('Catch-IncludeWidget', 'widgetName', 'callout', 'page', 'cart')}" />
    </div>
  </div>
<iscomment> Catch code </iscomment>

Such as:

In app_storefront_base/cartridge/templates/default/checkout/checkout.isml

Add Catch styles on the page in line 10:
```
assets.addCss('/css/catch.css');
```

Put the following rows in line 13:

<isset name="catchHelper" value="${require('*/cartridge/scripts/catch/helper/catchHelper')}" scope="page" />
<isset name="catchPublicKey" value="${catchHelper.getPreference('publicKey')}" scope="page" />

Extend

tag with id="checkout-main" in line 23:

<div 
	id="checkout-main" 
	class="catch-data container data-checkout-stage <isif condition="${pdict.order.usingMultiShipping && pdict.order.shipping.length > 1}">multi-ship</isif>" 
	data-customer-type="${pdict.customer.registeredUser ? 'registered' : 'guest'}" 
	data-checkout-stage="${pdict.currentStage}" 
	data-checkout-get-url=${URLUtils.https('CheckoutServices-Get')} 
	data-key="${catchPublicKey}"
>

Extend in line 117:

<button 
	class="btn btn-primary btn-block place-order" 
	data-action="${URLUtils.url('CheckoutServices-PlaceOrder')}" 
	data-create-catch-checkout-url="${URLUtils.url('Catch-CreateCheckout')}"

In app_storefront_base/cartridge/templates/default/checkout/orderTotalSummary.isml

Add the following line to the end of the file:

<isif condition="${pdict.order.totals.appliedRewards}">
<div class="col-6 start-lines">
    <p class="order-receipt-label"><span>${Resource.msg('label.order.rewards','catch', null)}</span></p>
       </div>
       <div class="col-6 end-lines">
           <p class="text-right"><span class="catch-rewards">${pdict.order.totals.appliedRewards}</span></p>
       </div>
</isif>

Add the following line to the end of the file:

<isif condition="${!pdict.order.orderNumber}">
    <div class="callout-checkout-wrapper d-flex justify-content-center">
        <isinclude url="${URLUtils.url('Catch-IncludeWidget', 'widgetName', 'callout', 'page', 'checkout')}" />  
    </div>
</isif>

In app_storefront_base/cartridge/templates/default/checkout/billing/paymentOptions/paymentOptionsContent.isml

Add the line to the beginning of the file:

<isset name="catchHelper" value="${require('*/cartridge/scripts/catch/helper/catchHelper')}" scope="page" />

Place the following rows in line 7:

<isif condition="${paymentOption.ID === 'Catch' && catchHelper.getPreference('enable')}">
    <isinclude template="checkout/billing/paymentOptions/catchContent" />
</isif>

In app_storefront_base/cartridge/templates/default/checkout/billing/paymentOptions/paymentOptionsSummary.isml, place the following rows in line 6:

<isif condition="${payment.paymentMethod === 'Catch'}">
    <div class="credit-card-type">
        <span>${Resource.msg('msg.payment.catch', 'catch', null)}</span>
    </div>
</isif>

In app_storefront_base/cartridge/templates/default/checkout/billing/paymentOptions/paymentOptionsTabs.isml, place the following rows in line 5:
```
<isif condition="${paymentOption.ID === 'Catch'}">
    <isinclude template="checkout/billing/paymentOptions/catchTab" />
</isif>
```

In app_storefront_base/cartridge/templates/default/checkout/cart/miniCart.isml, place the following rows in line 66:

<div class="col d-flex justify-content-center callout-mini-cart-wrapper">
    <isinclude url="${URLUtils.url('Catch-IncludeWidget', 'widgetName', 'callout', 'page', 'minicart')}" />
</div>

In app_storefront_base/cartridge/templates/default/checkout/confirmation/confirmation.isml

Add Catch scripts and styles on the page in the beginning of the file:

assets.addCss('/css/catch.css');
assets.addJs('/js/catchInitOnConfirmation.js');

Place the following rows in line 34:

<isloop items="${pdict.order.billing.payment.selectedPaymentInstruments}" var="payment">
    <isif condition="${payment.paymentMethod === 'Catch' && pdict.order.catch.catch_earned !== 0}">
        <isset name="paidWithCatch" value="${true}" scope="page" />
        <div class="row">
            <isinclude url="${URLUtils.url('Catch-IncludeWidget', 'widgetName', 'purchase', 'pdictOrderNo', pdict.order.orderNumber, 'pdictOrderToken', pdict.order.order_token)}" />
        </div>
    </isif>
</isloop>


<isset name="catchHelper" value="${require('*/cartridge/scripts/catch/helper/catchHelper')}" scope="page" />
<isif condition="${catchHelper.getPreference('enable')
    && catchHelper.getPreference('campaignLinkWidgetEnable')
    && catchHelper.getPreference('campaignName')
    && typeof paidWithCatch === 'undefined'}">
    <isinclude url="${URLUtils.url('Catch-IncludeWidget', 'widgetName', 'campaign')}" />
</isif>

In app_storefront_base/cartridge/templates/default/common/htmlHead.isml, place the following rows in line 32:

<link rel="stylesheet" href="${URLUtils.staticURL('/css/catch.css')}" />
<isinclude template="catch/catchSDK" />

In app_storefront_base/cartridge/templates/default/product/bundleDetails.isml

Add Catch scripts and styles on the page in the beginning of the file:
```
assets.addJs('/js/catch.js');
assets.addCss('/css/catch.css');
```

Add the Catch widget to the PDP bundle page. Put the following rows in line 49:

<iscomment> Catch Code </iscomment>
  <div class="row">
    <div class="col">
      <isinclude url="${URLUtils.url('Catch-IncludeWidget', 'widgetName', 'callout', 'page', 'product', 'productId', product.id, 'productType', product.productType)}" />
    </div>
  </div>
<iscomment> Catch Code </iscomment>

In app_storefront_base/cartridge/templates/default/product/productDetails.isml

Add Catch scripts and styles on the page in the beginning of the file:
```
assets.addJs('/js/catch.js');
assets.addCss('/css/catch.css');
```

Add the Catch widget to the PDP page. Put the following rows in line 58:

<iscomment> Catch Code </iscomment>
  <div class="row">
    <div class="col">
      <isinclude url="${URLUtils.url('Catch-IncludeWidget', 'widgetName', 'callout', 'page', 'product', 'productId', product.id, 'productType', product.productType)}" />
    </div>
  </div>
<iscomment> Catch Code </iscomment>

In app_storefront_base/cartridge/templates/default/product/setDetails.isml, add Catch scripts and styles on the page in the beginning of the file:
```
assets.addJs('/js/catch.js');
assets.addCss('/css/catch.css');
```

In app_storefront_base/cartridge/templates/default/product/components/setItems.isml, add the Catch widget to the PDP page. Put the following rows in line 42:

<iscomment> Catch Code </iscomment>
<div class="row">
    <div class="col">
        <isinclude url="${URLUtils.url('Catch-IncludeWidget', 'widgetName', 'callout', 'page', 'product', 'productId', product.id, 'productType', product.productType)}" />
    </div>
</div>
<iscomment> Catch Code </iscomment>

In app_storefront_base/cartridge/templates/default/checkout/confirmation/confirmationEmail.isml, add the following rows in line 5:

<iscomment>Catch Code Start</iscomment>
<isloop items="${pdict.order.billing.payment.selectedPaymentInstruments}" var="payment">
<isif condition="${payment.paymentMethod === 'Catch'}">
     <div>
        <p>${Resource.msg('msg.confirmation.catch.mail', 'catch', null)}</p>
            </div>
       </isif>
</isloop>
<iscomment>Catch Code End</iscomment>

In app_storefront_base/cartridge/templates/default/checkout/confirmation/confirmationOrderTotal.isml, add the following rows in line 29:

<isif condition="${pdict.order.totals.appliedRewards}">
    ${Resource.msg('label.order.rewards','catch', null)}:
    ${pdict.order.totals.appliedRewards}
    <br/>
</isif>

In app_storefront_base/cartridge/templates/default/checkout/confirmation/confirmationPaymentInfo.isml, add the following rows in line 17:

<isif condition="${payment.paymentMethod === 'Catch'}">
    <div>
        <span>${Resource.msg('msg.payment.catch', 'catch', null)}</span>
    </div>
</isif>

In app_storefront_base/cartridge/templates/default/common/layout/checkout.isml, add the following row to the beginning of the tag:

<span class="catch-data catch-hidden" data-key="<isprint value="${require('*/cartridge/scripts/catch/helper/catchHelper').getPreference('publicKey')}" encoding="htmldoublequote" />"></span>

In app_storefront_base/cartridge/templates/default/common/layout/page.isml, add the following row to the beginning of the tag:

<span class="catch-data catch-hidden" data-key="<isprint value="${require('*/cartridge/scripts/catch/helper/catchHelper').getPreference('publicKey')}" encoding="htmldoublequote" />"></span>

In app_storefront_base/cartridge/templates/default/common/layout/pdStorePage.isml, add the following row to the beginning of the tag:

<span class="catch-data catch-hidden" data-key="<isprint value="${require('*/cartridge/scripts/catch/helper/catchHelper').getPreference('publicKey')}" encoding="htmldoublequote" />"></span>

Changes in client script

📘
Don’t forget to compile client side scripts after implementing changes in source code.

In app_storefront_base/cartridge/client/default/js/cart/cart.js

Put the following row in line 5:

var catchHelper = require('../catch/helper/catchHelper');

Put the following rows in end of updateCartTotals: function():
```
// Catch code start
catchHelper.updateCartWidgets(data.totals.grandTotal);
// Catch code end
```
Note: Also make sure to call catchHelper.updateCartWidgets(); on your custom Storefront every time totals are changed on the Cart page. This way Catch widgets will be updated with an actual total price.

Put the following rows to the line 373:

// Catch code start
var miniCartWidget = $('.minicart .catch-pdp-widget');
var cartCalloutWidget = $('.cart-page .catch-pdp-widget');
  if (data.isIneligibleProductInBasket) {
    catchHelper.hideWidget(miniCartWidget);
    catchHelper.hideWidget(cartCalloutWidget);
  } else {
    catchHelper.showWidget(miniCartWidget);
    catchHelper.showWidget(cartCalloutWidget);
}
// Catch code end

In app_storefront_base/cartridge/client/default/js/checkout/billing.js, modify the function updatePaymentInformation() by adding the switch statement in line 189:

switch (order.billing.payment.selectedPaymentInstruments[0].paymentMethod) {
    case 'Catch':
        htmlToAppend += '<span>' + order.resources.catch.paymentMethod + '</span>';
        break;
    default:
        … 'htmlToAppend' content goes here
        break;
    }
}

In app_storefront_base/cartridge/client/default/js/checkout/checkout.js

Put the following row in line 10:

var catchHelper = require('../catch/helper/catchHelper');

Put the following rows in line 59:

var catchCheckoutID = null;
var catchPrefill = null;
var catchConfirmed = false;

Put the following rows in line 131:

// Catch code start
catchHelper.onWidgetProductPriceChange();
// Catch code end

Put the following rows in line 338:

// Catch code start
catchPrefill = catchHelper.getCatchPrefilledData(data);
catchCheckoutID = data.order.catch.catch_checkoutId;
// Catch code end

Wrap the contents of the 'placeOrder' stage function:

var placeOrder = function (defer) {


… 'placeOrder' stage content goes here


}
// Init Catch payment widget
var isCatchPaymentMethod = $('[data-payment="catch"]').length;
var option = {
    inline: true,
    onCancel: function () {
   	 members.gotoStage('placeOrder');
    },
    onConfirm: function () {
        catchConfirmed = true;
 placeOrder(defer);
    },
    prefill: catchPrefill
};


if (isCatchPaymentMethod && catchCheckoutID) {
    catchHelper.initializeCatchSDK('checkout', catchCheckoutID, option);
} else if (isCatchPaymentMethod) {
// Anytime the Catch page refreshes, ignore the previous Catch Checkout and instead create & open a new one.
    $('body').trigger('checkout:disableButton', '.next-step-button button');


    $.ajax({
        url: $('.place-order').data('create-catch-checkout-url'),
        method: 'GET',
        success: function (data) {
            if (data.error) {
                defer.reject(data);
            } else {
                $('.error-message').hide();
                catchCheckoutID = data.order.catch.catch_checkoutId;
                option.prefill = catchHelper.getCatchPrefilledData(data);
                catchHelper.initializeCatchSDK('checkout', catchCheckoutID, option);
            }
        },
        error: function (err) {
        defer.reject(err.responseJSON);
        },
        complete: function () {
            $('body').trigger('checkout:enableButton', '.next-step-button button');
        }
    });
} else {
    placeOrder(defer);
}

Add to the end of initialize: function() initialization Catch widget. Put the following rows in line 542:

// Init Catch
catchHelper.onWidgetProductPriceChange();
catchHelper.inititializeCatchSDK('checkout');

Put the following rows in line 581:

if (catchConfirmed) {
    catchHandle.closeConfirmedCheckout(); // eslint-disable-line no-undef
    catchConfirmed = false;
}

Put the following rows in line 657:
```
// Catch code start
catchHelper.onWidgetProductPriceChange();
catchHelper.setItemsAttribute(data.order.totals.catchItems);
// Catch code end
```
Note: Also make sure to call catchHelper.onWidgetProductPriceChange(); on your custom Storefront every time totals are changed during checkout. This way Catch widgets will be updated with an actual total price.

In app_storefront_base/cartridge/client/default/js/product/detail.js

Put the following row in line 3:

var catchHelper = require('../catch/helper/catchHelper');

Put the following rows to updateAttribute: function() in line 61:

var calloutWidget = response.container.find('.catch-pdp-widget');
catchHelper.onWidgetProductPriceChange();
catchHelper.updateItemsAttributePDP(response);


if (response.data.isVisibleCallout) {
    catchHelper.showWidget(calloutWidget);
} else {
    catchHelper.hideWidget(calloutWidget);
}

In app_storefront_base/cartridge/client/default/js/main.js, put the following row in line 15:
```
processInclude(require('./catchInit'));
```

Next Steps

Continue to SFCC Catch Configuration

Changes in app_storefront_base scripts

Changes in app_storefront_base templates

Changes in client script

📘Don’t forget to compile client side scripts after implementing changes in source code.

Next Steps

📘
Don’t forget to compile client side scripts after implementing changes in source code.