Témata

⌘K
  6. Témata
  8. Vstupenky
  10. Vlastní témata vstupenek

Vlastní témata vstupenek

Tento dokument ukazuje, jak vytvořit vlastní téma tipu FooEvents, a to tak, že začnete s motivem Téma vstupenky Canvas. Canvas je startovací šablona určená jako základ pro vlastní návrhy vstupenek. Veškerá data vstupenek FooEvents vypisuje v jednoduchém, čistém formátu se základním HTML a trochou PHP, což je ideální pro rozšíření a tvorbu značky.

Probereme rozložení složek, kde se motivy nacházejí, jak funguje konfigurace, jak přiřadit motiv k produktu a klíčová místa pro bezpečné přizpůsobení značek pro e-mail HTML i výstup PDF.

Předpoklady

  • A WooCommerce stránky s FooEvents nainstalován a aktivován.
  • přístup k FTP/SFTP (nebo ekvivalentní) pro nahrávání souborů.
  • Editor kódu (VS Code, Sublime, PhpStorm atd.).
  • Testovací produkt nakonfigurovaný jako událost FooEvents, abyste mohli odesílat náhledy tipů a opakovaná odeslání.

1) Stáhněte si téma Canvas Ticket

Stáhněte si a rozbalte bezplatný Téma vstupenky Canvas do místního počítače.

2) Soubory témat

Jedná se o klíčové soubory, které budete upravovat při práci na vlastním tématu vstupenky:

├─ config.json        ← Deklaruje název a kompatibilitu (HTML/PDF/POS)
├─ header.php         ← Hlavička e-mailu/PDF + úvodní značka těla a CSS
├─ ticket.php         ← Hlavní tělo; provede se jednou za tip
├─ footer.php         ← Uzavření body/html tagy, zápatí CSS přepisuje
├─ obrázky/            ← Obrázky (včetně náhledu miniatury)
├─ readme.txt         ← Metadata tématu (pro člověka)
└─ Licence/           ← GPL
└─ preview.jpg        ← Miniatura zobrazená na obrazovce Motivy tipu.

Hlavními soubory, na kterých budete pracovat, jsou následující soubory šablon:

  • header.php obvykle zahrnuje striktní e-mailový doctype XHTML, resetování, úpravy aplikace Outlook/Apple Mail a. $font_family zástupný symbol, který již Canvas zapojil.
  • ticket.php vykreslí obsah tipu; provede se pro každý tip v e-mailu.
  • footer.php uzavře dokument HTML/PDF.

3) Aktualizujte název tématu tipu 

Vytvořte pracovní kopii motivu tipu plátna, abyste jej mohli upravovat bez zásahu do originálu.

Název složky: #

Přejmenujte rozbalenou složku na jedinečný příznak, například změňte 'canvas_custom_theme' na něco jako 'myticket_theme'. Dejte svému motivu odlišný název a deklarujte, které výstupy podporuje. Používejte pouze malá písmena a podtržítka (bez mezer). Tento název složky se stane rukojetí vašeho motivu.

config.json (výchozí nastavení Canvas): #

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

V souboru config.json můžete také rozhodnout, zda bude toto vlastní téma podporovat také tipy PDF. Pokud máte v úmyslu navrhovat pouze pro HTML e-mail, nastavte:

"podporuje-pdf": "false"

Pokud budete podporovat HTML i PDF, ponechte si je. "true" a otestujte oba výstupy zvlášť.

Poznámka: Tyto hodnoty jsou řetězce "true"/"false" v programu Canvas; kvůli kompatibilitě zachovejte tento formát.

readme.txt #

Aktualizujte "Název tématu tipu" a popis tak, aby odpovídaly vašemu vlastnímu tématu. Tento soubor je informativní, ale pomáhá při skenování mnoha vlastních témat.

preview.jpg #

Aktualizujte miniaturu obrázku preview.jpg, aby bylo možné motiv tipu snadno identifikovat.

4) Nahrání tématu vstupenky na váš web

Motivy tipů FooEvents jsou umístěny ve složce motivu FooEvents na vašem webu. Motivy FooEvents se v tomto adresáři objeví automaticky. Pomocí FTP/SFTP nahrajte novou složku s motivem tiketu do následujícího umístění na vašem webu:

/wp-content/uploads/fooevents/themes/

5) Přiřazení vlastního motivu k produktu

Abyste mohli motiv tipu otestovat a používat, musíte jej přiřadit k produktu. Otevřete produkt WooCommerce, který byl nakonfigurováno jako událost FooEventsa nastavte nastavení motivu tipu tak, aby používalo tento motiv tipu, abyste mohli odesílat skutečné testovací tipy během iterace.

V aplikaci WordPress upravte svůj produkt události a otevřete položku Údaje o produktu → Nastavení tipu. Nastavte Téma vstupenky HTML na Téma MyTicket, a poté uložte.

Pokud používáte také Vstupenky FooEvents PDF, můžete ji během testování buď zakázat, nebo pokud jste se rozhodli, že vaše téma tiketu bude kompatibilní s PDF, nezapomeňte vybrat nové téma v části Téma vstupenky PDF nastavení.

6) Záhlaví a zápatí plátna (šablona bezpečná pro e-mail)

Použijte záhlaví a zápatí e-mailu Canvas jako základ pro kompatibilitu s e-maily HTML (a rozumný výstup do PDF). Záhlaví obsahuje podmíněné CSS pro Outlook (MSO), resetování, které zabraňuje přeformátování Gmail/Apple Mail, a konzervativní výchozí nastavení, které udržuje stabilní rozvržení napříč klienty a vykreslováním PDF.

7) ticket.php smyčka: struktura a klíčové vzory

Pochopte, jak témata tipů vykreslují data, abyste mohli bezpečně přesouvat prvky/skinovat je.

Plátno provádí ticket.php jednou za tip. Soubor obvykle obsahuje dvě koncepční části:

  1. Oblast "záhlaví", která zobrazuje pouze jednou (pro první tip v hromadném e-mailu nebo při náhledu).
  2. Opakovaný blok, který se vykresluje pro každý lístek.

"Pouze první vstupenka" #

Nahoře uvidíte takovouto logiku:

Při opětovném odeslání do kupující a v jednom e-mailu je obsaženo více tipů, je zajištěno, že se oblast záhlaví vytiskne pouze jednou.

Příklad HTML vs. PDF #

Plátno běžně rozlišuje výstup podle typu tipu. To se děje kvůli zajištění kompatibility s knihovnou DOMPDF, která se používá k vykreslování souborů PDF:

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

Pokud to váš návrh potřebuje, použijte tuto funkci k použití malých rozdílů specifických pro formát. Změny provádějte minimálně; je snadné vnést rozdíly mezi HTML a PDF.

Loga / obrázky záhlaví #

Plátno vytiskne logo a obrázek záhlaví, pokud je zadán v položce Produkt → Nastavení tipu:

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

Zlomy stránek (pro tisk/PDF) #

K vložení zlomu stránky používá plátno logiku modulo na čísle tipu:

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

Tento příklad vloží zlom stránky po každém lichém tipu. Upravte logiku modulo pro své rozložení (např. přerušení po 1, 2 nebo 3 tipech).

Běžná dynamická pole, která uvidíte #

  • Název akce: <?php echo esc_attr( $ticket['name'] ); ?>
  • Termíny/časy (liší se podle typu akce): WooCommerceEventsDate, WooCommerceEventsEndDate, WooCommerceEventsHour, WooCommerceEventsMinutes, WooCommerceEventsPeriod, WooCommerceEventsTimeZone, atd.
  • Přidat do kalendáře: fooevents_ics Koncový bod AJAX s událost a vstupenka params.
  • Přidat do peněženky: fooevents_wallet_pass Koncový bod AJAX s vstupenka ID.
  • Čárový kód/QR: <?php echo esc_attr( $barcodeURL ); ?>
  • Varianty: iterovat WooCommerceEventsVariationsFromID
  • Rezervace: WooCommerceEventsBookingSlot, WooCommerceEventsBookingDate
  • Sedadla: fooevents_seating_options_array
  • Pole pro účastníky: WooCommerceEventsAttendeeName, WooCommerceEventsAttendeeLastName, WooCommerceEventsAttendeeTelephone, WooCommerceEventsAttendeeCompany, atd.
  • Vlastní pole pro účastníky: fooevents_custom_attendee_fields_options_array
  • Přiblížení: WooCommerceEventsZoomText (pokud je povoleno)

Zabezpečení: Plátno používá escapování (esc_attr, wp_kses_post, esc_attr_e) důsledně. Při přesouvání polí je zachovejte.

Rozdíl mezi jednotlivými a vícenásobnými šablonami vstupenek PDF #

Pokud používáte šablonu "Single" a zákazník si zakoupí více vstupenek, každá vstupenka se zobrazí na vlastní stránce v jednom souboru PDF. Každá vstupenka bude mít vlastní obrázek v záhlaví, logo a podrobnosti o události. Používáte-li šablonu "Multiple", pak se logo a podrobnosti o události zobrazí v horní části stránky, za nimiž budou následovat 3 vstupenky a poté opět podrobnosti o události, za nimiž budou následovat 3 vstupenky atd. Jde o to, aby se podrobnosti o události a 3 vstupenky vešly na jednu stránku, ale pokud zobrazujete mnoho informací, pak tyto vstupenky mohou přebíhat na další stránku. Chcete-li to změnit, můžete buď zobrazit méně informací, nebo přepsat šablonu a odstranit část výplně nebo zmenšit velikost písma.

8) Odkazování na tematické obrázky

Načtení obrázků z motivu obrázky/ se spolehlivou cestou.

V závislosti na základně poskytuje Canvas proměnné, které můžete spojovat. Běžně se setkáte s jedním z těchto vzorů:

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

nebo

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

Zkontrolujte stránky header.php v nástroji Canvas potvrdit proměnné ve své kopii. Vždy řešte na absolutní adresa URL pro e-mail.

9) Pokyny HTML/CSS pro e-mail a PDF

Zachovejte konzervativní značení, aby se konzistentně vykreslovalo u všech klientů a v souborech PDF.

  • Použijte rozvržení založené na tabulkách nebo minimální <div>s; žádný složitý flex/mřížka.
  • Inline kritické styly (zejména písma, barvy, mezery).
  • Vyhněte se webovým písmům v souborech PDF nebo poskytněte robustní záložní řešení.
  • Minimalizace vnořených prvků a plovoucích prvků.
  • Použijte page-break-before/after pro stránkování PDF, ale vyzkoušejte to s konečným obsahem.
  • Udržujte odezvu obrázků pomocí max-width:100%; height:auto; a absolutní Adresy URL.
  • Po změnách otestujte výstupy HTML a PDF odděleně.

10) Přiřazení, náhled a iterace

Ověřte téma pomocí reálných dat.

  • Na adrese Údaje o produktu → Nastavení tipu, potvrdit Téma vstupenky HTML (a Téma vstupenky PDF je nastaven na váš vlastní motiv.
  • Vytvořit testovací objednávku nebo znovu odeslat existujícího tipu do vlastní schránky.
  • Pokud jsou vstupenky zaslány e-mailem kupující a objednávka obsahuje více vstupenek, bude e-mail obsahovat více bloků vstupenek-zkontrolujte, zda jsou mezery a nadpisy stále správně.

Opakujte: upravte, nahrajte změněné soubory a znovu odešlete.

11) Běžné úpravy a vzory

Podmíněné vykreslování podle typu výstupu

Ukázat oddíl pouze jednou pro první jízdenku

Členění stránek na základě modula

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

Bezpečný výstup

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

12) Kontrolní seznam pro testování

  • Náhled + opětovné odeslání testů pro HTML a PDF (pokud je podporován).
  • E-mail s více lístky na adresu kupující přehledně vykreslí více bloků tipu.
  • Obrázky jsou vyřešeny (žádné nefunkční odkazy; absolutní adresy URL).
  • Hlavní e-mailoví klienti: Gmail (web/mobil), Apple Mail, Outlook desktop/web.
  • Pokud jsou povoleny soubory PDF: tiskněte do PDF nebo generujte oficiální lístky PDF a potvrďte stránkování, okraje a písma.

13) Řešení problémů

  • Téma se nezobrazuje v rozbalovacím seznamu: Potvrďte cestu ke složce a config.json "name" je jedinečný; vymažte mezipaměť a znovu načtěte obrazovku úprav produktu.
  • Obrázky se v e-mailu nenačítají: Zajistěte absolutní adresy URL; vyhněte se URL vztahujícím se k protokolu; potvrďte oprávnění k aktivům.
  • Podivné rozestupy v aplikaci Outlook: Omezte vnořené prvky, spoléhejte na tabulky a zjednodušte CSS.
  • Problémy s rozvržením PDF: Používejte jednodušší struktury, přidejte explicitní zlomy stránek, vyhněte se floatům a složitému pozicování.

Další témata

Stejný postup lze použít na jakýkoli FooEvents Téma vstupenky. Mají stejnou základní strukturu a přístup. Najděte téma, které je podobné vašemu návrhu, a použijte ho jako výchozí bod.

Souhrn

Začněte s Plátno, dejte mu jedinečný název v config.json, umístěte ji do /wp-content/uploads/fooevents/themes/a přiřadit jej k testovanému produktu. Přizpůsobte značení v header.php, ticket.phpa footer.php, při zachování konzervativního jazyka HTML a stylů inline. Použijte hlídání prvního lístku pro prvky s jedním spuštěním, v případě potřeby podmíněně upravte výstup HTML oproti PDF a spoléhejte se na zalomení stránek pro stránkování PDF. Testujte náhledy, znovu odesílejte skutečné tikety a ověřujte e-maily s více tikety před spuštěním do ostrého provozu.