<tl-ticket-selector>
Pick quantities of the ticket types on sale for one occurrence, priced with every fee in them, and add them to the cart.
| HTML tag | <tl-ticket-selector> |
| React | import { TlTicketSelector } from '@ticketlayer/elements-react' |
| Category | Purchase |
| Runs in | web (browser DOM), native (planned React Native set) |
Pick quantities of the ticket types on sale for one occurrence, priced with every fee in them, and add them to the cart.
What a row shows comes from the Live event view's offers: the
price with every fee in it and the fee lines under it (part breakdown),
the state with the buyer's reason (badge), "Few left" or "Limited" from
the capacity bucket, the limits per order (limits), and, for a locked
price, how to unlock it (unlock), with no stepper. An occurrence not on
sale says so above the rows (notice), with a countdown to the opening
(countdown) that reads the tickets again when it arrives. On an older
response the price is the face value and the rest is as before.
Properties#
| Property | Attribute | Description | Type | Default |
|---|---|---|---|---|
buttonLabel | button-label | Button label | string | 'Add to Cart' |
eventId (required) | event-id | Event ID | string | undefined |
occurrenceId (required) | occurrence-id | Occurrence ID | string | undefined |
showButton | show-button | Show add to cart button | boolean | true |
syncCart | sync-cart | Keep the cart in step with the steppers: start from what the cart holds for this occurrence and write each change to it, with no Add button | 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-ticket-selector__* class. Without it the element is styled, and each node is a ::part() of the same name. | boolean | false |
Events#
| Event | Description | Type |
|---|---|---|
tlAddToCart | Emitted when items are added to cart | CustomEvent<{ items: AddToCartItem[]; }> |
tlError | Emitted on error | CustomEvent<{ message: string; }> |
tlQuantityChange | Emitted when quantity changes | CustomEvent<{ ticketTypeId: string; quantity: number; total: number; }> |
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.
Methods#
syncToCart() => Promise<void>#
Write any press still waiting to the cart now, rather than a moment after
the last one, and resolve once the cart has it. For a sync-cart element
that something else moves on from (tl-buy-modal's Continue).
Returns#
Type: Promise<void>
Related elements#
Used by: <tl-buy-modal>