Build your own product catalogue page with our flexible and responsive Product Widget

Following the same concept as the Insert our Newsletter Widget on any website, the Product Widget is a simple code snippet which you can easily integrate into any website. With our flexible and responsive Product Widget, you can easily build a product catalogue page with your own style on your own website. The latest product information presented inside the widget will be automatically fetched from the catalogue of the corresponding SecuTix online sales platform. No more manual copy/paste and maintenance of the product information is needed!

How does it work?

To use a product widget, you first need to integrate a code snippet into your target website. You may either contact your web agency to embed the snippet into your website's HTML code or integrate it via Google Tag Manager. The code snippet will first call the SecuTix back-end service to fetch the necessary configurations (e.g. theme and labels) and product information (e.g. name, image, date, supported action buttons, etc.) from the catalogue of the corresponding online sales platform. Then it will render the user interface of the widget and present the product information based on your configuration. Like the newsletter widget, the default style and theme of the product widget are the same as the ones from the corresponding online sales platform. You may also override the styles via custom CSS. 

Example

Here is an example of a custom product catalogue page built using multiple product widgets with various initialisation parameters.

Sample code snippet

<div id="stx-product" class="product"></div>
<script type="text/javascript" src="https://s3.eu-central-1.amazonaws.com/pub.tnwi.p16-s3.secutix.com/stx-widgets/Product/v1/Product.js"></script>
<script type="text/javascript">
         STX.config({apiKey:"8bafa660-8bc1-4982-83da-f15fce01f4ec", hostname:"hostname of your online sales platform"});
         STX.widgets.Product.render({
         props: {
                 productId:'your product ID',
                 occurrenceId: 'your performance or timeslot ID',
         aspectRatio:'VERTICAL',
         showActions: false,
         showText: true,
         showImage: true
                  }, }, 
         locale:"en", 
         root:"#stx-product"});
</script>

Parameters

• apiKey - the secret token generated in your point of sale configuration screen. You may find this parameter in the Sales Channels > Point of sales > Characteristics > Internet Parameters tab.

  

• hostname - the hostname of the point of sales URL for your online sales platform. 

  Please note that the product widget will fetch the configurations (e.g. theme and label overriding) from the corresponding point of sale.

• productId - the Id of the product that you want to display inside the widget.

  Please note that the product widget will fetch the product information (e.g. name, image, date, supported action buttons, etc.) from the corresponding point of sale.

• occurrenceId - (Optional) the Id of the performance or timeslot that you want to display inside the widget. When this parameter is set, the product widget will display the start date and time of the corresponding occurrence (i.e. performance or timeslot). If not set, it will just display a date range between the first occurrence and the last occurrence of the corresponding product.
• aspectRatio - (Optional) the aspect ratio of the product image displayed inside the widget. Supported values are "VERTICAL","HORIZONTAL", "WIDE", "SQUARE" and "LANDSCAPE". The default value is "VERTICAL".
• showActions - (Optional) whether or not the product widget should display action buttons. The default value is "false". Supported action buttons are:
  • "Buy", if online sale is enabled for the corresponding product;
  • "Reserve", if online booking is enabled for the corresponding product;
  • "Option", if online quote is enabled for the corresponding product.
• showText - (Optional) whether or not the product widget should display text. The default value is "true".
• showImage - (Optional) whether or not the product widget should display a product image. The default value is "false".
• locale - (Optional) the language code which defines the language of the product widget. When not set, the widget will use the main institution language by default.