Gestalten

Bausteine liegen direkt in deiner Seite, ohne Shadow DOM und ohne iFrame. Sie laden kein CSS. Alles, was du für den Rest deiner Website geschrieben hast, gilt also auch für sie: deine Schrift, deine Links, deine Knöpfe.

Klassen

Jedes Teil trägt eine feste Klasse mit ts- davor, Teile innerhalb eines Bausteins mit zwei Unterstrichen:

.ts-ticket { border: 1px solid #ddd; border-radius: 1rem; padding: 1rem; }
.ts-ticket__name { font-weight: 700; }
.ts-ticket__price { font-size: 1.25rem; }
.ts-cart-button__button { background: #e8503a; color: #fff; border: 0; }

Die Bausteine selbst sind eigene Tags und im Browser standardmäßig display: inline. Soll einer ein Block sein, sag es ihm:

ts-event-cover, ts-ticket-list { display: block; }

Zustände

Was sich ändert, steht als data-… am Element. So reagiert dein CSS, ohne dass du JavaScript brauchst:

Element	Attribut	Werte
.ts-ticket	data-state	open, selected, soldout, unavailable
.ts-product	data-state	open, selected
.ts-seat	data-state	free, picked, taken
.ts-seat-area	data-state	free, picked, taken
.ts-event-list	data-state	loading, ready
.ts-event-status	data-state	cancelled, past, salesOver, salesPaused
.ts-cart-button	data-state	empty, ready, pending
.ts-order-timer	data-urgent	da, wenn weniger als eine Minute bleibt
.ts-field, .ts-check	data-invalid	da, wenn die Eingabe fehlt oder falsch ist
.ts-notice	data-tone	info, success, warning, danger
.ts-calendar__cell	data-events, data-today, data-selected	da, wenn es zutrifft
.ts-ticket-card	data-state	valid, cancelled, blocked

.ts-ticket[data-state="selected"] { border-color: #e8503a; }
.ts-ticket[data-state="soldout"] { opacity: .5; }
.ts-order-timer[data-urgent] { color: #c00; font-weight: 700; }

Ein vollständiges Beispiel mit Karten und Raster zeigt der Artikel Was sind Elements?.

Saalplan

Der Saalplan ist eine SVG-Grafik. Er passt sich der Breite an und braucht keine feste Höhe. Jeder Platz ist ein eigenes Element, das du per CSS ändern kannst. Die Farbe der Kategorie steht als Grundwert darin, und dein CSS geht vor:

.ts-seat-map__svg { max-height: 70vh; width: 100%; }
.ts-seat[data-state="free"] .ts-seat__circle:hover { stroke: #171331; stroke-width: 2; }
.ts-seat[data-state="taken"] .ts-seat__circle { fill: #ccc; }
.ts-seat[data-state="picked"] .ts-seat__circle { fill: #e8503a; }

Die Farben deiner Kategorien bekommst du in der Legende als CSS-Variable --ts-seat-color:

.ts-seat-map__legend-item::before {
  content: ""; display: inline-block; width: .75rem; height: .75rem;
  border-radius: 50%; background: var(--ts-seat-color, #ccc);
}

Texte ändern

Alle Texte kommen übersetzt aus TickySmart. Eigene Texte setzt du beim Start, die Namen findest du unter JavaScript und Ereignisse:

<script>
  addEventListener("DOMContentLoaded", () => {
    TickySmart.init({ messages: { "shop.checkout": "Jetzt kaufen" } });
  });
</script>

Für einzelne Knöpfe und Links geht es auch ohne Script: <ts-cart-button label="Jetzt kaufen"></ts-cart-button> und <ts-event-link label="Tickets"></ts-event-link>.

Sprache

Die Sprache kommt der Reihe nach aus: data-locale am Script, ?lang= in der Adresse, der Wahl im Sprachumschalter ts-language-switch, <html lang="…"> deiner Seite und zuletzt dem Browser. Texte deiner Events erscheinen in dieser Sprache, sonst in der Standardsprache deines Workspaces.

Beträge, Daten und Uhrzeiten richten sich nach der Sprache und dem Land deines Workspaces.

Häufige Fragen

Warum sieht ohne CSS alles so schlicht aus?

Das ist so gewollt. Wir geben kein Design vor, gegen das du anarbeiten müsstest. Knöpfe, Listen und Überschriften sehen aus wie auf deiner Seite oder im Standard des Browsers.

Wie groß ist der QR-Code?

So breit wie sein Platz. Begrenz ihn mit .ts-qr { width: 10rem; }. Sein Hintergrund bleibt weiß, sonst lesen ihn manche Scanner nicht. Gib ihm auf dunklen Seiten etwas weißen Rand.