Reference
<tl-delivery-picker>
The checkout's Delivery section: how the tickets reach the buyer, each method with what it adds, and the reason beside one that cannot be chosen.
| HTML tag | <tl-delivery-picker> |
| React | import { TlDeliveryPicker } from '@ticketlayer/elements-react' |
| Category | Checkout |
| Runs in | web (browser DOM), native (planned React Native set) |
The checkout's Delivery section: how the tickets reach the buyer, each
method with what it adds, and the reason beside one that cannot be chosen.
Choosing re-prices the cart's quote. While email is the one method the
section answers itself and folds to "Email, Free". Choosing writes it to
the cart (PUT /sales/carts/{cartId}/choices) and tl-checkout-summary
re-prices from the quote.
<tl-delivery-picker></tl-delivery-picker>Properties#
| Property | Attribute | Description | Type | Default |
|---|---|---|---|---|
autoChoose | auto-choose | Choose the only method that can be chosen when nothing is chosen yet, so the quote includes it. | boolean | true |
collapse | collapse | Fold the section to one line when its only method is chosen, with Change when there is more to see. | boolean | true |
heading | heading | The section's heading. | string | 'Delivery' |
unavailable | unavailable | Which methods that cannot be chosen are shown, disabled with the reason: relevant (closed by a cut-off, business customers only), all, or none. | "all" | "none" | "relevant" | 'relevant' |
unstyled | unstyled | Render into the light DOM with no stylesheet, for a page that styles the element itself: every node carries a tl-delivery-picker__* class. Without it the element is styled, and each node is a ::part() of the same name. | boolean | false |
Events#
| Event | Description | Type |
|---|---|---|
tlDeliveryChosen | Emitted once a delivery method is chosen, with the re-priced total. | CustomEvent<{ method: string; total: number | null; }> |
tlError | Emitted when a choice is refused or the options cannot be read. | CustomEvent<{ message: 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.