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: .
  • Warianty: iteruj WooCommerceEventsVariationsFromID
  • Rezerwacje: WooCommerceEventsBookingSlot, WooCommerceEventsBookingDate
  • Miejsca siedzące: fooevents_seating_options_array
  • Pola uczestników: WooCommerceEventsAttendeeName, WooCommerceEventsAttendeeLastName, WooCommerceEventsAttendeeTelephone, WooCommerceEventsAttendeeCompany, itd.
  • Niestandardowe pola uczestników: fooevents_custom_attendee_fields_options_array
  • Zoom: WooCommerceEventsZoomText (jeśli włączone)

Bezpieczeństwo: Canvas używa ucieczki (esc_attr, wp_kses_post, esc_attr_e). Należy je zachować podczas przenoszenia pól.

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) Odwoływanie się do obrazów tematycznych

Załaduj obrazy z szablonu obrazy/ z niezawodną ścieżką.

W zależności od bazy, Canvas zapewnia zmienne, które można łączyć. Często można zobaczyć jeden z tych wzorców:

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

lub

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

Kontrola header.php w Canvas, aby potwierdzić zmienne w kopii. Zawsze rozwiązuj do bezwzględny adres URL e-mail.

9) Wytyczne HTML/CSS dla wiadomości e-mail i PDF

Zachowaj konserwatywne znaczniki, aby renderowały się spójnie na różnych klientach i w plikach PDF.

  • Użyj układu opartego na tabelach lub minimalnego <div>s; brak złożonej elastyczności/siatki.
  • Inline krytyczne style (zwłaszcza czcionki, kolory, odstępy).
  • Unikaj czcionek internetowych w plikach PDF lub zapewnij solidne rozwiązania awaryjne.
  • Minimalizuje zagnieżdżone elementy i pływaki.
  • Użycie page-break-before/after dla paginacji PDF, ale przetestuj z ostateczną zawartością.
  • Zachowaj responsywność obrazów dzięki max-width:100%; height:auto; i absolutny Adresy URL.
  • Przetestuj wyjścia HTML i PDF osobno po wprowadzeniu zmian.

10) Przypisywanie, podgląd i iteracja

Zweryfikuj motyw za pomocą realistycznych danych.

  • W Dane produktu → Ustawienia biletu, potwierdzić Motyw HTML Ticket (oraz Motyw biletu PDF jeśli dotyczy) jest ustawiony na niestandardowy motyw.
  • Utwórz zlecenie testowe lub ponowne wysłanie istniejącego zgłoszenia do własnej skrzynki odbiorczej.
  • Jeśli bilety są wysyłane e-mailem do nabywca a zamówienie zawiera wiele biletów, wiadomość e-mail będzie zawierać wiele bloków biletów-Sprawdź, czy odstępy i nagłówki nadal wyglądają prawidłowo.

Powtórz: edytuj, prześlij zmienione pliki i wyślij ponownie.

11) Typowe poprawki i wzorce

Renderowanie warunkowe według typu wyjścia

Pokaż sekcję tylko raz dla pierwszego biletu

Podziały stron oparte na modulo

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

Bezpieczne wyjście

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

12) Lista kontrolna testów

  • Podgląd + ponowne wysłanie testów dla HTML i PDF (jeśli jest obsługiwany).
  • E-mail z wieloma biletami do nabywca starannie renderuje wiele bloków biletów.
  • Obrazy działają poprawnie (brak niedziałających linków; bezwzględne adresy URL).
  • Główni klienci poczty e-mail: Gmail (web/mobile), Apple Mail, Outlook desktop/web.
  • Jeśli pliki PDF są włączone: wydrukuj do pliku PDF lub wygeneruj oficjalne bilety PDF i potwierdź paginację, marginesy i czcionki.

13) Rozwiązywanie problemów

  • Motyw nie jest wyświetlany w menu rozwijanym: Potwierdź ścieżkę folderu i config.json "name" jest unikalny; wyczyść pamięć podręczną i przeładuj ekran edycji produktu.
  • Obrazy nie ładują się w wiadomości e-mail: Zapewnij bezwzględne adresy URL; unikaj adresów URL zależnych od protokołu; potwierdź uprawnienia zasobów.
  • Dziwne odstępy w programie Outlook: Ogranicz zagnieżdżone elementy, polegaj na tabelach i uprość CSS.
  • Problemy z układem pliku PDF: Używaj prostszych struktur, dodawaj wyraźne podziały stron, unikaj pływaków i złożonego pozycjonowania.

Inne tematy

Ten sam proces można zastosować do każdego Motyw FooEvents Ticket. Mają one tę samą podstawową strukturę i podejście. Znajdź motyw, który jest podobny do twojego projektu i użyj go jako punktu wyjścia.

Podsumowanie

Zacznij od Płótno, nadać mu unikalną nazwę w config.json, umieść go w /wp-content/uploads/fooevents/themes/, i przypisz go do produktu testowego. Dostosuj znaczniki w header.php, ticket.phporaz footer.php, zachowując konserwatywny HTML i style inline. Użyj osłony pierwszego biletu dla elementów pojedynczego przebiegu, w razie potrzeby warunkowo dostosuj dane wyjściowe HTML i PDF oraz polegaj na podziałach stron dla paginacji PDF. Testuj podglądy, ponownie wysyłaj prawdziwe bilety i waliduj wiadomości e-mail z wieloma biletami przed uruchomieniem.