| |
|---|
| HTML tag | <tl-cart> |
| React | import { TlCart } from '@ticketlayer/elements-react' |
| Category | Cart |
| Runs in | web (browser DOM), native (planned React Native set) |
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 |
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; }> |
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.
Used by: <tl-cart-drawer>