Ganzer Shop und eigene Seiten

Bausteine führen Käufer von der Eventliste zum Event, zur Kasse und zur Bestätigung. Wie das auf deiner Website abläuft, kannst du auf drei Arten lösen.

Der ganze Shop in einem Tag

Der schnellste Weg: eine Seite, ein Tag.

<ts-storefront></ts-storefront>

Damit stehen Eventliste, Event-Seiten, Kasse, Bestätigung, Gutscheine, Meine Tickets und die Rechtstexte auf dieser einen Seite. Der Besucher wechselt zwischen ihnen, ohne dass die Seite neu lädt. In der Adresse steht, wo er gerade ist, also funktionieren auch der Zurück-Knopf und geteilte Links:

Adresse	Seite
/tickets	Eventliste
/tickets?ts_event=sommerfest	Event
/tickets?ts_order=…	Kasse und Bestellung
/tickets?ts_page=vouchers	Gutscheine
/tickets?ts_page=account	Meine Tickets
/tickets?ts_page=imprint	Rechtstext (auch terms, privacy, withdrawal)

Eigener Aufbau auf einer Seite

Mit <ts-route> baust du dieselbe Seite selbst. Der Inhalt erscheint nur auf den Seiten, die du bei match nennst, und lädt vorher nichts:

<ts-route match="events">
  <ts-event-filter></ts-event-filter>
  <ts-event-list></ts-event-list>
</ts-route>

<ts-route match="event">
  <ts-event>
    <h1><ts-event-title></ts-event-title></h1>
    <ts-event-cover></ts-event-cover>
    <ts-event-description></ts-event-description>
    <ts-ticket-selector></ts-ticket-selector>
  </ts-event>
</ts-route>

<ts-route match="order"><ts-checkout></ts-checkout></ts-route>

Die Seiten heißen events, event, order, vouchers, account und legal.

Eigene Unterseiten

Hat deine Website eigene Seiten für Events oder eine eigene Kasse, nennst du dem Script die Adressen. {slug}, {id} und {page} werden eingesetzt:

<script
  src="https://embed.tickysmart.io/elements/v1.js"
  data-key="ts_pk_live_…"
  data-url-events="/programm"
  data-url-event="/programm/{slug}"
  data-url-order="/kasse?ts_order={id}"
  data-url-vouchers="/gutscheine"
  data-url-account="/meine-tickets"
  data-url-legal="/rechtliches/{page}"
  defer
></script>

Woher die Event-Seite weiß, welches Event sie zeigen soll:

So steht es auf der Seite	Woher das Event kommt
<ts-event slug="sommerfest">	Fest eingetragen, gut für eine Seite pro Event
<ts-event slug-from-path>	Letzter Teil der Adresse, also /programm/sommerfest
<ts-event>	Aus ?ts_event=sommerfest

Die Kasse braucht die Bestellung aus der Adresse, also ?ts_order={id} wie im Beispiel oben.

Häufige Fragen

Kann ich mehrere Workspaces auf einer Seite zeigen?

Ja. Trag am Script nur einen Schlüssel ein und setz die Bausteine des zweiten Workspaces in <ts-shop workspace="kuerzel">. Beide Workspaces müssen die Website freigegeben haben.

Wie finden Suchmaschinen meine Event-Seiten?

Setz ts-event-seo auf die Seite, dann bekommen Suchmaschinen die strukturierten Daten des Events wie im Shop. Für Titel und Beschreibung der Seite in den Suchergebnissen sorgt deine Website selbst.