Full Fat Summary Widget

The Full Fat summary widget displays a neat container of product information, designed to accompany the Full Fat calendar widget. It is useful to help indicate exactly which product is being view in the calendar.

You can check out a working demo here.

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">
  <head>
    <title>Full Fat Summary widget</title>
  </head>
  <body>
    <div
        data-app="inventory-app"
        data-channel-id="{your-channel-id}"
        data-view-name="full-fat-summary"
        data-product-id="{id of product e.g. 1587 for "Wicked"}"
        data-product-type="{should be show/attraction}"
        data-api-path="https://inventory-service.tixuk.io"
    ></div>
    <script type="text/javascript" src="https://inventory-service.tixuk.io/v5/js/quicksearch.js"></script>
  </body>
</html>

If you want to render the full fat summary widget along with the full fat calendar widget, you should specify the"full-fat-calendar-with-summary" view. Check here for more 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 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. Should be "full-fat-summary"
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-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-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-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-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 the language which should be used for displaying labels (see the "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.

Configuring Labels

The full fat summary 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:


<div
          data-app="inventory-app"
          data-view-name="full-fat-summary"
          data-channel-id="encoretickets"
          data-product-type="attraction"
          data-product-id="1898"
          data-api-path="https://inventory-service.qatixuk.io"
          data-user-locale="en-GB"
          data-labels-config='{
              "fullFat": {
                "summaryTitle": { "en-GB": "[T] Your basket" },
                "infoBlockTitle": { "en-GB": "[T] Need some help?" },
                "infoBlockHtml": { "en-GB": "[T] Get in touch with us on <a href=\"tel:+4402074001255;\">+44 (0)20 7400 1255</a>
 our knowledgeable staff are on hand to help you with your order.</br> <span class=\"br-line\" /> Lines are open <b>Mon</b> to <b>Fri 8am-8pm</b>, <b >Sat 9am-7.30pm</b> and <b >Sun 9am-7pm</b>" }
              }
            }'

>
</div>

summaryTitle

Title of full fat summary

infoBlockTitle

Title of help text container

infoBlockHtml

Info in help text container. Should be set as html element