Skip to content

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.


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

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-fashion.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,
  theme: {
    fontFamily: 'Roboto, sans-serif'

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 Fashion components.

Esales interface

declare const esales = Esales;

interface Esales {
  init(config: InitConfig): void;
  session: {
    customerKey: string;
    readonly sessionKey: string;
Attribute Type Description
init function(InitConfig) Function to bootstrap the eSales components.
session Session Accessible session information.
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 InitConfig {
  webApiId: string;
  market: string;
  productPageUrlPrefix: string;
  searchPageUrlPrefix: string;
  navigationPagePathPrefix: string;
  rating?: boolean;
  theme?: SiteTheme;
Attribute Type Description
webApiId string The targeted eSales cluster, value provided by Apptus.
Required element.
market string The target market the page should be rendered for.
Required element.
productPageUrlPrefix string A prefix for where the products are hosted. Used in conjunction with the url attribute provided in products in the product feed to create clickable links. For example:
  • productPageUrlPrefix: ''
  • Product URL in feed: /P123456789
  • URL result:
Required element.
searchPageUrlPrefix string The URL to the page where the <esales-search-results> component is. A search param q will be appended to this string with the search phrase for searches from the <esales-search-assistant>.
Required element for search integration.
navigationPagePathPrefix string The path from the origin to the root of where category pages with esales web components are hosted. For a site where category pages are located right after the origin, the variable does not need to be defined:
  • navigationPagePathPrefix: undefined
  • Category page:**
  • Category page:
  • Category page:
  • Category page:
  • etc ...
For a site where all categories are located under a specific path, the variable must be set to that path, for example:
  • navigationPagePathPrefix: '/en-gb/categories'
  • Category page:**
  • Category page:
  • etc ...
rating boolean True if ratings should be enabled in product cards.
theme SiteTheme An object containing look and feel for component rendering. For all options, see Theming API specification.

Last update: October 10, 2019