> For the complete documentation index, see [llms.txt](https://docs.changeup.com/salesforce/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.changeup.com/salesforce/salesforce-b2c-commerce/cartridge-installation/code-integration.md).

# 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](#checkout.isml)
* \[app\_storefront\_overlay]/cartridge/templates/\[locale]/checkout/confirmation/[confirmation.isml](#confirmation.isml)
* \[app\_storefront\_overlay]/cartridge/templates/\[locale]/product/components/pricing/[main.isml](#pricing-main.isml)
* \[app\_storefront\_overlay]/cartridge/templates/\[locale]/product/[productDetails.isml](#productdetails.isml)
* \[app\_storefront\_overlay]/cartridge/templates/\[locale]/product/[bundleDetails.isml](#bundledetails.isml)
* \[app\_storefront\_overlay]/cartridge/templates/\[locale]/product/components/[setItems.isml](#setitems.isml)
* \[app\_storefront\_overlay]/cartridge/templates/default/checkout/[orderTotalSummary.isml](#donationlinesummary.isml)

{% hint style="info" %}
**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.
{% endhint %}

### checkout.isml

*\[app\_storefront\_overlay]/cartridge/templates/\[locale]/checkout/checkout.isml*

<figure><img src="/files/Lug7dHK16NZmEk0njPiY" alt=""><figcaption><p>ChangeUp code injected into checkout.isml</p></figcaption></figure>

{% hint style="info" %}
**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.
{% endhint %}

&#x20;

<figure><img src="/files/UYDfETeBILN38IT87iNe" alt="ChangeUp&#x27;s donate-at-checkout installed as part of the Order Summary."><figcaption><p>ChangeUp as part of the right column included in the Order Summary.</p></figcaption></figure>

### confirmation.isml

*\[app\_storefront\_overlay]/cartridge/templates/\[locale]/checkout/confirmation/confirmation.isml*

<figure><img src="/files/RC4bruknwGudwhY63mDn" alt="ChangeUp code injected into confirmation.isml"><figcaption><p>ChangeUp code injected into confirmation.isml</p></figcaption></figure>

{% hint style="info" %}
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.
{% endhint %}

<figure><img src="/files/poyEqlevNWUAbPWptkll" alt="Thank You confirmation page with donation completion message."><figcaption><p>The Thank You page messaging displayed with the order completion details.</p></figcaption></figure>

### pricing/main.isml

*\[app\_storefront\_overlay]/cartridge/templates/default/product/components/pricing/main.isml*

<figure><img src="/files/MsiF7zo8QgwI5wS2Af2J" alt="ChangeUp code injected into pricing/main.isml"><figcaption><p>ChangeUp code injected into pricing/main.isml</p></figcaption></figure>

### productDetails.isml

*\[app\_storefront\_overlay]/cartridge/templates/\[locale]/product/productDetails.isml*

<figure><img src="/files/gjgkF30ZzG201kdZDv43" alt="ChangeUp code injected into productDetails.isml"><figcaption><p>ChangeUp code injected into productDetails.isml</p></figcaption></figure>

### bundleDetails.isml

\[app\_storefront\_overlay]/cartridge/templates/\[locale]/product/bundleDetails.isml

<figure><img src="/files/F6hOAZbCDivJYC92nMmF" alt="ChangeUp code injected into bundleDetails.isml"><figcaption><p>ChangeUp code injected into bundleDetails.isml</p></figcaption></figure>

### setItems.isml

*\[app\_storefront\_overlay]/cartridge/templates/\[locale]/product/components/setItems.isml*

<figure><img src="/files/TQjrzRIN6lDmFCiwd7eO" alt="ChangeUp code injected into setItems.isml"><figcaption><p>ChangeUp code injected into setItems.isml</p></figcaption></figure>

{% hint style="info" %}
**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.
{% endhint %}

<figure><img src="/files/s1RgakQ4V9J0DkjmksHN" alt="Product-page-donations on the PDP."><figcaption><p>Product-page-donations on the PDP.</p></figcaption></figure>

### donationLineSummary.isml

*int\_changeup\_sfra/cartridge/templates/default/changeUp/checkout/donationLineSummary.isml*

<figure><img src="/files/9Gv0dYGD3yG7NJORj8kp" alt="ChangeUp code injected into donationLineSummary.isml"><figcaption><p>ChangeUp code injected into donationLineSummary.isml</p></figcaption></figure>

Display the total amount of the donation in the orderSummary section:<img src="/files/XXXCc7A9UeAIB539k2NZ" alt="" data-size="original">

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*

<figure><img src="/files/bRjzYKhJ2ygS8HzO5FaH" alt="cartProductCardProduct Price.isml"><figcaption><p><em>cartProductCardProductPrice.isml</em></p></figcaption></figure>

*\[app\_storefront\_overlay]/cartridge/templates/\[locale]/checkout/productCard/productCard.isml*

<figure><img src="/files/d026LXqbwrXBY3nNRkYR" alt="productCard.isml"><figcaption><p>productCard.isml</p></figcaption></figure>

*\[app\_storefront\_overlay]/cartridge/templates/\[locale]/cart/productCard/cartProductCardEdit.isml*

<figure><img src="/files/WEmpqv47caLDcbOJsKpv" alt="cartProductCardEdit.isml"><figcaption><p><em>cartProductCardEdit.isml</em></p></figcaption></figure>

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

{% code overflow="wrap" %}

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

{% endcode %}

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*

<figure><img src="/files/ga8cDRX9F7JR90KY4cYZ" alt="Image of totals.js model"><figcaption><p><em>cartridges\int_changeup_sfra\cartridge\models\totals.js</em></p></figcaption></figure>


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.changeup.com/salesforce/salesforce-b2c-commerce/cartridge-installation/code-integration.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.