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 se applicabile) è impostato sul tema personalizzato.
  • Creare un ordine di prova o inviare di nuovo un ticket esistente nella propria casella di posta.
  • Se i biglietti vengono inviati via e-mail al acquirente e un ordine contiene più biglietti, l'e-mail includerà blocchi multipli di biglietti-Verificare che la spaziatura e le intestazioni siano ancora corrette.

Ripetere: modificare, caricare i file modificati e inviare nuovamente.

11) Modifiche e schemi comuni

Rendering condizionato per tipo di uscita

<?php if ( ! empty( $ticket['type'] ) && 'PDF' === $ticket['type'] ) : ?

Mostra una sezione solo una volta per il primo biglietto

<?php if ( ! empty( $ticket['ticketNumber'] ) && 1 === (int) $ticket['ticketNumber'] ) : ?

Interruzioni di pagina basate sul modulo

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

Uscita sicura

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

12) Lista di controllo dei test

  • Anteprima + reinvio dei test per HTML e PDF (se supportato).
  • Email con più biglietti a acquirente rende ordinatamente più blocchi di biglietti.
  • Le immagini si risolvono (nessun link interrotto; URL assoluti).
  • I principali client di posta elettronica: Gmail (web/mobile), Apple Mail, Outlook desktop/web.
  • Se i PDF sono abilitati: stampare in PDF o generare biglietti PDF ufficiali e confermare l'impaginazione, i margini e i caratteri.

13) Risoluzione dei problemi

  • Il tema non viene visualizzato nel menu a tendina: Confermare il percorso della cartella e config.json "nome" è unico; cancellare la cache e ricaricare la schermata di modifica del prodotto.
  • Le immagini non vengono caricate nell'e-mail: Assicurare URL assoluti; evitare URL relativi al protocollo; confermare le autorizzazioni delle risorse.
  • Strana spaziatura in Outlook: Ridurre gli elementi annidati, affidarsi alle tabelle e semplificare i CSS.
  • Problemi di layout dei PDF: Utilizzate strutture più semplici, aggiungete interruzioni di pagina esplicite, evitate i float e i posizionamenti complessi.

Altri temi

Lo stesso processo può essere applicato a qualsiasi FooEvents Tema del biglietto. Seguono la stessa struttura e lo stesso approccio di fondo. Trovate un tema simile al vostro progetto e usatelo come punto di partenza.

Sintesi

Iniziare con Tela, attribuendogli un nome univoco in config.json, posizionarlo in /wp-content/uploads/fooevents/themes/, e assegnarlo a un prodotto di prova. Personalizzare il markup in intestazione.php, ticket.php, e piè di pagina.php, mantenendo il conservatore HTML e gli stili in linea. Utilizzate il first-ticket guard per gli elementi a singola esecuzione, modificate in modo condizionale l'output HTML rispetto a quello PDF, se necessario, e affidatevi alle interruzioni di pagina per l'impaginazione dei PDF. Testate le anteprime, reinviate i ticket reali e convalidate le e-mail a più ticket prima di andare in onda.