Reference
<tl-gift-card-shop>
Buy a gift card: choose the card, an amount it comes in, email or post (post only with a posted order), the recipient and a message, and add it to the basket.
| HTML tag | <tl-gift-card-shop> |
| React | import { TlGiftCardShop } from '@ticketlayer/elements-react' |
| Category | Purchase |
| Runs in | web (browser DOM), native (planned React Native set) |
Buy a gift card: choose the card, an amount it comes in, email or post
(post only with a posted order), the recipient and a message, and add it to
the basket. The cards in the basket are listed with a Remove each. The
cards in the basket are listed with a Remove each, and
tl-checkout-summary shows what they cost as its own row.
<tl-gift-card-shop></tl-gift-card-shop>Properties#
| Property | Attribute | Description | Type | Default |
|---|---|---|---|---|
buttonLabel | button-label | The add button's label; "Add £50.00 gift card to basket" when left empty. | string | '' |
heading | heading | The shop's heading. | string | 'Gift cards' |
productId | product-id | Show only this gift card (its id); every gift card on sale when left empty. | string | '' |
unstyled | unstyled | Render into the light DOM with no stylesheet, for a page that styles the element itself: every node carries a tl-gift-card-shop__* class. Without it the element is styled, and each node is a ::part() of the same name. | boolean | false |
Events#
| Event | Description | Type |
|---|---|---|
tlError | Emitted when the gift cards cannot be loaded or one cannot be added. | CustomEvent<{ message: string; }> |
tlGiftCardAdded | Emitted once a gift card is in the basket. | CustomEvent<TlGiftCardAdded> |
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.