🚧
This widget is deprecated. Please speak to your account manager about an alternative solution.

Embedding the Widget

Ensure you've got a valid affiliate id.
Create a new html page and add the following markup:

<!doctype html>
<html lang="en">
  <head>
    <title>Search results with filters widget example</title>
  </head>
  <body>
    <div
        data-app="search-app"
        data-affiliate-id="encoretickets"
        data-pre-filter="NOT affiliate_blacklist"
        data-view-name="search-results-with-filters"
        data-use-url="true"
        data-limit-results="30"
        data-show-more-url="/london/latest-shows"
    ></div>
     <!-- js -->
    <script type="text/javascript" src="https://search-service.tixuk.io/vLatest/js/search-app.js"></script>
  </body>
</html>

Supported data attributes

In addition to the standard search data attributes, the following data attributes are used to customise the behaviour or 'look and feel' of the Input Search widget.

Name	Mandatory	Type	Description
data-view-name	yes	string	Title of special widget's view user wants to insert. Represent widget type. There are several views: input-search search-results search-results-with-filters search-cta In case of this widget "search-results-with-filters" should be used. Example: data-view-name="input-search"
data-use-url	No	String (Bool)	Where this attribute is set to true, the url in the browser address will dynamically update as the user applies filters, sorts, etc. This allows a page to be bookmarked or 'deep linked' into.
data-custom-calendar-config	No	String (JSON)	Should be a stringified object which setting calendar rules. Options can be found here Example: { "locale": { "firstDayOfWeek": 0, "weekdays": { "shorthand": [ "Su", "Mo", "Tu", "We", "Th", "Fr", "Sa" ][ "Su", "Mo", "Tu", "We", "Th", "Fr", "Sa" ] } } }

Name

Mandatory

Type

Description

data-view-name

yes

string

Title of special widget's view user wants to insert. Represent widget type.

There are several views:

input-search
search-results
search-results-with-filters
search-cta
In case of this widget "search-results-with-filters" should be used. Example:

data-view-name="input-search"

data-use-url

String (Bool)

Where this attribute is set to true, the url in the browser address will dynamically update as the user applies filters, sorts, etc. This allows a page to be bookmarked or 'deep linked' into.

data-custom-calendar-config

String (JSON)

Should be a stringified object which setting calendar rules. Options can be found here
Example:
{
"locale": {
"firstDayOfWeek": 0,
"weekdays": {
"shorthand": [
"Su",
"Mo",
"Tu",
"We",
"Th",
"Fr",
"Sa"
][
"Su",
"Mo",
"Tu",
"We",
"Th",
"Fr",
"Sa"
]
}
}
}