Library API¶

Installation¶

The library is hosted at https://cdn.esales.apptus.com/integration/v1/. It is built as two separate bundle versions; one for modern browsers and one that supports legacy browsers.

esales-lifestyle.js - Main bundle for modern browsers
esales-lifestyle.es5.js - Main bundle for legacy browsers

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

<head>
  <script src="https://cdn.esales.apptus.com/integration/v1/esales-lifestyle.js" type="module"></script>
  <script src="https://cdn.esales.apptus.com/integration/v1/esales-lifestyle.es5.js" nomodule defer></script>
  <script src="init-esales-lifestyle.js" defer></script>
</head>

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.

Initialisation¶

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¶

<script>
esales.init({
  webApiId: 'w1A2B3C45',
  market: 'UK',
  productPageUrlPrefix: 'https://www.esalesdrivensite.com/products',
  searchPageUrlPrefix: 'https://www.esalesdrivensite.com/search',
  navigationPagePathPrefix: '/en-gb/categories',
  rating: true
});
</script>

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.

Session¶

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