Tematy

⌘K
  6. Tematy
  8. Bilety
  10. Niestandardowe motywy biletów

Niestandardowe motywy biletów

W tym dokumencie pokazano, jak utworzyć niestandardowy motyw biletu FooEvents, zaczynając od Motyw Canvas Ticket. Canvas to szablon startowy zaprojektowany jako podstawa dla niestandardowych projektów biletów. Wyświetla wszystkie dane biletów FooEvents w prostym, czystym formacie z podstawowym HTML i odrobiną PHP, co czyni go idealnym do rozszerzenia i brandingu.

Omówimy układ folderów, gdzie znajdują się szablony, jak działa konfiguracja, jak przypisać szablon do produktu oraz kluczowe miejsca, w których można bezpiecznie dostosować znaczniki zarówno dla wiadomości e-mail HTML, jak i plików PDF.

Wymagania wstępne

  • A WooCommerce strona z FooEvents zainstalowany i aktywowany.
  • Dostęp FTP/SFTP (lub równoważny) do przesyłania plików.
  • Edytor kodu (VS Code, Sublime, PhpStorm itp.).
  • Produkt testowy skonfigurowany jako zdarzenie FooEvents, dzięki czemu można wysyłać podglądy i ponowne wysyłanie biletów.

1) Pobierz motyw Canvas Ticket

Pobierz i rozpakuj bezpłatną aplikację Motyw Canvas Ticket do komputera lokalnego.

2) Pliki motywu

Są to kluczowe pliki, które będziesz edytować podczas pracy nad niestandardowym motywem biletów:

├─ config.json        ← Deklaruje nazwę i zgodność (HTML/PDF/POS)
├─ header.php         ← Nagłówek wiadomości e-mail/PDF + znaczniki otwierające treść i CSS
├─ ticket.php         ← Ciało główne; wykonuje się raz na bilet
├─ footer.php         ← Zamykanie tagów body/html, nadpisywanie CSS stopki
├─ obrazy/            ← Zasoby obrazu (w tym miniatura podglądu)
├─ readme.txt         ← Metadane tematu (skierowane do człowieka)
└─ Licencja/           ← GPL
└─ preview.jpg        ← Miniatura wyświetlana na ekranie Motywy biletów.

Głównymi plikami, nad którymi będziesz pracować, są następujące pliki szablonów:

  • header.php będzie zazwyczaj zawierać ścisły doctype wiadomości e-mail XHTML, resetowanie, poprawki Outlook/Apple Mail, oraz $font_family symbol zastępczy, który Canvas już podłączył.
  • ticket.php renderuje zawartość biletu; jest wykonywany za każdy bilet w wiadomości e-mail.
  • footer.php zamyka dokument HTML/PDF.

3) Zaktualizuj nazwę motywu biletu 

Utwórz kopię roboczą motywu Canvas Ticket, aby móc go modyfikować bez dotykania oryginału.

Nazwa folderu: #

Zmień nazwę rozpakowanego folderu na unikalny slug, na przykład zmień ‘canvas_custom_theme’ na coś w rodzaju ‘myticket_theme’. Nadaj swojemu motywowi odrębną nazwę i zadeklaruj, które wyjścia obsługuje. Używaj tylko małych liter i podkreśleń (bez spacji). Ta nazwa folderu stanie się uchwytem motywu.

config.json (domyślnie Canvas): #

{
  "name": "Canvas Ticket Theme",
  "supports-html": "true",
  "supports-pdf": "true",
  "supports-pos": "false"
}

W pliku config.json można również zdecydować, czy ten niestandardowy motyw będzie również obsługiwał bilety PDF. Jeśli zamierzasz projektować tylko dla wiadomości e-mail HTML, ustaw:

"supports-pdf": "false"

Jeśli będziesz obsługiwać zarówno HTML, jak i PDF, zachowaj to "true" i przetestować oba wyjścia oddzielnie.

Uwaga: Wartości te są ciągami znaków "true"/"false" w Canvas; zachowaj ten format dla kompatybilności.

readme.txt #

Zaktualizuj “Nazwę motywu biletu” i opis, aby odzwierciedlały niestandardowy motyw. Ten plik ma charakter informacyjny, ale pomaga podczas skanowania wielu niestandardowych motywów.

preview.jpg #

Zaktualizuj miniaturę obrazu preview.jpg, aby motyw biletu był łatwy do zidentyfikowania.

4) Wgrywanie motywu Ticket do witryny

Motywy biletów FooEvents znajdują się w folderze motywów FooEvents w witrynie. FooEvents automatycznie wykrywa motywy w tym katalogu. Korzystając z protokołu FTP/SFTP, prześlij nowy folder motywu do następującej lokalizacji w witrynie:

/wp-content/uploads/fooevents/themes/

5) Przypisz motyw niestandardowy do produktu

Aby przetestować i używać motywu zgłoszenia, należy przypisać go do produktu. Otwórz produkt WooCommerce, który został skonfigurowane jako zdarzenie FooEvents, i ustaw ustawienia motywu zgłoszenia, aby używać tego motywu zgłoszenia, dzięki czemu można wysyłać rzeczywiste zgłoszenia testowe podczas iteracji.

W programie WordPress edytuj produkt wydarzenia i otwórz opcję Dane produktu → Ustawienia biletu. Ustaw Motyw biletu HTML do Motyw MyTicket, a następnie zapisz.

Jeśli używasz również Bilety FooEvents PDF, Możesz ją wyłączyć podczas testowania lub, jeśli zdecydowałeś się uczynić swój szablon biletu kompatybilnym z PDF, upewnij się, że wybrałeś nowy szablon w sekcji Motyw biletu PDF ustawienie.

6) Nagłówek i stopka Canvas (szablon bezpieczny dla wiadomości e-mail)

Użyj nagłówka i stopki e-mail Canvas jako podstawy kompatybilności z wiadomościami e-mail w formacie HTML (i rozsądnym wydrukiem PDF). Nagłówek zawiera warunkowy CSS dla Outlooka (MSO), resetowanie, które zapobiega ponownemu formatowaniu Gmail/Apple Mail oraz konserwatywne ustawienia domyślne, które utrzymują układy stabilne w różnych klientach i renderowaniu PDF.

7) ticket.php Pętla: struktura i kluczowe wzorce

Dowiedz się, jak motywy biletów renderują dane, aby móc bezpiecznie przenosić elementy.

Canvas wykonuje ticket.php raz na bilet. Plik zawiera zazwyczaj dwie części koncepcyjne:

  1. Obszar “nagłówka”, który renderuje tylko raz (dla pierwszego zgłoszenia w wiadomości wsadowej lub podczas podglądu).
  2. Powtarzający się blok, który renderuje dla każdy bilet.

“Strażnik ”Tylko pierwszy bilet" #

U góry zobaczysz taką logikę:

Podczas ponownego wysyłania do nabywca Jeśli w jednej wiadomości e-mail znajduje się wiele biletów, obszar nagłówka zostanie wydrukowany tylko raz.

Przykład HTML vs PDF #

Canvas zwykle rozróżnia dane wyjściowe na podstawie typu biletu. Ma to na celu zapewnienie kompatybilności z biblioteką DOMPDF, która jest używana do renderowania plików PDF:

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

Użyj tego, aby zastosować niewielkie różnice specyficzne dla formatu, jeśli wymaga tego projekt. Zmiany powinny być minimalne; łatwo jest wprowadzić rozbieżności między HTML i PDF.

Logotypy / obrazy nagłówków #

Canvas drukuje logo i obraz nagłówka, jeśli podano je w sekcji Produkt → Ustawienia biletów:

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

Podziały stron (dla druku/PDF) #

Canvas używa logiki modulo na numerze biletu do wstawiania podziałów stron:

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

Ten przykład wstawia podział strony po każdym bilecie z numerem nieparzystym. Dostosuj logikę modulo do swojego układu (np. przerwij co 1, 2 lub 3 bilety).

Najczęściej spotykane pola dynamiczne #

  • Nazwa wydarzenia: .
  • Daty/godziny (różnią się w zależności od typu wydarzenia): WooCommerceEventsDate, WooCommerceEventsEndDate, WooCommerceEventsHour, WooCommerceEventsMinutes, WooCommerceEventsPeriod, WooCommerceEventsTimeZone, itd.
  • Dodaj do kalendarza: fooevents_ics Punkt końcowy AJAX z wydarzenie i bilet params.
  • Dodaj do portfela: fooevents_wallet_pass Punkt końcowy AJAX z bilet ID.
  • Kod kreskowy/QR: <?php echo esc_attr( $barcodeURL ); ?>
  • Variations: iterate WooCommerceEventsVariationsFromID
  • Bookings: WooCommerceEventsBookingSlot, WooCommerceEventsBookingDate
  • Seating: fooevents_seating_options_array
  • Attendee fields: WooCommerceEventsAttendeeName, WooCommerceEventsAttendeeLastName, WooCommerceEventsAttendeeTelephone, WooCommerceEventsAttendeeCompany, itd.
  • Custom attendee fields: fooevents_custom_attendee_fields_options_array
  • Zoom: WooCommerceEventsZoomText (if enabled)

Security: Canvas uses escaping (esc_attr, wp_kses_post, esc_attr_e) consistently. Preserve these when moving fields around.

Różnica między pojedynczymi i wielokrotnymi szablonami motywów biletów PDF #

Jeśli korzystasz z szablonu "Pojedynczy", a klient kupi wiele biletów, każdy bilet pojawi się na osobnej stronie w tym samym pliku PDF. Każdy bilet będzie miał własny obraz nagłówka, logo i szczegóły wydarzenia. Jeśli korzystasz z szablonu "Multiple", logo i szczegóły wydarzenia pojawią się u góry strony, a następnie 3 bilety, a następnie ponownie szczegóły wydarzenia, a następnie 3 bilety itd. Chodzi o to, aby szczegóły wydarzenia i 3 bilety zmieściły się na jednej stronie, ale jeśli wyświetlasz dużo informacji, bilety mogą przejść na następną stronę. Aby to zmienić, można wyświetlić mniej informacji lub zastąpić szablon, aby usunąć część wypełnienia lub zmniejszyć rozmiar czcionki.

8) Referencing theme images

Load images from your theme’s obrazy/ 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="..." />

lub

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

Inspect header.php in Canvas to confirm the variables in your copy. Always resolve to an absolute URL for email.

9) HTML/CSS guidelines for email and PDF

Keep markup conservative so it renders consistently across clients and in PDFs.

  • Use table-based layout or minimal <div>s; no complex flex/grid.
  • Inline critical styles (especially fonts, colors, spacing).
  • Avoid web fonts in PDFs or provide robust fallbacks.
  • Minimize nested elements and floats.
  • Use page-break-before/after for PDF pagination, but test with your final content.
  • Keep images responsive with max-width:100%; height:auto; i absolute URLs.
  • Test HTML and PDF outputs separately after changes.

10) Assign, preview, and iterate

Validate the theme with realistic data.

  • In Dane produktu → Ustawienia biletu, confirm Motyw HTML Ticket (and Motyw biletu PDF if applicable) is set to your custom theme.
  • Create a test order or ponowne wysłanie an existing ticket to your own inbox.
  • If tickets are emailed to the nabywca and an order contains multiple tickets, the email will include multiple ticket blocks—verify spacing and headings still look right.

Repeat: edit, upload changed files and resend.

11) Common tweaks & patterns

Conditional rendering by output type

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

Only show a section once for the first ticket

<?php if ( ! empty( $ticket['ticketNumber'] ) && 1 === (int) $ticket['ticketNumber'] ) : ?>
  <!-- One-time header content -->
<?php endif; ?>

Modulo-based page breaks

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

Safe output

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

12) Testing checklist

  • Preview + resend tests for HTML i PDF (if supported).
  • Multi-ticket email to nabywca renders multiple ticket blocks neatly.
  • Images resolve (no broken links; absolute URLs).
  • Major email clients: Gmail (web/mobile), Apple Mail, Outlook desktop/web.
  • If PDFs are enabled: print to PDF or generate official PDF tickets and confirm pagination, margins, and fonts.

13) Troubleshooting

  • Theme not showing in dropdown: Confirm folder path and config.json "name" is unique; clear caches and reload the product edit screen.
  • Images not loading in email: Ensure absolute URLs; avoid protocol-relative URLs; confirm asset permissions.
  • Weird spacing in Outlook: Reduce nested elements, rely on tables, and simplify CSS.
  • PDF layout issues: Use simpler structures, add explicit page breaks, avoid floats and complex positioning.

Other Themes

The same process can be applied to any FooEvents Ticket theme. They follow the same underlying structure and approach. Find a theme that is similar to your design, and use it as a starting point.

Podsumowanie

Start with Canvas, give it a unique name in config.json, place it in /wp-content/uploads/fooevents/themes/, and assign it to a test product. Customize the markup in header.php, ticket.phporaz footer.php, keeping the HTML conservative and styles inline. Use the first-ticket guard for single-run elements, conditionally tweak HTML vs PDF output if needed, and rely on page breaks for PDF pagination. Test previews, resend real tickets, and validate multi-ticket emails before going live.