<tl-promo-code>
Apply a code to the current cart: what it unlocks, discounts or waives is that cart's and its order's.
| HTML tag | <tl-promo-code> |
| React | import { TlPromoCode } from '@ticketlayer/elements-react' |
| Category | Purchase |
| Runs in | web (browser DOM) |
Apply a code to the current cart: what it unlocks, discounts or waives is that cart's and its order's.
tl-promo-code - an input plus Apply button that applies a code to the current cart (POST /sales/carts/{cartId}/codes through the SDK's cart.applyCode). What the code unlocks, discounts or waives is that cart's and its order's; nothing is granted to the buyer, so a guest can use one. The SDK publishes cart:updated with the cart the API answered, so tl-cart and badges re-render on their own.
The applied state offers "use a different code", which clears the input for another code and leaves the first on the cart.
<tl-promo-code></tl-promo-code>Properties#
| Property | Attribute | Description | Type | Default |
|---|---|---|---|---|
buttonLabel | button-label | Apply button label. | string | 'Apply' |
collapsible | collapsible | Start as a "Have a code?" link that opens the input when pressed. | boolean | false |
placeholder | placeholder | Input placeholder. | string | 'Promo or presale code' |
unstyled | unstyled | Render into the light DOM with no stylesheet, for a page that styles the element itself: every node carries a tl-promo-code__* 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; }> | |
tlPromoApplied | CustomEvent<TlPromoApplied> |
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#
Used by: <tl-buy-modal>