<tl-best-available>
The best seats for a party: a few options that differ (the best, a cheaper one, one closer or further back), each with the view from it, the row and seats, why it was chosen and the price.
| HTML tag | <tl-best-available> |
| React | import { TlBestAvailable } from '@ticketlayer/elements-react' |
| Category | Purchase |
| Runs in | web (browser DOM), native (planned React Native set) |
The best seats for a party: a few options that differ (the best, a cheaper
one, one closer or further back), each with the view from it, the row and
seats, why it was chosen and the price. Hovering an option rings its seats
on tl-seat-explorer; taking it holds them and pins the seat card. "How
many tickets?" and the preferences sit above the options unless turned off,
and follow the same choices wherever else they are placed on the page.
Properties#
| Property | Attribute | Description | Type | Default |
|---|---|---|---|---|
eventId | event-id | The event, for its prices | string | undefined | undefined |
occurrenceId (required) | occurrence-id | The occurrence to find seats in | string | undefined |
options | options | How many options to show | number | 3 |
quantity | quantity | How many tickets to start with | number | 2 |
showPreferences | show-preferences | Show the preferences under "How many tickets?" | boolean | true |
showQuantity | show-quantity | Show "How many tickets?" above the options | boolean | true |
staff | staff | Box office mode: one option at a time with "Next best", a keypad for how many, the channel's own number of options, and a single seat gap sold after a confirm where the client allows it | boolean | false |
unstyled | unstyled | Render into the light DOM with no stylesheet, for a page that styles the element itself: every node carries a tl-best-available__* class. Without it the element is styled, and each node is a ::part() of the same name. | boolean | false |
Events#
| Event | Description | Type |
|---|---|---|
tlError | Suggestions could not be found, or an option could not be held | CustomEvent<{ message: string; }> |
tlOptionSelect | An option was taken and its seats are held | CustomEvent<{ seats: number[]; facet: string; }> |
Events are CustomEvents; the payload is on event.detail. In HTML, listen with element.addEventListener('tlXxx', handler); in React the wrapper exposes each one as an onTlXxx prop.
Related elements#
Renders: <tl-quantity-picker>, <tl-seat-preferences>
Used by: <tl-buy-modal>