The Seat Attributes widget is a configurable widget which can retrieve and display seat attributes.
An example can be found here.
Embedding the widget
To embed the Seat Attributes widget:
- Create a new HTML page and add the following markup:
<!doctype html>
<html lang="en">
<head>
<title>Seat Attributes example</title>
</head>
<body>
<div
class="venue__seat-attributes"
data-app="seat-attributes-app"
data-mode="popup"
data-venue-id="{venue-id}"
data-performance-date="{performance-date}"
data-performance-time="{performance-time}"
data-range-of-seats="{JSON object representing seats selected}"
data-mode="thumbnail"
></div>
<script type="text/javascript" src="https://venue-service.tixuk.io/v4/js/venue-seat-attributes.js"></script>
</body>
</html>
- This will display the Seat Attributes widget, allowing users to see any specific seat attribute information.
Supported data attributes
In addition to the standard data attributes used by all widgets, the following data attributes are used to customise the behaviour of the Seat Attributes widget.
Seat Attributes can be configures in two different ways:
Method 1: Configure widget by providing performance and range information
For use when you need to fetch the seat attribute information of a particular performance seat range.
Name | Mandatory | Type | Description |
---|---|---|---|
data-channel-id | Yes | String | Identifier of the affiliate. |
data-venue-id | Yes | String | Identifier of the venue. |
data-range-of-seats | Yes | String (JSON object) | Identifies seats. |
data-mode | No | String | Identifies mode. Available options: default, popup |
data-defer-rendering | No | Boolean | Defer rendering until user call venue-apprender event. _Example: window.dispatchEvent(new CustomEvent('venue-app_render')) |
data-custom-styles | No | String (JSON object) | Object accepts property "seatAttrMaxHeight" (only for non-popup view) which establish height of seat-attrbiutes container. Example: data-custom-styles='{ "seatAttrMaxHeight": "auto" }' or data-custom-styles='{ "seatAttrMaxHeight": "50px" }' |
Method 2: Configure widget by passing seats-attribute information
For use when you have your seat-attribute information and want this presented in the widget.
Name | Mandatory | Type | Description |
---|---|---|---|
data-seat-attributes | Yes | String | Identifies seat attribute information. |
data-mode | No | String | dentifies mode. Available options: default, popup |
data-range-of-seats | Yes | String (JSON object) | Identifies seats. |
data-defer-rendering | No | Boolean | Defer rendering until user call venue-apprender event. _Example: window.dispatchEvent(new CustomEvent('venue-app_render')) |