Full Fat Ticket Types Widget

The Full Fat ticket types widget allows customers to select the number of tickets they want, broken down by "ticket types" - i.e. for an adult, child or concession ticket. This functionality is only available for attractions.

Embedding the Widget

  1. Ensure you've got a valid channel id.
  2. Create a new html page and add the following markup, switching the configurable data in braces with your own.

<!doctype html>
<html lang="en">
    <title>Full Fat widget example</title>
        data-product-id="{id of product e.g. 1587 for "Wicked"}"
        data-product-type="{should be show/attraction}"
        data-date="{date of performance e.g 2022-09-30 }"
        data-venue-id="{ venue id for the performance}"
    <script type="text/javascript" src="https://inventory-service.tixuk.io/v5/js/quicksearch.js"></script>

Supported data attributes

In addition to the standard data attributes used by all Widgets, the following data attributes are used to customise the behaviour or 'look and feel' of the Full Fat widget.

NameMandatoryTypeSourced from Query StringDescription
data-appYesStringn/aIndicates the host app to communicate with.
It should be "inventory-app"
data-view-nameYesStringn/aView name of specific widget. For new FF calendar it should be full-fat-types-with-summary
data-product-idYes*Numberproduct_idIdentifier of the product Id using for requests.

*Data-attr can be omitted in favour of property being supplied via query string. Query string values override data-attrs.
data-product-id-for-contentNo*Numbercontent_product_idIdentifier of the product for content-service api calls.
Default value: data-product-id

* Data-attr can be omitted in favor of property being supplied via query string. Query string values override data-attrs.
data-channel-idYesStringn/aThe id of the affiliate for which the embedding context (i.e. website) belongs.
data-api-pathYesStringn/aThe host for the data service to use. This should be the fully qualified domain for the relevant capability service.
Example: https://inventory-service.tixuk.io/
data-action-urlNoStringn/aDestination to redirect to on full fat submission.
Example: http://your-website-url/destination-page.html
data-css-modeNoStringn/aThe CSS to be applied to the widget. Valid values are:
- full (default)
- grid
- min
data-labels-configNoJSON Objectn/aSet of labels to use for the Full Fat Calendar. See "Configuring labels" below for more details.
data-dateYesDatedateDate of performance

* Data-attr can be omitted in favour of property being supplied via query string. Query string values override data-attrs.
data-slotYesStringslotThis is time of selected performance. It can be not provided if attraction has "all-day" type, i.e. customer can visit place during all working day of performance date. If attraction has specific performance times this value should be provided.

* Data-attr can be omitted in favour of property being supplied via query string. Query string values override data-attrs.
data-venue-idNo*Stringvenue_id* If a data-product-id is supplied, the corresponding venue id for the product must be supplied.**
data-user-localeNoStringn/aA string indicating language for labels display (check "configuring labels" section below)
data-show-spinner-during-widget-loadingNoBooleann/aIf set to true shows spinner during widget loading (currently applies for Quick Search widget only)
data-disable-redirect-on-errorNoBooleann/aWhen error occurs, popup appears and in several seconds redirect to homepage happens.

In order to prevent redirect, this attribute shold have "true" value.
data-quantityNoNumberqtNumber of tickets which the widget should display as selected by default e.g. "2". (should be in range 1 - 10)

Configuring labels

The full fat ticket types widget comes with some default text labels, but these can be customised to your liking. To do so, use the "data-labels-config" attribute, like so:

      "singleTicketLabel": { "en-US": "[T] Ticket" },
      "multipleTicketsLabel": { "en-US": "[T] Tickets" },
      "fullFat": {
        "timeSlotBlockTitle": { "en-US": "[T] Select a performance time" },
        "timeSlotLabelForUnselectedTime": { "en-US": "[T] Please select a time" },
        "timeSlotSelectDefaultOption": { "en-US": "[T] Choose a time slot" },
        "timeSlotTimeAttractionTitle": { "en-US": "[T] Time of attraction" },
        "timeSlotTitle": { "en-US": "[T] Time slot" },
        "nextStepButton": { "en-US": "[T] Continue to next step" },
        "summaryTitle" : { "en-US": "[T] Your basket" },
        "infoBlockTitle": { "en-US": "[T] Need some help?" },
        "attractionTitle": { "en-US": "[T] Attraction date" },
        "timeSlotErrorForUnselectedTime": { "en-US": "[T] Please select a time of attraction" },
        "alertCancelButton": { "en-US": "[T] Dismiss" },
        "numberOfTicketsPlaceholder": { "en-US": "[T] Please select a ticket" },
        "numberOfTicketsTitle": { "en-US": "[T] Select a number of tickets" },
        "numberOfTickets": { "en-US": "[T] Number of tickets" },
        "quantityExtended": { "en-US": "[T] Please select a quantity" },
        "childrenWithoutAdults": { "en-US": "[T] Children must be accompanied by an adult" },
        "tryAgain": { "en-US": "[T] Please try again" }