Jeder Baustein auf einen Blick, von der Eventliste über die Ticketauswahl bis zur Kasse und den Tickets nach dem Kauf.
Alle Bausteine heißen ts-… und funktionieren einzeln und in beliebiger Reihenfolge. Text-Bausteine liefern nur den reinen Text, damit du selbst entscheidest, was darum steht: <h1><ts-event-title></ts-event-title></h1> oder <span class="titel"><ts-event-title></ts-event-title></span>.
Bausteine, die sich auf ein Event beziehen, stehen in einem <ts-event>. Bausteine ohne Inhalt bleiben leer und nehmen keinen Platz weg.
Rund um den Shop
| Baustein | Was er zeigt |
|---|
ts-shop-name | Name deines Workspaces (Text) |
ts-shop-logo | Logo als Bild |
ts-shop-headline | Überschrift der Eventübersicht (Text) |
ts-shop-intro | Einleitung der Eventübersicht |
ts-shop-gallery | Galeriebilder |
ts-shop-sponsors | Sponsoren für alle Seiten, nach Stufe |
ts-shop-social | Links zu deinen Profilen |
ts-shop-support | Kontakt für Käufer |
ts-legal-links | Links zu Impressum, AGB, Datenschutz und Widerruf |
ts-legal | Ein Rechtstext, mit page="imprint", terms, privacy oder withdrawal |
ts-language-switch | Sprachwahl |
ts-link | Link zu einer Seite, mit to="events", vouchers, account, event, und optional label="Eigener Text" |
ts-powered-by | Optionaler Hinweis „Tickets über TickySmart“ |
Events finden
| Baustein | Was er zeigt | Attribute |
|---|
ts-event-list | Kommende Events | category, limit, eigener Aufbau per <template> |
ts-event-filter | Filter nach Kategorie, wirkt auf Liste und Kalender | |
ts-event-calendar | Monatskalender mit allen Terminen | category, month="2027-03" |
Beispiele stehen unter Eventliste und Kalender.
Ein Event
| Baustein | Was er zeigt |
|---|
ts-event | Hülle: slug="sommerfest", ohne slug das Event aus der Adresse |
ts-event-title | Titel (Text) |
ts-event-link | Link zum Event, Text ist der Titel oder label |
ts-event-cover | Titelbild |
ts-event-category | Kategorie (Text) |
ts-event-date | Nächster Termin (Text) |
ts-event-time | Uhrzeit und Einlass (Text) |
ts-event-venue | Ort und Stadt (Text) |
ts-event-price | „ab“-Preis (Text) |
ts-event-age | Altersgrenze (Text) |
ts-event-status | Hinweis bei Absage, vorbei, Verkauf beendet oder pausiert |
ts-event-facts | Termin, Ort und Alter auf einen Blick |
ts-event-description | Beschreibung |
ts-event-links | Weiterführende Links |
ts-event-video | Video, lädt erst nach Klick etwas von YouTube oder Vimeo |
ts-event-lineup | Line-up mit Bild, Zeit und Links |
ts-event-hours | Öffnungszeiten bei Zeitfenstern |
ts-event-dates | Alle Termine mit „In den Kalender“ |
ts-event-season-dates | Termine einer Dauerkarte |
ts-event-location | Adresse, Route, Website, Beschreibung und Bilder des Orts |
ts-event-faq | Fragen und Antworten |
ts-event-sponsors | Sponsoren dieses Events |
ts-event-seasons | Dauerkarten, die dieses Event enthalten |
ts-event-seo | Strukturierte Daten für Suchmaschinen, zeigt nichts an |
ts-event-missing | Hinweis, wenn es das Event nicht gibt |
ts-event-page | Die ganze Event-Seite auf einmal |
Tickets auswählen
| Baustein | Was er zeigt |
|---|
ts-ticket-selector | Alles unten zusammen, hinter dem Warteraum |
ts-waiting-room | Warteraum, wenn einer läuft. Deine Kinder-Elemente erscheinen erst, wenn der Käufer dran ist |
ts-date-select | Termin wählen. Bei wenigen Terminen Auswahl, bei vielen oder bei Zeitfenstern ein Kalender. Erzwingen mit mode="list" oder mode="calendar" |
ts-seat-map | Saalplan zum Aufklappen. Mit dem Attribut open gleich sichtbar |
ts-ticket-list | Ticketarten mit Preis, Hinweisen und Menge, dazu die Warteliste bei ausverkauften Tickets |
ts-product-list | Extras wie Getränkebons oder Merch |
ts-code-field | Rabattcode oder Code eines geheimen Links |
ts-cart-total | Summe |
ts-cart-button | „Zur Kasse“, mit label eigener Text |
Nur eine bestimmte Ticketart anbieten? Setz ticket-type="<id>" an <ts-event> oder <ts-ticket-selector>.
Kasse
| Baustein | Was er zeigt |
|---|
ts-checkout | Die ganze Bestellseite: Kasse, Hinweis oder Bestätigung, je nach Stand |
ts-order-timer | Restzeit der Reservierung |
ts-order-actions | Auswahl ändern oder Angebot der Warteliste ablehnen |
ts-order-summary | Positionen und Summen |
ts-buyer-form | Das ganze Formular, oder einzeln: |
ts-buyer-fields | E-Mail und Name |
ts-holder-fields | Namen auf den Tickets |
ts-invoice-fields | Rechnung anfordern |
ts-payment-methods | Zahlungsart wählen |
ts-age-confirm | Altersgrenze bestätigen |
ts-newsletter-consent | Newsletter |
ts-terms | Zustimmung mit Links zu den Rechtstexten |
ts-checkout-submit | Fehlermeldungen und Knopf |
ts-withdrawal-note | Widerrufshinweis |
ts-payment | Zahlung: Felder des Anbieters, Weiterleitung oder Bankdaten |
ts-product-offer | Extras in der Kasse |
ts-voucher-field | Gutschein einlösen |
ts-order-notice | Hinweis bei abgelaufener oder unbekannter Bestellung |
Alles dazu steht unter Kasse und Zahlung.
Nach dem Kauf
| Baustein | Was er zeigt |
|---|
ts-order-confirmation | Dank, Mail-Adresse, Bestellnummer |
ts-order-tickets | Tickets mit QR-Code, Code, Platz, Name und Foto |
ts-order-downloads | PDF und Wallet |
ts-order-vouchers | Gekaufte Gutscheine |
ts-ticket-resale | Tickets weiterverkaufen |
ts-ticket-cancel | Tickets stornieren |
Gutscheine und Meine Tickets
| Baustein | Was er zeigt |
|---|
ts-voucher-info | Text und Bedingungen zu deinen Gutscheinen |
ts-voucher-purchase | Betrag, Anzahl, Empfänger, Gruß und „Zur Kasse“ |
ts-account | Anmeldung per Link aus der Mail, danach alle Bestellungen |
Seiten
| Baustein | Was er macht |
|---|
ts-storefront | Der ganze Shop in einem Tag |
ts-route | Zeigt seinen Inhalt nur auf bestimmten Seiten, mit match="event order" |
ts-order | Hülle für eine Bestellung: id="…", ohne id aus der Adresse |
ts-shop | Hülle für einen anderen Workspace: workspace="…" |
Mehr dazu unter Ganzer Shop und eigene Seiten.