Reference
<tl-cart>
The buyer's cart: its lines, the money rows the surface reported and a checkout button.
| HTML tag | <tl-cart> |
| React | import { TlCart } from '@ticketlayer/elements-react' |
| Category | Cart |
| Runs in | web (browser DOM), native (planned React Native set) |
The buyer's cart: its lines, the money rows the surface reported and a checkout button.
Properties#
| Property | Attribute | Description | Type | Default |
|---|---|---|---|---|
checkoutLabel | checkout-label | Checkout button label | string | 'Checkout' |
compact | compact | Compact mode - hides some details | boolean | false |
showCheckoutButton | show-checkout-button | Show checkout button | boolean | true |
showRemoveButtons | show-remove-buttons | Show remove item buttons | boolean | true |
unstyled | unstyled | Render into the light DOM with no stylesheet, for a page that styles the element itself: every node carries a tl-cart__* class. Without it the element is styled, and each node is a ::part() of the same name. | boolean | false |
Events#
| Event | Description | Type |
|---|---|---|
tlCartUpdated | Emitted when cart is updated | CustomEvent<{ cart: TlCartData; }> |
tlCheckout | Emitted when checkout is clicked | CustomEvent<{ cart: TlCartData; }> |
tlError | Emitted on error | CustomEvent<{ message: string; }> |
tlItemRemoved | Emitted when item is removed | CustomEvent<{ itemId: string; }> |
tlSeatRemoved | Emitted when a held seat is given back | CustomEvent<{ occurrenceId: string; seat: 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.
Related elements#
Renders: <tl-price-picker>
Used by: <tl-buy-modal>, <tl-cart-drawer>