Versions Compared

Old Version 1

changes.mady.by.user Lennart BOSCHE

Saved on

compared with

New Version Current

changes.mady.by.user Lennart BOSCHE

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

Example and reference

The easiest way to see what is a widget and how to include it in a page. In the documentation linked, you can see the list of supported widgets (from version 2), an example of use and the code related.

You can play with the parameters and adapt the values to see the result. You can enter your own values, except if you added a domain restriction on the widgets.

Version

Documentation

2

TODO : change for prod doc on demo

Widgets list		https://mosa.demo-widgets.secutix.com/stx-widgets/v2/index.html


Introduction

The widget are small chunk of SecuTix that you can include in any website. Linked to an internet point of sales inside SecuTix, it allows to present products, section or catalog in an adaptive way.

Basic concepts

In any website,you may reserve space to display one of the Secutix widget. Like advertisement or highlightment of some products.

...

  1. Include the widget library
  2. Create an html container with an id for each widget 
  3. Get the information related to the widget
  4. Instantiate the widget


Include the widget library

The widget library only contains a loader that will automatically load the widget definition when needed. You only have to include the following script inclusion to get access to all widgets.
Include script

...

This Widget file generate the STX global object that contains the widget library. The library contains only the library loading system.

Create a HTML container

Anywhere in the website, you can include a HTML tag with an id that will be pass later to the widget definition. To ensure structure to the website, you may define size and position of the container. The widgets will adapt to the container.
Exemple of container

...

For each widget instance, you need to create a specific container that cannot be reused. 

Get information

To display a widget, several informations are needed. In the linked documentation, you can find the mandatory and optional parameters.

Some information can be share between several widgets (hostname, apikey, language) and some other are specific to each widget (see below how to handle them)


Show a widget

The widget library export only one function, the magic start. When the Widget.js script is loaded, you can access to all widgets by calling this function.

...

The widget definition is an object that contains the widget parameters. The widget name must be provided as widget (case sensitive), the container id must be provided as root. Then all other widget specific parameters.

Widget instantiation example



Code example

<script type="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',
        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-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>

In the previous example, there are two groups of widgets. Widgets that are inside a group must share the same global definition (ie. : localhost, apiKey, language). For each set of global info, you have to create a new group by using the function start again as shown in the example.


Additionnal information

Domain restrictions 

It can be configured in the point of sales definition : 

...