Example and reference

The easiest way to see what is a widget and how to include it in a page.

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.

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.

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

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

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

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

<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',
		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'
		}]
	});

</script>

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

Each time you call the STX.Widgets.start(), you create a new group of widgets. The widgets inside a group must be of the same host