Script Initialisation¶

Web components¶

The first step in enabling the web components is to add the component library and initialisation code to the website. It is recommended to place them inside the <head>-tag.

<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>

Performance optimisation

The eSales Lifestyle components are often displaying critical content (e.g. search results). It is therefore important that the script is not blocked by other JavaScript code.

Use the defer attribute on all non-critical other script tags.
Include the eSales Lifestyle scripts as early as possible, before any non-critical scripts.
Keep the number and size of synchronous script tags low

Within this context, non-critical scripts refers to code not producing any critical visual changes.

Before the components can be used, they require an initialisation configuration. This is done via the esales.init function which will link the components to a specific eSales cluster and market. It is recommended to add this code snippet to a file, for example init-esales-lifestyle.js.

// init-esales-lifestyle.js
esales.init({
  webApiId: '{cluster-Id}',
  market: '{market}',
  searchPageUrlPrefix: 'https://www.esalesdrivensite.com/search',
});

When the above script has executed, the Web Components are bootstrapped and ready to be used. The full specification of the init parameters can be seen in the Library API.

Live sample integration¶

To view a sample integration, see Live examples.

Live examples

Note that the live examples are password protected. Retailers should contact their appointed Apptus Success Manager to gain access to password protected content.

Last update: December 1, 2020