Onderwerpen

⌘K
  6. Onderwerpen
  8. Tickets
  10. Aangepaste ticket thema's

Aangepaste ticket thema's

Dit document laat zien hoe je een aangepast FooEvents ticket thema bouwt door te beginnen met de Canvas Kaartjesthema. Canvas is a starter template designed as a foundation for custom ticket designs. It outputs all FooEvents ticket data in a simple, clean format with basic HTML and a little PHP, which makes it ideal for extending and branding.

We’ll cover the folder layout, where themes live, how the config works, how to assign your theme to a product, and the key places to customize markup safely for both HTML email and PDF output.

Vereisten

  • A WooCommerce site met FooEvents geïnstalleerd en geactiveerd.
  • FTP/SFTP-toegang (of gelijkwaardig) om bestanden te uploaden.
  • Een code editor (VS Code, Sublime, PhpStorm, etc.).
  • Een testproduct geconfigureerd als een FooEvents event zodat je ticket previews en herverzendingen kunt versturen.

1) Download het Canvas Kaartjesthema

Download en pak de gratis Canvas Kaartjesthema naar uw lokale computer.

2) Themabestanden

Dit zijn de belangrijkste bestanden die je zult bewerken wanneer je werkt aan je aangepaste ticket thema:

├─ config.json        ← Verklaart naam en compatibiliteit (HTML/PDF/POS)
├─ header.php         ← E-mail/PDF head + opening body markup en CSS
├─ ticket.php         ← Hoofdgedeelte; wordt eenmaal per ticket uitgevoerd
├─ voettekst.php         ← Body/html tags sluiten, footer CSS overschrijven
├─ beelden/            ← Afbeeldingsactiva (inclusief voorbeeldminiaturen)
├─ leesmij.txt         ← Thema metadata (menselijk gericht)
└─ Licentie/           ← GPL
└─ voorbeeld.jpg        ← Thumbnail weergegeven in het scherm Kaartjesthema's.

De belangrijkste bestanden waar je aan gaat werken zijn de volgende sjabloonbestanden:

  • header.php bevat meestal een strikt XHTML e-maildoctype, resets, Outlook/Apple Mail tweaks en een $font_familie placeholder die Canvas al bedraad heeft.
  • ticket.php geeft de inhoud van het ticket weer; het wordt uitgevoerd voor elk ticket in de e-mail.
  • voettekst.php Sluit het HTML/PDF-document af.

3) Werk de naam van het ticket-thema bij 

Maak een werkkopie van het Canvas Ticket Theme zodat je het kunt aanpassen zonder het origineel aan te raken.

Mapnaam: #

Rename the unzipped folder to a unique slug, for example, change ‘canvas_custom_theme’ to something like ‘myticket_theme’. Give your theme a distinct name and declare which outputs it supports. Use lowercase and underscores only (no spaces). This folder name becomes your theme’s handle.

config.json (Canvas standaard): #

{
  "naam": "Canvas Ticket Theme",
  "supports-html": "true",
  "ondersteunt-pdf": "true",
  "ondersteunt-pos": "false".
}

In het config.json bestand kun je ook beslissen of dit aangepaste thema ook PDF tickets zal ondersteunen. Als je alleen wilt ontwerpen voor HTML e-mail, stel dan in:

"ondersteunt-pdf": "false".

Als je zowel HTML als PDF ondersteunt, houd het dan "true" en test beide uitgangen afzonderlijk.

Opmerking: Deze waarden zijn strings "waar"/"onwaar" in Canvas; houd dat formaat aan voor compatibiliteit.

leesmij.txt #

Werk de "Themanaam ticket" en beschrijving bij om je aangepaste thema weer te geven. Dit bestand is informatief, maar helpt bij het scannen van veel aangepaste thema's.

voorbeeld.jpg #

Werk de preview.jpg afbeeldingsminiatuurafbeelding bij zodat je ticket thema gemakkelijk te herkennen is.

4) Je ticket-thema uploaden naar je site

FooEvents ticket thema's bevinden zich in een FooEvents thema-map op uw site. FooEvents ontdekt automatisch thema's in deze map. Met behulp van FTP / SFTP, upload uw nieuwe ticket thema map naar de volgende locatie op uw site:

/wp-content/uploads/fooevents/themes/

5) Wijs het aangepaste thema toe aan een product

Om een ticket-thema te kunnen testen en gebruiken, moet je het toewijzen aan een product. Open een WooCommerce product dat is geconfigureerd als een FooEvents-gebeurtenis, and set the ticket theme settings to use this ticket theme so you can send actual test tickets while you iterate.

In WordPress, edit your event product and open Productgegevens → Ticketinstellingen. Stel de HTML ticket thema naar MyTicket Thema, then save.

If you’re also using FooEvents PDF KaartjesU kunt het uitschakelen terwijl u test, of als u hebt besloten om uw ticket thema PDF-compatibel te maken, zorg er dan voor om uw nieuwe thema te selecteren onder de PDF Kaartjesthema instelling.

6) Canvas kop- en voettekst (e-mailveilige boilerplate)

Gebruik de e-mailheader en -voetregel van Canvas als basis voor HTML-e-mailcompatibiliteit (en redelijke PDF-uitvoer). De header bevat voorwaardelijke CSS voor Outlook (MSO), resets die herformattering van Gmail/Apple Mail voorkomen en conservatieve standaardinstellingen die lay-outs stabiel houden voor verschillende clients en PDF-rendering.

7) De ticket.php lus: structuur en sleutelpatronen

Understand how the ticket themes render data so you can safely move/skin elements.

Canvas executes ticket.php eenmalig per ticket. Het bestand bevat meestal twee conceptuele delen:

  1. Een "header"-gebied dat alleen het volgende weergeeft eenmaal (voor het eerste ticket in de batch-e-mail of bij het bekijken van een voorbeeld).
  2. Een herhaald blok dat rendert voor elk ticket.

"Alleen eerste ticket" bewaker #

Bovenaan zie je logica zoals deze:

Bij het opnieuw verzenden naar de koper en er meerdere tickets in één e-mail zitten, zorgt dit ervoor dat de kopregel maar één keer wordt afgedrukt.

Voorbeeld HTML vs PDF #

Canvas maakt gewoonlijk onderscheid in uitvoer op basis van het type ticket. Dit wordt gedaan om compatibiliteit te garanderen met de DOMPDF-bibliotheek die wordt gebruikt om PDF-bestanden te renderen:

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

Gebruik dit om kleine formaatspecifieke verschillen toe te passen als je ontwerp dat nodig heeft. Houd de wijzigingen minimaal; het is gemakkelijk om verschillen tussen HTML en PDF te introduceren.

Logo's / headerafbeeldingen #

Canvas drukt het logo en de headerafbeelding af als deze zijn opgegeven in Product → Ticketinstellingen:

<?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; ?>

Pagina-einden (voor afdrukken/PDF) #

Canvas gebruikt modulo-logica op het ticketnummer om pagina-einden in te voegen:

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

Dit voorbeeld voegt een pagina-einde in na elk oneven ticket. Pas de modulo-logica aan voor je lay-out (bijvoorbeeld, breek elke 1, 2 of 3 kaartjes).

Veelvoorkomende dynamische velden die je zult zien #

  • Naam evenement: <?php echo esc_attr( $ticket['name'] ); ?>
  • Data/tijden (verschilt per type evenement): WooCommerceEventsDate, WooCommerceEventsEndDate, WooCommerceEVentsHour, WooCommerceEventsMinuten, WooCommerceEventsPeriode, WooCommerceEventsTimeZoneenz.
  • Toevoegen aan agenda: fooevents_ics AJAX eindpunt met evenement en ticket params.
  • Toevoegen aan portefeuille: fooevents_wallet_pass AJAX eindpunt met ticket ID.
  • Barcode/QR: <?php echo esc_attr( $barcodeURL ); ?>
  • Variaties: itereren WooCommerceEventsVariationsFromID
  • Boekingen: WooCommerceEventsBoekingSlot, WooCommerceEventsBookingDate
  • Zitplaatsen: fooevents_seating_options_array
  • Velden voor deelnemers: WooCommerceEventsAttendeeName, WooCommerceEventsAttendeeLastName, WooCommerceEventsAttendeeTelefoon, WooCommerceEventsBedrijfenz.
  • Aangepaste velden voor deelnemers: fooevents_custom_attendee_fields_options_array
  • Zoom: WooCommerceEventsZoomText (indien ingeschakeld)

Beveiliging: Canvas gebruikt escaping (esc_attr, wp_kses_post, esc_attr_e) consistent. Bewaar deze wanneer je velden verplaatst.

Verschil tussen enkelvoudige en meervoudige PDF-themasjablonen #

Als je de sjabloon "Enkel" gebruikt en een klant koopt meerdere tickets, dan verschijnt elk ticket op zijn eigen pagina in hetzelfde PDF-bestand. Elk ticket heeft zijn eigen kopafbeelding, logo en evenementgegevens. Als je de sjabloon "Meervoudig" gebruikt, verschijnen het logo en de details van het evenement bovenaan de pagina, gevolgd door 3 tickets en vervolgens weer de details van het evenement, gevolgd door 3 tickets, enzovoort. Het idee is dat de details van het evenement en 3 tickets op één pagina passen, maar als je veel informatie weergeeft, kunnen deze tickets overlopen naar de volgende pagina. Om dit te veranderen kun je minder informatie weergeven of de sjabloon aanpassen om wat opvulling te verwijderen of het lettertype te verkleinen.

8) Verwijzingen naar thema-afbeeldingen

Laad afbeeldingen vanuit de beelden/ folder with a reliable path.

Depending on the base, Canvas provides variables you can concatenate. You’ll commonly see one of these patterns:

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

of

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

Inspecteer header.php in Canvas om de variabelen in uw kopie te bevestigen. Los altijd op naar een absolute URL voor e-mail.

9) HTML/CSS-richtlijnen voor e-mail en PDF

Houd de opmaak conservatief zodat deze consistent wordt weergegeven op verschillende clients en in PDF's.

  • Gebruik lay-out op basis van tabellen of minimaal <div>s; geen complexe flex/grid.
  • Inline-kritieke stijlen (vooral lettertypen, kleuren, spatiëring).
  • Vermijd webfonts in PDF's of zorg voor robuuste fallbacks.
  • Minimaliseer geneste elementen en vlakken.
  • Gebruik pagina-einde voor/na voor PDF-paginering, maar test met je uiteindelijke inhoud.
  • Houd afbeeldingen responsief met max-breedte:100%; hoogte:auto; en absoluut URL's.
  • Test de HTML- en PDF-uitvoer afzonderlijk na wijzigingen.

10) Toewijzen, bekijken en herhalen

Valideer het thema met realistische gegevens.

  • In Productgegevens → Ticketinstellingenbevestigen HTML Kaartjesthema (en PDF Kaartjesthema indien van toepassing) is ingesteld op uw aangepaste thema.
  • Maak een testorder of opnieuw verzenden een bestaand ticket naar je eigen inbox.
  • Als tickets worden gemaild naar de koper en een bestelling meerdere tickets bevat, bevat de e-mail meerdere ticketblokken-Controleer of de spatiëring en koppen er nog goed uitzien.

Herhaal: bewerken, gewijzigde bestanden uploaden en opnieuw verzenden.

11) Veelvoorkomende tweaks & patronen

Voorwaardelijke weergave per type uitvoer

Toon een sectie slechts eenmaal voor het eerste ticket

Op modulo gebaseerde pagina-einden

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

Veilige uitvoer

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

12) Checklist testen

  • Tests bekijken + opnieuw verzenden voor HTML en PDF (indien ondersteund).
  • Multi-ticket e-mail naar koper geeft meerdere ticketblokken netjes weer.
  • Afbeeldingen worden opgelost (geen gebroken links; absolute URL's).
  • Belangrijkste e-mailclients: Gmail (web/mobiel), Apple Mail, Outlook desktop/web.
  • Als PDF's zijn ingeschakeld: druk af naar PDF of genereer officiële PDF-tickets en bevestig paginering, marges en lettertypen.

13) Problemen oplossen

  • Thema wordt niet weergegeven in dropdown: Bevestig het pad van de map en config.json "naam" uniek is; wis caches en laad het bewerkingsscherm voor producten opnieuw.
  • Afbeeldingen worden niet geladen in e-mail: Zorg voor absolute URL's; vermijd protocol-relatieve URL's; bevestig asset-machtigingen.
  • Vreemde spatiëring in Outlook: Verminder geneste elementen, vertrouw op tabellen en vereenvoudig CSS.
  • PDF opmaakproblemen: Gebruik eenvoudiger structuren, voeg expliciete pagina-einden toe, vermijd floats en complexe positionering.

Andere thema's

Hetzelfde proces kan worden toegepast op elke FooEvents Kaartjesthema. Ze volgen dezelfde onderliggende structuur en benadering. Zoek een thema dat lijkt op jouw ontwerp en gebruik het als uitgangspunt.

Samenvatting

Begin met Canvas, geef het een unieke naam in config.jsonplaats het in /wp-content/uploads/fooevents/themes/en wijs het toe aan een testproduct. Pas de opmaak aan in header.php, ticket.phpen voettekst.phpwaarbij de HTML conservatief en stijlen inline blijven. Gebruik de 'first-ticket guard' voor single-run elementen, pas indien nodig de HTML-uitvoer voorwaardelijk aan aan de PDF-uitvoer en vertrouw op pagina-einden voor PDF-paginering. Test previews, verstuur echte tickets opnieuw en valideer e-mails met meerdere tickets voordat je live gaat.