JavaScript und Ereignisse

Für die Bausteine brauchst du kein JavaScript. Es hilft dir, wenn du auf einen Kauf reagieren oder einen Teil ganz selbst bauen willst. Das Script stellt dafür window.TickySmart bereit.

Ereignisse

Jeder Schritt meldet sich als Ereignis auf document. So zählst du Käufe in deinem eigenen Analyse-Werkzeug:

document.addEventListener("tickysmart:purchase", (event) => {
  const { transactionId, value, currency, items } = event.detail;
  gtag("event", "purchase", { transaction_id: transactionId, value, currency, items });
});

Ereignis	Wann
tickysmart:view_item_list	Die Eventliste ist da
tickysmart:view_item	Eine Ticketauswahl ist da
tickysmart:checkout	Tickets sind reserviert, die Kasse öffnet
tickysmart:add_to_cart, tickysmart:begin_checkout	Die Kasse wird angezeigt
tickysmart:add_payment_info	Der Käufer schickt das Formular ab
tickysmart:purchase	Bezahlt. Kommt je Bestellung und Gerät nur einmal
tickysmart:locale	Die Sprache hat gewechselt

Die Angaben in event.detail folgen dem E-Commerce-Schema von Google Analytics 4: currency, value, items, beim Kauf dazu transactionId.

Einstellungen beim Start

Statt der Attribute am Script kannst du alles auch hier angeben:

await TickySmart("ts_pk_live_…", {
  locale: "de",
  urls: { event: "/programm/{slug}", order: "/kasse?ts_order={id}" },
  partner: "stadtwerke",
  messages: { "shop.checkout": "Jetzt kaufen" },
  stripeAppearance: { theme: "flat" },
});

Daten lesen

const shop = await TickySmart("ts_pk_live_…");
const info = await shop.info.load();
const events = await shop.events.load();
const calendar = await shop.calendar("2027-03-01", "2027-03-31", null).load();

const event = shop.event("sommerfest");
await event.data.load();
// view() braucht Shop und Event, deshalb oben erst shop.info.load()
console.log(event.view().title, event.view().tickets);

Ticketauswahl selbst bauen

Die Auswahl läuft über dasselbe Objekt wie die Bausteine. Du kannst also eine eigene Oberfläche bauen und trotzdem ts-cart-total oder ts-cart-button weiter nutzen:

const event = shop.event("sommerfest");
await Promise.all([shop.info.load(), event.data.load()]);
event.subscribe(() => {
  const selection = event.selection();
  document.querySelector("#summe").textContent = selection.total;
});

event.setDate(dateId);
event.setQuantity(ticketId, 2);
await event.applyCode("SOMMER");
const order = await event.reserve(); // führt zur Kasse, Fehler stehen in event.state.error

Die Beträge sind ganze Zahlen in der kleinsten Einheit der Währung, also Cent bei Euro und ganze Yen bei Yen.

Kasse selbst bauen

const order = shop.order(orderId);
await order.load();
order.setValues({ email, firstName, lastName, acceptTerms: true });
await order.applyVoucher("7YQ9-C6V5-MACA");
await order.submit();
console.log(order.state.order, order.state.invalid, order.state.code);

ts-payment zeigt danach die Zahlung. Kartendaten dürfen nur in die Felder des Anbieters, diesen Teil kannst du also nicht ersetzen.

Texte

Die Namen der Texte sind dieselben wie in der Oberfläche von TickySmart. Die häufigsten:

Name	Text
shop.checkout	Zur Kasse
shop.total	Summe
shop.soldOut	Ausverkauft
shop.freePrice	Kostenlos
shop.priceFrom	ab

Alle Namen einer Sprache stehen in der Datei https://embed.tickysmart.io/elements/v1/de.js.