Argomenti

⌘K
  6. Argomenti
  8. Biglietti
  10. Temi dei biglietti personalizzati

Temi dei biglietti personalizzati

Questo documento mostra come costruire un tema personalizzato per i biglietti FooEvents partendo dal file Tema del biglietto su tela. Canvas è un modello iniziale progettato come base per la creazione di biglietti personalizzati. Presenta tutti i dati dei biglietti FooEvents in un formato semplice e pulito con HTML di base e un po' di PHP, il che lo rende ideale per l'estensione e il branding.

Verrà illustrato il layout delle cartelle, dove risiedono i temi, come funziona la configurazione, come assegnare il tema a un prodotto e i punti chiave per personalizzare in modo sicuro il markup sia per l'email HTML che per l'output PDF.

Prerequisiti

  • A WooCommerce sito con FooEvents installato e attivato.
  • Accesso FTP/SFTP (o equivalente) per caricare i file.
  • Un editor di codice (VS Code, Sublime, PhpStorm, ecc.).
  • Un prodotto di prova configurato come evento FooEvents, in modo da poter inviare anteprime e reinvio dei biglietti.

1) Scaricare il tema Canvas Ticket

Scaricare e decomprimere il file gratuito Tema del biglietto su tela al computer locale.

2) File del tema

Questi sono i file chiave da modificare quando si lavora sul tema dei biglietti personalizzato:

├─ config.json        ← Dichiara nome e compatibilità (HTML/PDF/POS)
├─ intestazione.php         ← Intestazione di e-mail/PDF + markup di apertura del corpo e CSS
├─ ticket.php         ← Corpo principale; viene eseguito una volta per ticket
├─ piè di pagina.php         ← Chiusura dei tag body/html, sovrascrittura CSS del piè di pagina
├─ immagini/            ← Risorse di immagine (compresa la miniatura di anteprima)
├─ readme.txt         ← Metadati del tema (rivolti all'uomo)
└─ Licenza/           ← GPL
└─ anteprima.jpg        ← Miniatura visualizzata nella schermata Temi del biglietto.

I file principali su cui si lavorerà sono i seguenti file modello:

  • intestazione.php di solito include un doctype XHTML rigoroso per le email, reset, modifiche di Outlook/Apple Mail e un $font_family segnaposto che Canvas già cabla.
  • ticket.php rende il contenuto del biglietto; viene eseguito per ogni biglietto nell'e-mail.
  • piè di pagina.php chiude il documento HTML/PDF.

3) Aggiornare il nome del tema del biglietto 

Creare una copia di lavoro del tema del biglietto su tela, in modo da poterlo modificare senza toccare l'originale.

Nome della cartella: #

Rinominare la cartella decompressa con uno slug univoco, ad esempio, cambiare 'canvas_custom_theme' in qualcosa come 'myticket_theme'. Dare al tema un nome distinto e dichiarare quali output supporta. Utilizzare solo lettere minuscole e trattini bassi (senza spazi). Il nome della cartella diventa il nome del tema.

config.json (Canvas default): #

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

Nel file config.json si può anche decidere se questo tema personalizzato supporterà anche i biglietti PDF. Se si intende progettare solo per le e-mail HTML, impostare:

"supporta-pdf": "false"

Se supportate sia l'HTML che il PDF, mantenetelo "vero" e testare entrambe le uscite separatamente.

Nota: Questi valori sono stringhe "vero"/"falso" in Canvas; mantenere questo formato per compatibilità.

readme.txt #

Aggiornare il "Nome del tema del biglietto" e la descrizione per riflettere il tema personalizzato. Questo file è informativo, ma è utile per la scansione di molti temi personalizzati.

anteprima.jpg #

Aggiornare la miniatura dell'immagine preview.jpg in modo che il tema del biglietto sia facilmente identificabile.

4) Caricare il tema del biglietto sul sito

I temi dei biglietti FooEvents si trovano in una cartella di temi FooEvents sul vostro sito. FooEvents rileva automaticamente i temi in questa cartella. Utilizzando FTP/SFTP, caricare la nuova cartella dei temi dei ticket nella seguente posizione del sito:

/wp-content/uploads/fooevents/themes/

5) Assegnare il tema personalizzato a un prodotto

Per testare e utilizzare un tema di ticket, è necessario assegnarlo a un prodotto. Aprire un prodotto WooCommerce che è stato configurato come evento FooEventse impostare le impostazioni del tema dei ticket in modo da utilizzare questo tema, così da poter inviare i ticket di prova effettivi durante l'iterazione.

In WordPress, modificare il prodotto dell'evento e aprire Dati del prodotto → Impostazioni del biglietto. Impostare il Tema HTML per i biglietti a Tema MyTicket, quindi salvare.

Se si utilizza anche Biglietti FooEvents PDFè possibile disabilitarlo durante i test, oppure se si è deciso di rendere il tema del biglietto compatibile con i PDF, assicurarsi di selezionare il nuovo tema sotto la voce Tema PDF Ticket impostazione.

6) Intestazione e piè di pagina della tela (boilerplate sicuro per le e-mail)

Utilizzate l'intestazione e il piè di pagina delle e-mail di Canvas come base per la compatibilità con le e-mail HTML (e un output PDF ragionevole). L'intestazione include CSS condizionali per Outlook (MSO), ripristini che impediscono la riformattazione di Gmail/Apple Mail e impostazioni predefinite conservative che mantengono i layout stabili tra i vari client e il rendering dei PDF.

7) Il ticket.php loop: struttura e modelli chiave

Capire come i temi dei biglietti renderizzano i dati, in modo da poter spostare/skinare gli elementi in modo sicuro.

La tela esegue ticket.php una volta per biglietto. Il file contiene in genere due parti concettuali:

  1. Un'area di "intestazione" che rende solo una volta (per il primo biglietto nell'e-mail del batch o durante l'anteprima).
  2. Un blocco ripetuto che rende per ogni biglietto.

"Guardia "Solo primo biglietto #

Vedrete una logica come questa in alto:

<?php if ( ( ! empty( $ticket['ticketNumber'] ) && 1 === $ticket['ticketNumber'] ) || ( __( 'Anteprima Evento', 'woocommerce-events' ) === $ticket['nome'] ) : ?

Quando si invia nuovamente all'indirizzo acquirente e più biglietti sono inclusi in un'e-mail, questo assicura che l'area dell'intestazione venga stampata una sola volta.

Esempio di HTML vs PDF #

Canvas distingue comunemente l'output in base al tipo di biglietto. Ciò avviene per garantire la compatibilità con la libreria DOMPDF, utilizzata per il rendering dei file PDF:

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

Utilizzate questa funzione per applicare piccole differenze specifiche al formato, se il vostro progetto lo richiede. Mantenete le modifiche al minimo; è facile introdurre divergenze tra HTML e PDF.

Loghi / immagini di intestazione #

Canvas stampa il logo e l'immagine di intestazione se forniti in Prodotto → Impostazioni del biglietto:

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

Interruzioni di pagina (per stampa/PDF) #

Canvas utilizza la logica modulo sul numero del biglietto per inserire le interruzioni di pagina:

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

Questo esempio inserisce un'interruzione di pagina dopo ogni biglietto dispari. Adattare la logica del modulo al proprio layout (ad esempio, interrompere ogni 1, 2 o 3 biglietti).

Campi dinamici comuni #

  • Nome dell'evento: <?php echo esc_attr( $ticket['name'] ); ?>
  • Date/orari (variano a seconda del tipo di evento): WooCommerceEventsDate, WooCommerceEventsEndDate, WooCommerceEventsHour, WooCommerceEventsMinutes, WooCommerceEventsPeriod, WooCommerceEventsTimeZone, ecc.
  • Aggiungi al calendario: eventi_pippo endpoint AJAX con evento e biglietto params.
  • Aggiungi al portafoglio: fooevents_wallet_pass endpoint AJAX con biglietto ID.
  • Codice a barre/QR: <?php echo esc_attr( $barcodeURL ); ?>
  • Varianti: iterare WooCommerceEventsVariationsFromID
  • Prenotazioni: WooCommerceEventsBookingSlot, WooCommerceEventsBookingDate
  • Posti a sedere: array_di_opzioni_di_sedute_di_pippo
  • Campi dei partecipanti: WooCommerceEventsAttendeeName, WooCommerceEventsAttendeeLastName, WooCommerceEventsAttendeeTelefono, WooCommerceEventsAttendeeCompany, ecc.
  • Campi personalizzati per i partecipanti: fooevents_custom_attendee_fields_options_array
  • Zoom: WooCommerceEventsZoomText (se abilitato)

Sicurezza: Canvas utilizza l'escape (esc_attr, wp_kses_post, esc_attr_e) in modo coerente. Conservarli quando si spostano i campi.

Differenza tra i modelli di tema per biglietti PDF singoli e multipli #

Se si utilizza il modello "Singolo" e un cliente acquista più biglietti, ogni biglietto apparirà sulla propria pagina nello stesso file PDF. Ogni biglietto avrà la propria immagine di intestazione, il proprio logo e i dettagli dell'evento. Se si utilizza il modello "Multiplo", il logo e i dettagli dell'evento appariranno all'inizio della pagina, seguiti da 3 biglietti e poi ancora dai dettagli dell'evento, seguiti da 3 biglietti, ecc. L'idea è che i dettagli dell'evento e i 3 biglietti stiano in una sola pagina, ma se si visualizzano molte informazioni, i biglietti potrebbero finire nella pagina successiva. Per modificare questa situazione, è possibile visualizzare meno informazioni o modificare il modello per rimuovere parte dell'imbottitura o ridurre la dimensione dei caratteri.

8) Riferimento alle immagini del tema

Caricare le immagini dalla cartella del tema immagini/ con un percorso affidabile.

A seconda della base, Canvas fornisce variabili che possono essere concatenate. Di solito si vede uno di questi schemi:

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

o

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

Ispezionare intestazione.php in Canvas per confermare le variabili nella copia. Risolvete sempre con un URL assoluto per e-mail.

9) Linee guida HTML/CSS per e-mail e PDF

Mantenete il markup conservativo in modo che venga visualizzato in modo coerente su tutti i client e nei PDF.

  • Utilizzare un layout basato su tabelle o minimo <div>s; nessun flex/grid complesso.
  • Inline gli stili critici (in particolare font, colori, spaziatura).
  • Evitate i font web nei PDF o fornite robusti fallback.
  • Ridurre al minimo gli elementi annidati e i galleggianti.
  • Utilizzo pagina-interruzione-prima-dopo per l'impaginazione dei PDF, ma fate delle prove con il vostro contenuto finale.
  • Mantenere le immagini reattive con max-width:100%; height:auto; e assoluto URL.
  • Testate gli output HTML e PDF separatamente dopo le modifiche.

10) Assegnazione, anteprima e iterazione

Convalidare il tema con dati realistici.

  • In Dati del prodotto → Impostazioni del biglietto, confermare Tema HTML per i biglietti (e Tema PDF Ticket if applicable) is set to your custom theme.
  • Create a test order or inviare di nuovo an existing ticket to your own inbox.
  • If tickets are emailed to the acquirente 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 e PDF (if supported).
  • Multi-ticket email to acquirente 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.

Sintesi

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 intestazione.php, ticket.php, e piè di pagina.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.