The Seat Summary widget represents data about seats that you chose in the Seat Plan or Seat List widget.
Note: you can add only one reservation per basket. In case you are trying to add more items to the existing basket, you will see a warning popup.
Embedding the widget
To embed the Seat Summary widget:
- Ensure you've got a valid channel Id. This should be provided to you as part of your account setup.
- Create a new HTML page and add Seat Plan or Seat List widget.
- Extend your page with the following markup:
<div
data-app="seat-summary-app"
data-channel-id={your-channel-id}
data-performance-type={A|M|E}
data-performance-date={date of performance e.g. 2020-10-10}
data-performance-time={time of performance e.g. 19:30}
data-redirect-url={url where the booking will be made e.g. http://your-website-url}
data-seats={selected seats}
></div>
<script type="text/javascript" src="https://venue-service.tixuk.io/v4/js/venue-seat-summary-app.js"></script>
- This will display the Seat Summary widget that will display details of the selected seat and provide a button to add these to their basket.
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 Summary widget.
Name | Mandatory | Type | Sourced from Query String | Description |
---|---|---|---|---|
data-app | Yes | String | n/a | Indicates the host app to communicate with. Example: seat-summary-app |
data-channel-id | Yes | String | n/a | The id of the affiliate for which the embedding context (i.e. website) belongs. |
data-redirect-url | No | String | n/a | Identifies the URL that will be opened after a click on "Add to button" |
data-performance-date | Yes* | Date | date | Date of the performance in the format YYYY-MM-DD e.g. 2019-01-10. * Data-attr can be omitted in favor of property being supplied via query string. Query string values override data-attrs. |
data-performance-time | Yes* | Time | slot | Start time of the performance in 24-hour format HH:MM e.g. 19:30. * Data-attr can be omitted in favor of property being supplied via query string. Query string values override data-attrs. |
data-performance-type | No* | String | performance_type | Indicates the type of performance, based on the part of day. Valid values are:A - indicates "all"M - indicates "matinee"E - indicates "evening"* Data-attr can be omitted in favour of property being supplied via query string. Query string values override data-attrs. |
data-suppress-addtobasket | No | Boolean | n/a | Suppresses the redirection on add to basket CTA to allow custom handling of users selected ticket data. Default value: False Event: venue-app_selected-seats-summary-on-addtobasket |
data-seats | No | String (JSON object | n/a | Identifies data about selected seats. |
data-user-locale | No | String | n/a | Identifies user locale for labels from data-labels-config. Used to format prices for custom currencies ('en-GB' used by default). |
data-labels-config | No | String (JSON Object) | n/a | Identifies user labels. |
data-defer-rendering | No | Boolean | n/a | Defer rendering until user call venue-apprender event. _Example: window.dispatchEvent(new CustomEvent('venue-app_render')) |
data-disable-seat-plan-height-calculation | No | Boolean | n/a | Disable automatic Seat Plan height calculation |
Listening to events
The following events are raised by the Seat Summary widget:
Event | Description |
---|---|
venue-app_selected-seats-summary-on-addtobasket | Raised on add to basket submission |
The following events can be called to communicate with Seat Summary widget:
Event | Description |
---|---|
venue-app_on-seats-deselection | Clear current seat selection |
Example code for listening to these events (and logging to console):
window.addEventListener("venue-app_selected-seats-summary-on-addtobasket", function(e) {
console.log("venue-app_addtobasket-submit-IT", e);
});
Configuring labels
The Seat Summary widget comes with some default text labels, but these can be customized to your liking. To do so, use the "data-labels-config" attribute, like so:
<div
data-app="seat-summary-app"
data-channel-id="encoretickets"
data-performance-type="A"
data-performance-date="2020-03-21"
data-performance-time="19:30"
data-redirect-url=""
data-user-locale="en-GB"
data-labels-config='{
"seatSummary":{
"seats":{
"en-GB":"Seats",
"it-IT":"Sedili"
},
"restrictedView":{
"en-GB":"Restricted view",
"it-IT":"Visione limitata"
},
"sideView":{
"en-GB":"Side view",
"it-IT":"Vista laterale"
},
"seatPrice":{
"en-GB":"Seat price",
"it-IT":"Prezzo del posto"
},
"noBookingFee":{
"en-GB":"No booking fee",
"it-IT":"Nessuna commissione di prenotazione"
},
"addToBasket":{
"en-GB":"Add to basket",
"it-IT":"Aggiungi al carrello"
}
}
}' />