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
(EcmaScript 5, for support of older browsers such as Internet Explorer 11).
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. |