Skip to content

Library API


The library is hosted at It is built as two separate bundle versions; one for modern browsers and one that supports legacy browsers.

The code snippet below must be used to ensure that the correct bundle version is used by each browser.

  <script src="" type="module"></script>
  <script src="" nomodule defer></script>
  <script src="init-esales-lifestyle.js" defer></script>

Bundle differences

The modern bundle is built for, and will only be used by, browsers that support the es2015 Javascript Modules (ESM). Any other browser will use the legacy bundle that has support down to es5.

For more information about script syntax and performance suggestions, see Dive Deeper.


Before the components are registered, the library needs to be initialised with a set of variables, specified in InitConfig interface.

Make sure to call esales.init() after including the esales-lifestyle.js library from the CDN. It is also possible to configure scripts to be non-blocking by deferring script loading.

Initialisation example

  webApiId: 'w1A2B3C45',
  market: 'UK',
  productPageUrlPrefix: '',
  searchPageUrlPrefix: '',
  navigationPagePathPrefix: '/en-gb/categories',
  rating: true

Initialisation specification

A global variable esales of the interface Esales is made available when including the script. The Esales and InitConfig interfaces are used to define the properties that must be set to initiate the eSales Lifestyle components.

Esales interface

declare const esales = Esales;

interface Esales {
  init(config: InitConfig): void;
  session: {
    customerKey: string;
    readonly sessionKey: string;
  favorites: {
    get: Promise<string[]>;
    set(keys: string[]): void;
Attribute Type Description
init function(InitConfig) Function to bootstrap the eSales components.
session Session Accessible session information.
favorites string[ ] The favourites of the current visitor. Automatically updated on favourite interactions in the components. Supports explicit get and set, where get returns a Promise<string[]> of the current favourites.
Attribute Type Description
customerKey string The customer key, UUID v4 / GUID, persisted in local storage. Automatically generated unless set externally.
sessionKey string The session key, UUID v4 / GUID, persisted in local storage. Automatically generated and is read-only.

InitConfig interface

interface Config {
  webApiId: string;
  market: string;
  productPageUrlPrefix: string;
  searchPageUrlPrefix?: string;
  navigationPagePathPrefix?: string;
  rating?: boolean;
  productImageBrokenURL?: string;
  iconUrl?: string;
  priceId?: string;
  currencyBefore?: boolean;
  currencySymbol?: string;
  disableResponsiveStyleSheet?: boolean;
  disableCustomerStyleSheet?: boolean;
Parameter Type Description
market string The market for the site. It can be set either statically or dynamically depending on how markets are handled on the site.
Required element
webApiId string The Web API cluster Id. The Id points the script to the retailers eSales service from where data should be fetched.
Required element
productPagePathPrefix string The product page path prefix is required to compose URLs for products in any product listing. The URL is produced by combining the productPagePathPrefix from the script initialisation with the url attribute for each product in the data feed.
The productPagePathPrefix must not end with /.
Required element
searchPagePathPrefix string The URL to the page where the <esales-search-results> component is. A search parameter q will be appended to this string with the search phrase for searches from the <esales-search-assistant>.
The searchPagePathPrefix must not end with /.
Required element for search integration
navigationPagePathPrefix string The path from the origin to the root of where category pages using navigation from eSales Lifestyle are hosted.
The navigationPagePathPrefix must not end with /.
Required element for navigation integration
rating boolean Tells the script if ratings for products should be displayed.
productImageBrokenURL string A URL to an image which is to be displayed, when the original product image is missing.
iconUrl string The full path to a .woff-file containing custom icons to replace the default icons in the components.
priceId string An identifier to apply custom prices as provided in the data feed. Products without currency information for the requested identifier will be omitted .
currencyBefore boolean Determines if the currency symbol should be presented before or after custom prices. This should be provided when a priceId for a non default currency is used.
Currency symbol placement for base prices are set in the Localisation tab in the Experience app.
currencySymbol string The currency symbol or text presentation to be used for a custom price. This should be provided when a priceId for a non default currency is used.
Currency symbols for base prices are set in the Localisation tab in the Experience app.
disableResponsiveStyleSheet boolean Disables default styling for mobile mode. Should be disabled when mobile visuals are customized.
disableCustomerStyleSheet boolean Note: This setting is only applicable for retailers who have used Theming API V1 previously. Disables the usage of custom retailer specific stylesheets provided by Apptus to support migration from Theming V1.

Last update: April 27, 2021

This online publication is intellectual property of Apptus Technologies. Its contents can be duplicated in part or whole, provided that a copyright label is visibly located on each copy and the copy is used in conjunction with the product described within this document.

All information found in these documents has been compiled with utmost attention to detail. However, this does not guarantee complete accuracy. Neither Apptus Technologies nor the authors shall be held liable for possible errors or the consequences thereof.

Software and hardware descriptions cited in these documents might be registered trademarks. All trade names are subject to copyright restrictions and may be registered trademarks. Apptus Technologies essentially adheres to the manufacturer’s spelling. Names of products and trademarks appearing in this document, with or without specific notation, are likewise subject to trademark and trade protection laws and may thus fall under copyright restrictions.