> For the complete documentation index, see [llms.txt](https://developer.esw.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://developer.esw.com/salesforce-commerce-cloud/salesforce-commerce-cloud/pricing/advanced-pricing/spark-pricing-integration.md).

# Spark Pricing Integration

ESW SFCC cartridge also offers a simple frontend solution which ensures the prices are shown accurately. This solution uses the store’s base currency and converts prices to the shopper’s currency directly on the storefront using JavaScript.

When Spark pricing is enabled, the store sends product prices in the base currency (such as USD or EUR). Shoppers do not see these base prices; ESW automatically converts them to the shopper's local currency based on their shipping country.

## Enable Spark Pricing on retailer’s website <a href="#enable-spark-pricing-on-retailers-website" id="enable-spark-pricing-on-retailers-website"></a>

{% hint style="info" %}

#### Prerequisites

Before enabling Spark pricing integration, ensure the following:

* The Spark feature is correctly configured on the ESW tenant side. The ESW integration team can assist if needed.
* Spark pricing integration works only with dynamic pricing countries and **does not function with fixed-price configurations**.
* **Developer effort is required** to add specific HTML classes in the codebase to ensure pricing-related conversions reflect properly in the HTML DOM.
* **Threshold promotions** are **not supported** in Spark-enabled countries.
  {% endhint %}

To enable Spark pricing on the storefront, retailers must follow the configuration steps below.

### Import metadata <a href="#import-metadata" id="import-metadata"></a>

Retailer needs to Import site preference attributes (systemobjects\_spark.xml) from **link\_eshopworld\Metadata\meta.**

After importing the metadata, the retailer will see a set of configuration preferences in Business Manager that need to be set up as described below.

### Business Manager Configurations <a href="#business-manager-configurations" id="business-manager-configurations"></a>

#### ESW SPARK Integration Configuration <a href="#esw-spark-integration-configuration" id="esw-spark-integration-configuration"></a>

The preference group **“ESW SPARK Integration Configuration”** also includes attributes for the [iframe checkout](https://know.esw.com/space/TDR/1446281252/Embedded+Checkout) feature however, this section focuses only on the attributes related to the **Spark pricing conversion** feature.

The **“ESW SPARK Integration Configuration”** group can be found under **Merchant Tools > Site Preferences > Custom Site Preference Groups > ESW SPARK Integration Configuration** and includes the following attributes::

* **ESW SPARK Script Path:** This is the URL of the Spark JavaScript provided by the ESW.
* **ESW SPARK Dynamic Pricing Enabled:** Set this to **Yes** to enable Spark pricing conversion, or **No** to disable it.

<div data-with-frame="true"><figure><img src="/files/LxCmMPFwG0e15xqAeoC1" alt=""><figcaption></figcaption></figure></div>

#### ESW Retailer Display Configuration <a href="#esw-retailer-display-configuration" id="esw-retailer-display-configuration"></a>

If you decide to use the **ESW LTI Country Selector**, it will be automatically generated by the **Spark script**. In this case, you’ll need to update a few settings in **SFCC Business Manager** by going to:\
**Merchant Tools > Site Preferences > Custom Site Preference Groups > ESW Retailer Display Configuration**

Update the following configurations accordingly:

* **ESW Enable Landing Page** – set to **No**
* **ESW Enable Country Selector on Landing Page** – set to **No**
* **ESW Enable Currency Selector on Landing Page** – set to **No**
* **ESW Enable Language Selector on Landing Page** – set to **No**
* **ESW Enable Bar on Header Page** – set to **Yes** if the country selector should appear in the header, **No** otherwise
* **ESW Enable Bar on Footer Page** – set to **Yes** if the country selector should appear in the footer, **No** otherwise

#### **Configure custom objects** <a href="#configure-custom-objects" id="configure-custom-objects"></a>

Spark pricing conversion is designed to work only with dynamic pricing countries. Therefore, it’s important to ensure that the **LTI-enabled countries in ESP** are also configured as **non-fixed price countries in SFCC**. If these settings are not aligned, shoppers may not be redirected to checkout properly, and product prices may not display correctly on the storefront.

To configure dynamic price model country, please follow below steps:

* Goto: Merchant Tools > Custom Objects > Manage Custom Objects
* Set “ESW\_COUNTIRES” custom objects from the drop down
* Search the country which needs to set a dynamic pricing model for example IE
* Select the country

<div data-with-frame="true"><figure><img src="/files/QwrkZiYExu4nK7nSPCmQ" alt=""><figcaption></figcaption></figure></div>

* Make sure to
  * Uncheck “Is Fixed Price Model:”
  * Check “Is ESW Supported Country:”
* The country configuration is shown in the screenshot below.

<div data-with-frame="true"><figure><img src="/files/ApRXy2d0ZFEelYn91r4M" alt=""><figcaption></figcaption></figure></div>

#### **Upload and compile cartridges** <a href="#upload-and-compile-cartridges" id="upload-and-compile-cartridges"></a>

To use spark with SFRA the cartridge path should be:

```
int_eshopworld_spark:int_eshopworld_sfra:int_eshopworld_core
```

To compile assets for spark run following commend in link\_eshopworld folder:

```
npm run compile:js:spark && npm run compile:scss:spark
```

## Code Customization <a href="#code-customization" id="code-customization"></a>

The **ESW SFCC cartridge** provides a helper function to add specific classes to storefront elements only when the related feature is enabled, preventing unnecessary classes in the HTML DOM.

The pricing integration table details follow:

| **Name**              | **Purpose**                                                                                                         |
| --------------------- | ------------------------------------------------------------------------------------------------------------------- |
| cart-price            | Shows the unit price of each product.                                                                               |
| cart-item             | Represents a single line item container in the cart.                                                                |
| cartItem-quantity     | Displays the quantity of a specific item in the cart.                                                               |
| cartItem-subtotal     | Shows the total price of an item (unit price × quantity).                                                           |
| cart-subtotal         | Displays the subtotal of all items before discounts or fees.                                                        |
| cart-total            | Shows the final total of the cart, including all charges and discounts.                                             |
| page-price            | Used for general prices on any page (not included in calculations). Ideal for promotion callouts or static content. |
| discount-item         | Represents any discount amount applied on the cart page — included in total calculations.                           |
| minicart-subtotal     | Displays the subtotal in the mini cart view.                                                                        |
| minicart-item         | Shows the unit price of a product within the mini cart.                                                             |
| minicart-price        | Used for pricing within mini cart line items (e.g., .esw-cart-line-item-unit-price).                                |
| minicartItem-quantity | Displays the quantity of each product in the mini cart.                                                             |
| minicartItem-subtotal | Shows the subtotal for items in the mini cart.                                                                      |
| singleItem-discount   | Displays the discount applied to an individual line item.                                                           |
| surcharge-item        | Represents any extra charges such as shipping, tax, or handling fees.                                               |

The cartridge handles quantity and discount updates on the standard SFRA storefront automatically. Retailers must add the appropriate classes based on the **HTML structure recommended by the Spark script**.

**Calling helper function to add class in the DOM:**

To integrate spark pricing, call the helper function in the relevant ISML as follows:

* Include eswHelper in the ISML:

```html
<isset name="eswHelper" value="${require('*/cartridge/scripts/helper/eswHelper').getEswHelper()}" scope="page" />
```

* Use the helper function “eswHelper.applySparkClassToDom(‘html-class’)” in your ISML file to generate the required class, as shown in the example below.

```html
<span class="any-class ${eswHelper.applySparkClassToDom('esw-general-price')}">${price.decimalPrice}</span>
```

## Adding class to elements in SFRA, Examples <a href="#adding-class-to-elements-in-sfra-examples" id="adding-class-to-elements-in-sfra-examples"></a>

The table below shows the default pricing integration configuration, including the classes used in the ESW cartridge.\
Use these classes as a reference when setting up your storefront implementation.

**Disclaimer:** These classes can be customized based on the retailer’s code implementation. The ESW integration team can assist retailers in adding or updating classes on the ESW tenant side.

| **Name**              | **Value (CSS Selector)**        |
| --------------------- | ------------------------------- |
| cart-price            | .esw-cart-line-item-unit-price  |
| cart-item             | .esw-cart-item                  |
| cartItem-quantity     | .esw-cart-quantity              |
| cartItem-subtotal     | .esw-cart-line-item-total-price |
| cart-subtotal         | .esw-cart-subtotal              |
| cart-total            | .esw-cart-total                 |
| page-price            | .esw-general-price, .esw-price  |
| discount-item         | .esw-discount                   |
| minicart-subtotal     | .esw-minicart-subtotal          |
| minicart-item         | .esw-minicart-item              |
| minicart-price        | .esw-cart-line-item-unit-price  |
| minicartItem-quantity | .esw-cart-quantity              |
| minicartItem-subtotal | .esw-cart-line-item-total-price |
| singleItem-discount   | .esw-general-price              |
| surcharge-item        | .esw-cart-surcharge             |

The following screenshots illustrate how Spark is implemented in the default SFRA storefront, helping developers understand its integration more clearly.

**PLP/Product Card**

<div data-with-frame="true"><figure><img src="/files/pHFjnu9yos6v6V4QfpIA" alt=""><figcaption></figcaption></figure></div>

**PDP**

<div data-with-frame="true"><figure><img src="/files/xiuQ7AQo65qa3XHk6q5M" alt=""><figcaption></figcaption></figure></div>

**Cart page**

<div data-with-frame="true"><figure><img src="/files/uogN9YZdjOsXcGrfw8fo" alt=""><figcaption></figcaption></figure></div>

**Cart page totals**

<div data-with-frame="true"><figure><img src="/files/IoC9jwwpw2LjFJE5VvXC" alt=""><figcaption></figcaption></figure></div>

**Mini Cart**

<figure><img src="/files/z39bC0LTAM4Ppvm8V007" alt=""><figcaption></figcaption></figure>

&#x20;


---

# 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, and the optional `goal` query parameter:

```
GET https://developer.esw.com/salesforce-commerce-cloud/salesforce-commerce-cloud/pricing/advanced-pricing/spark-pricing-integration.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

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.