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.

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.

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

The widgets are chunk of code that generates visualization into a website.  The website developer should define a container where the widget should take place and call the generation of the widget.To display a widget onto any website, you need to :

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

...

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.

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.

<div id="catalog_1"> </div>
< ... some website structure>
    <div id="product_1"> </div>
    <div id="product_2"> </div>
</ ... some website structure>

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

Get information

The information needed to To display a widget are of two kinds : global and local.The global , several informations are needed. In the linked documentation, you can find the mandatory and optional parameters.

Some 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.

...

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.

It takes an object as parameter that is described in the following 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)
	wdigets: a list of widget definition
}

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

<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_2',
			productId: '465488',
			occurrenceId: '1129848',
			showDescription: true,
			showImage: false
		},{
			widget: 'Catalog',
			root: '#catalog_1'
		}]
	});


	STX.Widgets.start({ 
</script>

The parameters depends on the widget shown. You can refer to the widget documentation.

...

		// 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_3',			// 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.