Reference
<tl-my-orders>
The signed-in customer's orders: event, date, ticket count, total and status, each row expanding to its tickets.
| HTML tag | <tl-my-orders> |
| React | import { TlMyOrders } from '@ticketlayer/elements-react' |
| Category | Account |
| Runs in | web (browser DOM), native (planned React Native set) |
The signed-in customer's orders: event, date, ticket count, total and status, each row expanding to its tickets.
tl-my-orders - the signed-in customer's orders (GET /sales/my-orders through the SDK): event, date, ticket count, total and status per row. Clicking a row expands it to show the order's tickets (tl-order-tickets). Shows tl-login inline when nobody is signed in.
<tl-my-orders></tl-my-orders>Properties#
| Property | Attribute | Description | Type | Default |
|---|---|---|---|---|
columns | columns | Columns for the expanded ticket grid. | number | 2 |
emptyMessage | empty-message | Copy for the empty state. | string | "When you buy tickets they'll show up here, ready to view and download." |
unstyled | unstyled | Render into the light DOM with no stylesheet, for a page that styles the element itself: every node carries a tl-my-orders__* class. Without it the element is styled, and each node is a ::part() of the same name. | boolean | false |
Events#
| Event | Description | Type |
|---|---|---|
tlError | CustomEvent<{ message: string; }> | |
tlOrderSelect | CustomEvent<{ orderId: 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-order-tickets>, <tl-concierge-slot>, <tl-login>
Used by: <tl-concierge>