Skip to content

Script Initialisation

Web components

The first step in enabling the web components is to add the component library using the script tags below to the web page. It is recommended to place them inside the <head> tag.

<head>
  <script src="https://cdn.esales.apptus.com/integration/v1/esales-fashion-polyfills.es5.js"></script>
  <script src="https://cdn.esales.apptus.com/integration/v1/esales-fashion.es5.js"></script>
</head>

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. This API will be available after the above script tags are executed.

<script>
  esales.init({
    webApiId: '{cluster-Id}',
    market: '{market}',
    productPageUrlPrefix: 'https://www.site.com/product/',
    searchPageUrlPrefix: 'https://www.site.com/search',
    navigationPagePathPrefix: 'https://www.site.com/categories'
  });
</script>

When the above script has executed, the Web Components should be 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 avaible. 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 avaible. 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 avaible. 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 sample 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