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.


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.

  <script src="" type="module"></script>
  <script src="" nomodule defer></script>
  <script src="init-esales-fashion.js" defer></script>

Performance details and more information

The eSales Fashion components are often displaying critical content (e.g. search results). It is therefore important that the script is not blocked by other JavaScript code. A few things to keep in mind:

  • Use the defer attribute on all non-critical script tags.
  • Include the eSales Fashion 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 primarily to code that does not produce any visual change for content above the fold. For example, scripts for social sharing features and visitor tracking can often be delayed until the page is rendered before they run.

For more information about script syntax and performance suggestions, see Dive Deeper.

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-fashion.js.

// init-esales-fashion.js
  webApiId: '{cluster-Id}',
  market: '{market}',
  productPageUrlPrefix: '',
  searchPageUrlPrefix: '',
  navigationPagePathPrefix: ''

When the above script has executed, the Web Components are bootstrapped and ready to be used.

Init parameters

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.
webApiId string The Web API cluster Id. The Id points the script to the retailers eSales service from where data should be fetched.
navigationPagePathPrefix string The navigation page path prefix tells the script the path of where category pages are available. It must be set to be able to use category navigation.
The navigationPagePathPrefix must not end with /.
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 /.
searchPagePathPrefix string The search page path prefix tells the script the path of where a search page is available. It must be set for search related navigation to be done correctly.
The searchPagePathPrefix must not end with /.
illegalCharacters string[ ] Defines the characters that should be filtered out in search related requests.
touchPoint undefined, DESKTOP, MOBILE Tells the script if the touch point should automatically be detected by eSales Fashion or forced as desktop or mobile mode. Recommended to be left as undefined (i.e. automatic detection) unless there is a need to force a touch point.
rating boolean Tells the script if ratings for products should be displayed.
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 .
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 Apps.
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 Apps.

Live sample integration

A simplified example integration using search components can be tested using this JSFiddle set-up. Make sure to replace the webApiId with the Web API cluster ID received from Apptus and press Run.

Last update: March 20, 2020