...
To display a widget, several informations are needed. In the linked documentation, you can find the mandatory and optional parameters required to properly setup every widget that is available.
Some information can be share shared between several widgets (hostname, apikey, language) and some other are specific to each widget (see below how to handle them).
...
Display a widget
The widget library export exports only one function, the magic called start. When the Widget.js script is loaded, you can access to all widgets by calling this function.
It This function takes an object as parameter that is , as described in the following code block.:
| Code Block | ||||
|---|---|---|---|---|
| ||||
{
hostname: string that represent the hostname of the internet point of sales (mandatory)
apiKey: string that contains the apikey linked to the internet point of sales (mandatory)
language: string representing the language in which the widgets should be displayed (optional, it takes the default institution language if not provided)
widgets: a list of widget definitiondefinitions
} |
The widget definition is an object that contains all the widget parameters . The widget name must be provided as widget related to the displayed widgets. A series of base parameters are mandatory: widget name (case sensitive), and container id (the container id must be provided as root. Then all other widget specific parametersid of the html container). Specific widget parameters have also to be included in the widget definition object.
Widget instantiation example
...
| Code Block | ||||
|---|---|---|---|---|
| ||||
<script type="text/javascript">
STX.Widgets.start({
// The hostname defined in the point of sales
hostname: 'thecube-special-cube.int2-host.shop.secutix.com',
apiKey: '8bafa660-8bc1-4982-83da-f15fce01f4ec',
language: 'fr',
widgets: [{
widget: 'Product', // the name of the widget
root: '#product_1', // the id of html tag above
productId: '4654654', // the id of the product
occurrenceId: '87846578', // the id of performance / match / slot
showActions: true, // parameters to show the actions
aspectRatio: 'VERTICAL' // how to display the picture
},{
widget: 'Product',
root: '#product_3',
productId: '465488',
occurrenceId: '1129848',
showDescription: true,
showImage: false
},{
widget: 'Catalog',
root: '#catalog_1'
}]
});
STX.Widgets.start({
// The hostname defined in the point of sales
hostname: 'thecube-special-cube.int2-host.shop.secutix.com',
apiKey: '8bafa660-8bc1-4982-83da-f15fce01f4ec',
language: 'en',
widgets: [{
widget: 'Product', // the name of the widget
root: '#product_2', // the id of html tag above
productId: '4654654', // the id of the product
occurrenceId: '87846578', // the id of performance / match / slot
showActions: true, // parameters to show the actions
aspectRatio: 'VERTICAL' // how to display the picture
}]
});
</script> |
...