Benutzerdefinierte Ticket-Themen - FooEvents Help Center

Dieses Dokument zeigt, wie man ein benutzerdefiniertes FooEvents-Ticket-Thema erstellt, indem man mit dem Canvas Ticket Thema. Canvas ist eine Einstiegsvorlage, die als Grundlage für individuelle Ticketdesigns dient. Es gibt alle FooEvents-Ticketdaten in einem einfachen, sauberen Format mit grundlegendem HTML und ein wenig PHP aus, was es ideal für die Erweiterung und das Branding macht.

Wir behandeln das Ordnerlayout, den Speicherort von Themen, die Funktionsweise der Konfiguration, die Zuordnung Ihres Themas zu einem Produkt und die wichtigsten Stellen, an denen Sie Markups für HTML-E-Mails und PDF-Ausgaben sicher anpassen können.

Voraussetzungen

A WooCommerce Website mit FooEvents installiert und aktiviert.
FTP/SFTP-Zugang (oder gleichwertig) zum Hochladen von Dateien.
Einen Code-Editor (VS Code, Sublime, PhpStorm, usw.).
Ein Testprodukt, das als FooEvents-Ereignis konfiguriert ist, damit Sie Ticketvorschauen und erneute Sendungen senden können.

1) Laden Sie das Canvas Ticket Theme herunter

Downloaden und entpacken Sie das kostenlose Canvas Ticket Thema auf Ihren lokalen Computer.

2) Themen-Dateien

Dies sind die wichtigsten Dateien, die Sie bei der Arbeit an Ihrem individuellen Ticket-Thema bearbeiten werden:

├─ config.json        ← Deklariert Name und Kompatibilität (HTML/PDF/POS)
├─ header.php         ← E-Mail-/PDF-Kopf und öffnende Körperauszeichnung und CSS
├─ ticket.php         ← Hauptteil; wird einmal pro Ticket ausgeführt
├─ fußzeile.php         ← Schließen von body/html-Tags, CSS-Überschreibungen für Fußzeilen
├─ Bilder/            ← Bild-Assets (einschließlich Vorschauminiatur)
├─ readme.txt         ← Metadaten zum Thema (für den Menschen sichtbar)
└─ Lizenz/           ← GPL
└─ vorschau.jpg        ← Vorschaubild auf dem Bildschirm Ticket-Themen.

Die wichtigsten Dateien, an denen Sie arbeiten werden, sind die folgenden Vorlagendateien:

header.php umfasst in der Regel einen strikten XHTML-E-Mail-Doctype, Rücksetzungen, Outlook/Apple Mail-Optimierungen und eine $font_family Platzhalter, den Canvas bereits verkabelt hat.
ticket.php rendert den Inhalt des Tickets; es wird ausgeführt für jedes Ticket in der E-Mail.
fußzeile.php schließt das HTML/PDF-Dokument ab.

3) Aktualisieren Sie den Namen des Ticket-Themas

Erstellen Sie eine Arbeitskopie des Canvas-Ticket-Designs, damit Sie es ändern können, ohne das Original anzufassen.

Name des Ordners: #

Benennen Sie den entpackten Ordner in einen eindeutigen Slug um, z. B. ändern Sie "canvas_custom_theme" in "myticket_theme". Geben Sie Ihrem Thema einen eindeutigen Namen und geben Sie an, welche Ausgaben es unterstützt. Verwenden Sie nur Kleinbuchstaben und Unterstriche (keine Leerzeichen). Dieser Ordnername wird zum Handle für Ihr Thema.

config.json (Standardeinstellung von Canvas): #

{
  "Name": "Canvas Ticket Theme",
  "unterstützt-html": "true",
  "unterstützt-pdf": "wahr",
  "unterstützt-pos": "false"
}

In der Datei config.json können Sie auch festlegen, ob dieses benutzerdefinierte Thema auch PDF-Tickets unterstützen soll. Wenn Sie beabsichtigen, nur für HTML-E-Mails zu gestalten, setzen Sie:

"unterstützt pdf": "false"

Wenn Sie sowohl HTML als auch PDF unterstützen, behalten Sie es "wahr" und testen Sie beide Ausgänge getrennt.

Anmerkung: Diese Werte sind Zeichenketten "wahr"/"falsch" in Canvas; behalten Sie dieses Format aus Kompatibilitätsgründen bei.

readme.txt #

Aktualisieren Sie den "Ticket-Theme-Namen" und die Beschreibung, um Ihr benutzerdefiniertes Thema wiederzugeben. Diese Datei ist informativ, aber hilfreich beim Scannen vieler benutzerdefinierter Themen.

vorschau.jpg #

Aktualisieren Sie die Miniaturansicht des Bildes preview.jpg, damit Ihr Ticket-Thema leicht zu erkennen ist.

4) Hochladen Ihres Ticket-Themas auf Ihre Website

FooEvents-Ticket-Themen befinden sich in einem FooEvents-Themenordner auf Ihrer Website. FooEvents erkennt automatisch Themen in diesem Verzeichnis. Laden Sie den Ordner mit Ihrem neuen Ticket-Thema per FTP/SFTP an den folgenden Ort auf Ihrer Website hoch:

/wp-content/uploads/fooevents/themes/

5) Weisen Sie das benutzerdefinierte Thema einem Produkt zu

Um ein Ticket-Thema zu testen und zu verwenden, müssen Sie es einem Produkt zuweisen. Öffnen Sie ein WooCommerce-Produkt, das bereits konfiguriert als FooEvents-Ereignisund legen Sie die Einstellungen für das Ticket-Thema so fest, dass dieses Ticket-Thema verwendet wird, damit Sie während der Iteration echte Testtickets senden können.

Bearbeiten Sie in WordPress Ihr Ereignisprodukt und öffnen Sie Produktdaten → Ticket-Einstellungen. Setzen Sie die HTML-Ticket-Thema zu MyTicket Themaund dann speichern.

Wenn Sie außerdem Folgendes verwenden FooEvents PDF-TicketsWenn Sie sich entschieden haben, Ihr Ticket-Theme PDF-kompatibel zu machen, müssen Sie Ihr neues Theme unter der Option PDF-Ticket-Theme Umgebung.

6) Canvas-Kopf- und -Fußzeile (E-Mail-sicheres Boilerplate)

Verwenden Sie die E-Mail-Kopf- und -Fußzeilen von Canvas als Grundlage für HTML-E-Mail-Kompatibilität (und vernünftige PDF-Ausgabe). Die Kopfzeile enthält bedingtes CSS für Outlook (MSO), Rücksetzungen, die eine Neuformatierung von Gmail/Apple Mail verhindern, und konservative Standardwerte, die die Layouts über verschiedene Clients und PDF-Rendering stabil halten.

7) Die `ticket.php` Schleife: Struktur und Schlüsselmuster

Verstehen Sie, wie die Ticket-Themen Daten wiedergeben, damit Sie Elemente sicher verschieben/verkleinern können.

Canvas führt aus ticket.php einmal pro Ticket. Die Datei enthält in der Regel zwei konzeptionelle Teile:

Ein "Kopfbereich", der nur die einmal (für das erste Ticket in der Stapel-E-Mail oder bei der Vorschau).
Ein wiederholter Block, der für jedes Ticket.

"Nur die erste Eintrittskarte" Wächter #

Oben sehen Sie eine Logik wie diese:

Beim erneuten Senden an die Käufer und mehrere Tickets in einer E-Mail enthalten sind, wird der Kopfbereich nur einmal gedruckt.

Beispiel HTML vs. PDF #

Canvas unterscheidet in der Regel die Ausgabe nach dem Ticket-Typ. Dies geschieht, um die Kompatibilität mit der DOMPDF-Bibliothek zu gewährleisten, die zum Rendern von PDF-Dateien verwendet wird:

<?php if ( ! empty( $ticket['type'] ) && 'PDF' === $ticket['type'] ) : ?>
  <p><strong>PDF-Version</strong></p>
<?php else : ?>
  <p><strong>HTML-Fassung</strong></p>
<?php endif; ?>

Verwenden Sie dies, um kleine formatspezifische Unterschiede anzuwenden, wenn Ihr Entwurf dies erfordert. Halten Sie die Änderungen minimal; es ist leicht, Abweichungen zwischen HTML und PDF einzuführen.

Logos / Kopfzeilenbilder #

Canvas druckt das Logo und das Kopfzeilenbild, wenn es in Produkt → Ticket-Einstellungen:

<?php if ( ! empty( $ticket['WooCommerceEventsTicketLogo'] ) ) : ?>
  <p><img src="<?php echo esc_attr( $ticket['WooCommerceEventsTicketLogo'] ); ?>" alt="<?php echo esc_attr( $ticket['name'] ); ?>" style="max-width:100%;"/></p>

  <p><img src="<?php echo esc_attr( $ticket['WooCommerceEventsTicketHeaderImage'] ); ?>" alt="<?php echo esc_attr( $ticket['name'] ); ?>" style="max-width:800px"/></p>
<?php endif; ?>

Seitenumbrüche (für Druck/PDF) #

Canvas verwendet eine Modulo-Logik für die Ticketnummer, um Seitenumbrüche einzufügen:

<?php if ( 0 !== $ticket['ticketNumber'] % 2 ) : ?>
  <div style="page-break-before: always;"></div>
<?php endif; ?>

Dieses Beispiel fügt einen Seitenumbruch ein nach jeder ungeraden Zahl von Fahrkarten. Passen Sie die Modulo-Logik an Ihr Layout an (z. B. Unterbrechung alle 1, 2 oder 3 Tickets).

Häufige dynamische Felder, die Sie sehen werden #

Name der Veranstaltung: <?php echo esc_attr( $ticket['name'] ); ?>
Termine/Zeiten (variiert je nach Veranstaltungstyp): WooCommerceEventsDate, WooCommerceEventsEndDate, WooCommerceEventsHour, WooCommerceEventsMinutes, WooCommerceEventsPeriode, WooCommerceEventsTimeZone, usw.
Zum Kalender hinzufügen: fooevents_ics AJAX-Endpunkt mit Veranstaltung und Ticket params.
Zur Brieftasche hinzufügen: fooevents_wallet_pass AJAX-Endpunkt mit Ticket ID.
Barcode/QR: <?php echo esc_attr( $barcodeURL ); ?>
Variationen: iterieren WooCommerceEventsVariationsFromID
Buchungen: WooCommerceEventsBuchungSlot, WooCommerceEventsBuchungsDatum
Sitzplätze: fooevents_bestuhlung_optionen_array
Teilnehmerfelder: WooCommerceEventsAttendeeName, WooCommerceEventsAttendeeLastName, WooCommerceEventsTeilnehmerTelefon, WooCommerceEventsTeilnehmerUnternehmen, usw.
Benutzerdefinierte Teilnehmerfelder: fooevents_custom_attendee_fields_options_array
Vergrößern: WooCommerceEventsZoomText (falls aktiviert)

Sicherheit: Canvas verwendet Escaping (esc_attr, wp_kses_post, esc_attr_d) konsistent. Behalten Sie diese bei, wenn Sie Felder verschieben.

Unterschied zwischen einzelnen und mehreren PDF-Ticket-Themenvorlagen #

Wenn Sie die Vorlage "Single" verwenden und ein Kunde mehrere Tickets kauft, erscheint jedes Ticket auf einer eigenen Seite in derselben PDF-Datei. Jedes Ticket hat sein eigenes Kopfbild, Logo und Veranstaltungsdetails. Wenn Sie die Vorlage "Mehrere" verwenden, erscheinen das Veranstaltungslogo und die Details oben auf der Seite, gefolgt von 3 Tickets und dann wieder die Veranstaltungsdetails, gefolgt von 3 Tickets usw. Die Idee ist, dass die Veranstaltungsdetails und 3 Tickets auf eine Seite passen, aber wenn Sie viele Informationen anzeigen, können diese Tickets auf die nächste Seite überlaufen. Um dies zu ändern, können Sie entweder weniger Informationen anzeigen oder die Vorlage überschreiben, um einen Teil der Füllung zu entfernen oder die Schriftgröße zu verringern.

8) Bilder zum Thema referenzieren

Laden Sie Bilder aus der Theme-Datei Bilder/ Ordner mit einem zuverlässigen Pfad.

Je nach Basis bietet Canvas Variablen, die Sie verketten können. In der Regel werden Sie eines dieser Muster sehen:

<img src="<?php echo $theme_packs_url . $theme_name; ?>/images/myimage.png" alt="..." />

oder

<img src="<?php echo $themePacksURL . 'theme/images/'; ?>myimage.png" alt="..." />

Überprüfen Sie header.php in Canvas, um die Variablen in Ihrer Kopie zu bestätigen. Lösen Sie immer zu einer absolute URL für E-Mail.

9) HTML/CSS-Richtlinien für E-Mail und PDF

Halten Sie die Markierungen konservativ, damit sie auf allen Clients und in PDFs einheitlich dargestellt werden.

Verwenden Sie ein tabellenbasiertes Layout oder minimale <div>s; kein komplexes Flex/Raster.
Inline kritische Stile (insbesondere Schriftarten, Farben, Abstände).
Vermeiden Sie Web-Fonts in PDFs oder bieten Sie robuste Fallbacks an.
Minimieren Sie verschachtelte Elemente und Puffer.
Verwenden Sie Seitenumbruch-vor/nach für PDF-Seitenumbrüche, aber testen Sie es mit Ihrem endgültigen Inhalt.
Bilder reaktionsfähig halten mit max-width:100%; height:auto; und absolut URLs.
Testen Sie die HTML- und PDF-Ausgabe nach Änderungen getrennt.

10) Zuordnen, Vorschau und Wiederholung

Validieren Sie das Thema anhand realistischer Daten.

Unter Produktdaten → Ticket-Einstellungenbestätigen HTML-Ticket-Thema (und PDF-Ticket-Theme falls zutreffend) ist auf Ihr benutzerdefiniertes Thema eingestellt.
Erstellen Sie einen Testauftrag oder erneut senden ein bestehendes Ticket in Ihren eigenen Posteingang.
Wenn die Tickets per E-Mail an den Käufer und eine Bestellung mehrere Tickets enthält, enthält die E-Mail mehrere Ticketblöcke-Prüfen Sie, ob Abstände und Überschriften noch richtig aussehen.

Wiederholen Sie: Bearbeiten, geänderte Dateien hochladen und erneut senden.

11) Gemeinsame Tweaks und Muster

Bedingtes Rendering nach Nachrichtenart

Einen Abschnitt nur einmal für das erste Ticket anzeigen

Modulo-basierte Seitenumbrüche

<?php if ( 0 === $ticket['ticketNumber'] % 3 && 0 !== $ticket['ticketNumber'] ) : ?>
  <div style="page-break-before: always;"></div>
<?php endif; ?>

Sicherer Ausgang

<h2><?php echo esc_attr( $ticket['name'] ); ?></h2>
<p><?php echo wp_kses_post( $ticket['WooCommerceEventsTicketText'] ); ?></p>

12) Checkliste für die Prüfung

Vorschau + erneutes Senden von Tests für HTML und PDF (falls unterstützt).
Multiticket-E-Mail an Käufer rendert mehrere Ticketblöcke sauber.
Bilder werden aufgelöst (keine defekten Links; absolute URLs).
Wichtigste E-Mail-Clients: Gmail (Web/Mobil), Apple Mail, Outlook Desktop/Web.
Wenn PDFs aktiviert sind: Drucken Sie in PDF oder generieren Sie offizielle PDF-Tickets und bestätigen Sie Paginierung, Ränder und Schriftarten.

13) Fehlersuche

Thema wird nicht im Dropdown angezeigt: Bestätigen Sie den Ordnerpfad und config.json "Name" eindeutig ist; leeren Sie den Cache und laden Sie den Produktbearbeitungsbildschirm erneut.
Bilder werden in E-Mails nicht geladen: Achten Sie auf absolute URLs; vermeiden Sie protokollrelative URLs; bestätigen Sie Asset-Berechtigungen.
Seltsame Abstände in Outlook: Reduzieren Sie verschachtelte Elemente, setzen Sie auf Tabellen und vereinfachen Sie CSS.
PDF-Layout-Probleme: Verwenden Sie einfachere Strukturen, fügen Sie explizite Seitenumbrüche hinzu, vermeiden Sie Floats und komplexe Positionierungen.

Andere Themen

Das gleiche Verfahren kann auf jede FooEvents Ticket-Thema. Sie folgen der gleichen Grundstruktur und dem gleichen Ansatz. Suchen Sie ein Thema, das Ihrem Entwurf ähnlich ist, und verwenden Sie es als Ausgangspunkt.

Zusammenfassung

Beginnen Sie mit Segeltuchgeben Sie ihm einen eindeutigen Namen in config.jsonlegen Sie es in /wp-content/uploads/fooevents/themes/und weisen Sie es einem Testprodukt zu. Passen Sie das Markup in header.php, ticket.phpund fußzeile.php, wobei der HTML-Code konservativ und die Stile inline bleiben. Verwenden Sie den First-Ticket-Guard für einmalig ausgeführte Elemente, passen Sie die HTML- und PDF-Ausgabe bei Bedarf an und nutzen Sie Seitenumbrüche für den PDF-Seitenumbruch. Testen Sie Vorschauen, senden Sie echte Tickets erneut, und validieren Sie E-Mails mit mehreren Tickets, bevor Sie live gehen.

Themen