Skip to content

Library API

Installation

The library is hosted at https://cdn.esales.apptus.com/integration/v1/. Two versions of the library are available; one for modern browsers and one that supports legacy browsers.

Modern (es2015)

Modern browsers include all that support EcmaScript version 2015 (6). The majority of users are running modern versions of Google Chrome, Mozilla Firefox, Microsoft Edge, or Apple Safari.

Performance gains

For sites where dropping legacy browser support is an option, use the script for modern browsers. This script is smaller and can be executed faster which yields performance gains.

Dropping support for legacy browers also encourages and enables progress in the web development community. It is encouraged to be dropped for the greater good, helping developers around the world.

Legacy (es5)

Legacy browsers include browsers that support EcmaScript version 5. This includes modern browsers as well as older browsers such as Apple Safari 9 and Microsoft Internet Explorer 11.

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-fashion.js library from the CDN. It`s 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.site.com/products',
  searchPageUrlPrefix: 'https://www.site.com/search',
  navigationPagePathPrefix: '/en-gb/categories',
  rating: true,
  theme: {
    fontFamily: 'Roboto, sans-serif'
  }
});
</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 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.
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 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: 'https://www.site.com/product'
  • Product URL in feed: /P123456789
  • URL result: https://www.site.com/product/P123456789
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: https://www.site.com/**
  • Category page: https://www.site.com/men
  • Category page: https://www.site.com/men/trousers/shorts
  • Category page: https://www.site.com/women
  • 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: https://www.site.com/en-gb/categories/**
  • Category page: https://www.site.com/en-gb/categories/men
  • 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.
×
Copyright

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.

CLOSE