Dein Ticketshop läuft komplett in deinem Webseiten-Design — ohne Umweg über eine externe Shop-Seite. Du kopierst dazu ein einziges HTML-Snippet aus deinem ditix-Dashboard (Menü „Auslieferung") in deine Seite. Das eingebundene iFrame ist responsiv und lädt entweder deine gesamte Eventübersicht (siehe diesen Artikel) oder den Vorverkauf eines einzelnen Events (siehe verlinkten Artikel).
Dieser Artikel beschreibt die Einbindung der Eventübersicht, mit all deinen Events.
Daneben besteht die Möglichkeit Einbindung des Vorverkaufs und Ticketübersicht eines einzelnen Events auf deiner Webseite. Wie das funktioniert findest du in einem anderen Artikel.
Einbinden einer Eventübersicht
1: Navigiere zum Menüpunkt 'Shop'
2: Wähle im drei-Punkte-Menü 'Auslieferung'
Dieses findest du rechts oben auf der Seite.
3: Passe deine Farben an
Du kannst nun mit der Eingabe verschiedener Hexadezimal-Codes die Farben festlegen, in denen der Shop ausgegeben werden soll. Das erlaubt dir, die Farben deiner Webseite anzupassen.
4: Klicke auf 'Code kopieren'
Der HTML Code wird dann in deine Zwischenablage kopiert und kann auf deiner Webseite eingebunden werden.
5: Schau dir die Einbindung an
Die Auslieferung ist responsive, das heißt, dass sie sich automatisch dem Bildschirm verschiedener Geräte (z.B. Handy, Tablet, Pc,...) anpassen.
Mehrere Eventlisten parallel auf einer Seite einbinden
Wenn du verschiedene Veranstaltungsreihen voneinander trennen möchtest - zum Beispiel Konzerte und Dinner-Shows oder eine Tour mit Terminen in mehreren Städten - kannst du mehrere Snippets gleichzeitig auf deiner Webseite platzieren. Jedes Snippet bekommt einen eigenen Filter und zeigt nur die zugehörigen Events:
Filter nach Stadt (z. B. eine eigene Übersicht pro Tour-Station)
Filter nach Eventkategorie (z. B. „Konzerte" auf der einen, „Dinner-Show" auf der anderen Seite)
Sortierung automatisch chronologisch nach Datum
Voraussetzung dafür ist, dass du deinen Events im Bereich Allgemein → Veranstaltungsdetails die passenden Kategorien und Tags zuweist. Anschließend generierst du dir pro Übersicht ein eigenes Snippet in der „Auslieferung" mit dem entsprechenden Filter und bindest die Snippets an den jeweiligen Stellen deiner Webseite ein.
Vorschau deiner Auslieferung
Um eine Vorschau deiner generierten Auslieferung zu erhalten, kannst du den bereitgestellten Code kopieren und hier https://codepen.io/pen/ in das HTML Feld links oben einfügen. Deine Vorschau wir im unteren Felde generiert.