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-fashion.js" type="module"></script>
  <script src="https://cdn.esales.apptus.com/integration/v1/esales-fashion.es5.js" nomodule defer></script>
  <script src="init-esales-fashion.js" defer></script>
</head>

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
esales.init({
  webApiId: '{cluster-Id}',
  market: '{market}',
  productPageUrlPrefix: 'https://www.esalesdrivensite.com/product/',
  searchPageUrlPrefix: 'https://www.esalesdrivensite.com/search',
  navigationPagePathPrefix: 'https://www.esalesdrivensite.com/categories'
});

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

Init parameters

Parameter Type Description
market string Market for the site, can be set either statically or dynamically depending on how markets are handled on the site.
webApiId string Id of web-api, tells the script whose data should be fetched.
navigationPagePathPrefix string Navigation page path prefix tells the script the path of where category pages are available. It needs to be set to be able to use category navigation.
productPagePathPrefix string Product page path prefix tells the script the path of where a product page is available. It needs to be set for fallback solution for retrieving product keys.
searchPagePathPrefix string Search page path prefix tells the script the path of where a search page is available. It needs to be set for search-related navigation to be done correctly.
illegalCharacters string[ ] 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 undefined (automatic detection) unless there is a need to force a touch point.
rating boolean Tells the script if ratings for products should be displayed.

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.

×
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