Example and reference
| Latest version | Documentation |
|---|---|
| 2 | TODO: put link to demo deployment |
The easiest way to see what is a widget and how to include it in a page.
...
The widget library only contains a loader that will automatically load the widget definition when needed. You have to include the following script inclusion to get the
<scripttype="text/javascript"src="https://s3.eu-central-1.amazonaws.com/pub.tnwi.int1-s3.secutix.com/stx-widgets/Widgets.js"></script> |
This Widget file generate the STX global object that contains the widget library. The library contains only the library loading system. The needed script will be loaded automatically following the widgets declaration, taking only the needed widgets.
...
Anywhere in the website, you can include a HTML tag with an id that will be pass later to the widget definition
< ... the rest of the website> <div id="product_1"> </div> <div id="product_2"> </div> </ ... the rest of the website> |
Get information
The information needed to display a widget are of two kinds : global and local.
The global information can be shared between several widgets. Mainly the hostname, the apiKey and the language.
The local information are related to what is displayed. The id or code of object to display and also some control variables to define how to display them.
Show a widget
<scripttype="text/javascript"> STX.Widgets.start({ // The hostname defined in the point of sales hostname: 'thecube-special-cube.int2-shop.secutix.com', apiKey: '8bafa660-8bc1-4982-83da-f15fce01f4ec', widgets: [ { root: '#product_1', productId: '4654654', occurrenceId: '87846578', showActions: true, aspectRatio: 'VERTICAL' } , { root: '#product_2', productId: '465488', occurrenceId: '1129848', showDescription: true, showImage: false } ] }) </script> |