Code Integration

Templates

There are four templates that must be integrated into your storefront templates:

• int_changeup_sfra/cartridge/templates/default/changeUp/checkout/checkout.isml

• int_changeup_sfra/cartridge/templates/default/changeUp/checkout/confirmation.isml

• int_changeup_sfra/cartridge/templates/default/changeUp/checkout/donationPrice.isml

• int_changeup_sfra/cartridge/templates/default/changeUp/product/productDetail.isml

• int_changeup_sfra/cartridge/templates/default/changeUp/checkout/ donationLineSummary.isml

These files need to be included in these existing SFRA files, respectively:

• [app_storefront_overlay]/cartridge/templates/[locale]/checkout/checkout.isml

• [app_storefront_overlay]/cartridge/templates/[locale]/checkout/confirmation/confirmation.isml

• [app_storefront_overlay]/cartridge/templates/[locale]/product/components/pricing/main.isml

• [app_storefront_overlay]/cartridge/templates/[locale]/product/productDetails.isml

• [app_storefront_overlay]/cartridge/templates/[locale]/product/bundleDetails.isml

• [app_storefront_overlay]/cartridge/templates/[locale]/product/components/setItems.isml

• [app_storefront_overlay]/cartridge/templates/default/checkout/orderTotalSummary.isml

Please Note: [app_storefront_overlay] refers to the storefront cartridge where app_storefront_base templates are overridden, so that base templates remain unaltered. This can vary from merchant to merchant, and you may need to copy these files from the app_storefront_base cartridge if you have not already.

For productDetails.isml, bundle.isml and setItems.isml use productDetail.isml

[locale] refers to the locale directory, which is typically “default” but may differ depending on your architecture.

checkout.isml

[app_storefront_overlay]/cartridge/templates/[locale]/checkout/checkout.isml

ChangeUp code injected into checkout.isml

Please Note: The exact location to include this template is up to the merchant and their desired checkout user experience. This example below renders the donation module at the bottom of the right column, below the order summary. For example, you may include it on the left side of the billing array. The donation UI will function independently of other checkout elements and forms and can be included anywhere. Below is a screenshot of the referenced placement.

ChangeUp as part of the right column included in the Order Summary.

confirmation.isml

[app_storefront_overlay]/cartridge/templates/[locale]/checkout/confirmation/confirmation.isml

ChangeUp code injected into confirmation.isml

The exact location to include this template is up to the merchant and their desired checkout user experience. This example renders the charity selection module above the order confirmation. The charity selection UI will function independently of any other elements and forms and, therefore, can be included anywhere. Below is a screenshot of the reference placement.

The Thank You page messaging displayed with the order completion details.

pricing/main.isml

[app_storefront_overlay]/cartridge/templates/default/product/components/pricing/main.isml

ChangeUp code injected into pricing/main.isml

productDetails.isml

[app_storefront_overlay]/cartridge/templates/[locale]/product/productDetails.isml

ChangeUp code injected into productDetails.isml

bundleDetails.isml

[app_storefront_overlay]/cartridge/templates/[locale]/product/bundleDetails.isml

ChangeUp code injected into bundleDetails.isml

setItems.isml

[app_storefront_overlay]/cartridge/templates/[locale]/product/components/setItems.isml

ChangeUp code injected into setItems.isml

Please Note: The exact location to include this template depends on the merchant and the desired user experience in the PDP. Below is a screenshot of the referenced placement.

Product-page-donations on the PDP.

donationLineSummary.isml

int_changeup_sfra/cartridge/templates/default/changeUp/checkout/donationLineSummary.isml

ChangeUp code injected into donationLineSummary.isml

Display the total amount of the donation in the orderSummary section:

Some templates need to be modified to avoid changes in the quantity for changeup donation product; you need to add a condition:

lineItem.id != 'changeup-donation'

Templates to be modified:

[app_storefront_overlay]/cartridge/templates/[locale]/cart/productCard/cartProductCardProductPrice.isml

cartProductCardProductPrice.isml

[app_storefront_overlay]/cartridge/templates/[locale]/checkout/productCard/productCard.isml

productCard.isml

[app_storefront_overlay]/cartridge/templates/[locale]/cart/productCard/cartProductCardEdit.isml

cartProductCardEdit.isml

Script

A slight change is needed in the calculateProductPrices() function; you need to extend the scripts/hooks/cart/calculate.js file or the file used for the dw.order.calculate hook inside the custom and add the hook path in the hooks.json and package.json files. Because the donation line item does not have a price book price, you must handle the product id explicitly. This is an example applied to the default SFRA script. On line 125, you must substitute:

Calculate.js

if (!productLineItem.catalogProduct)

With

if (!productLineItem.catalogProduct || productLineItem.productID == ‘changeup- donation’)

The totals.js model is another script extended in the int_changeup_sfra cartridge. Make sure there is no other cartridge overwriting this model; if it exists, copy the logic.

cartridges\int_changeup_sfra\cartridge\models\totals.js

cartridges\int_changeup_sfra\cartridge\models\totals.js