Every block at a glance, from the event list through ticket selection to the checkout and the tickets after buying.
All blocks are called ts-… and work individually and in any order. Text blocks only deliver the plain text, so you decide what goes around it: <h1><ts-event-title></ts-event-title></h1> or <span class="title"><ts-event-title></ts-event-title></span>.
Blocks that belong to an event sit inside a <ts-event>. Blocks with no content stay empty and take up no space.
Around the shop
| Block | What it shows |
|---|
ts-shop-name | Your workspace's name (text) |
ts-shop-logo | Logo as an image |
ts-shop-headline | Heading of the event overview (text) |
ts-shop-intro | Intro of the event overview |
ts-shop-gallery | Gallery images |
ts-shop-sponsors | Sponsors for all pages, by tier |
ts-shop-social | Links to your profiles |
ts-shop-support | Contact for buyers |
ts-legal-links | Links to imprint, terms, privacy and withdrawal |
ts-legal | One legal text, with page="imprint", terms, privacy or withdrawal |
ts-language-switch | Language choice |
ts-link | Link to a page, with to="events", vouchers, account, event, and optionally label="Your text" |
ts-powered-by | Optional note "Tickets by TickySmart" |
Finding events
| Block | What it shows | Attributes |
|---|
ts-event-list | Upcoming events | category, limit, your own layout with <template> |
ts-event-filter | Category filter, works on list and calendar | |
ts-event-calendar | Monthly calendar with all dates | category, month="2027-03" |
Examples are under Event list and calendar.
One event
| Block | What it shows |
|---|
ts-event | Wrapper: slug="summer-fest", without slug the event from the address |
ts-event-title | Title (text) |
ts-event-link | Link to the event, text is the title or label |
ts-event-cover | Cover image |
ts-event-category | Category (text) |
ts-event-date | Next date (text) |
ts-event-time | Time and doors (text) |
ts-event-venue | Venue and city (text) |
ts-event-price | "From" price (text) |
ts-event-age | Age limit (text) |
ts-event-status | Note if cancelled, over, sales ended or paused |
ts-event-facts | Date, venue and age at a glance |
ts-event-description | Description |
ts-event-links | Further links |
ts-event-video | Video, loads nothing from YouTube or Vimeo until clicked |
ts-event-lineup | Line-up with image, time and links |
ts-event-hours | Opening hours for time slots |
ts-event-dates | All dates with "Add to calendar" |
ts-event-season-dates | Dates of a season ticket |
ts-event-location | Address, route, website, description and images of the venue |
ts-event-faq | Questions and answers |
ts-event-sponsors | Sponsors of this event |
ts-event-seasons | Season tickets that include this event |
ts-event-seo | Structured data for search engines, shows nothing |
ts-event-missing | Note if the event doesn't exist |
ts-event-page | The whole event page at once |
Choosing tickets
| Block | What it shows |
|---|
ts-ticket-selector | Everything below together, behind the waiting room |
ts-waiting-room | Waiting room, if one is running. Your child elements only appear once it's the buyer's turn |
ts-date-select | Choose a date. With few dates a selection, with many or with time slots a calendar. Force it with mode="list" or mode="calendar" |
ts-seat-map | Seat map to open. With the open attribute it's visible right away |
ts-ticket-list | Ticket types with price, notes and quantity, plus the waitlist for sold-out tickets |
ts-product-list | Extras such as drink tokens or merch |
ts-code-field | Discount code or code from a secret link |
ts-cart-total | Total |
ts-cart-button | "To checkout", with label your own text |
Offering just one ticket type? Set ticket-type="<id>" on <ts-event> or <ts-ticket-selector>.
Checkout
| Block | What it shows |
|---|
ts-checkout | The whole order page: checkout, note or confirmation, depending on the state |
ts-order-timer | Time left on the reservation |
ts-order-actions | Change selection or decline a waitlist offer |
ts-order-summary | Lines and totals |
ts-buyer-form | The whole form, or separately: |
ts-buyer-fields | Email and name |
ts-holder-fields | Names on the tickets |
ts-invoice-fields | Request an invoice |
ts-payment-methods | Choose a payment method |
ts-age-confirm | Confirm the age limit |
ts-newsletter-consent | Newsletter |
ts-terms | Consent with links to the legal texts |
ts-checkout-submit | Error messages and button |
ts-withdrawal-note | Withdrawal note |
ts-payment | Payment: the provider's fields, redirect or bank details |
ts-product-offer | Extras in the checkout |
ts-voucher-field | Redeem a voucher |
ts-order-notice | Note for an expired or unknown order |
It's all explained under Checkout and payment.
After buying
| Block | What it shows |
|---|
ts-order-confirmation | Thanks, email address, order number |
ts-order-tickets | Tickets with QR code, code, seat, name and photo |
ts-order-downloads | PDF and wallet |
ts-order-vouchers | Purchased vouchers |
ts-ticket-resale | Resell tickets |
ts-ticket-cancel | Cancel tickets |
Vouchers and My tickets
| Block | What it shows |
|---|
ts-voucher-info | Text and terms of your vouchers |
ts-voucher-purchase | Amount, quantity, recipient, message and "To checkout" |
ts-account | Sign-in via a link in an email, then all orders |
Pages
| Block | What it does |
|---|
ts-storefront | The whole shop in one tag |
ts-route | Shows its content only on certain pages, with match="event order" |
ts-order | Wrapper for an order: id="…", without id from the address |
ts-shop | Wrapper for another workspace: workspace="…" |
More under Whole shop and your own pages.