Centro assistenza FooEvents

Contatto
Ottieni FooEvents
Ottieni FooEvents

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        ← Declares name and compatibility (HTML/PDF/POS)
├─ header.php         ← Email/PDF head + opening body markup and CSS
├─ ticket.php         ← Main body; executes once per ticket
├─ footer.php         ← Closing body/html tags, footer CSS overrides
├─ images/            ← Image assets (including preview thumbnail)
├─ readme.txt         ← Theme metadata (human-facing)
└─ License/           ← GPL
└─ preview.jpg        ← Thumbnail shown in the Ticket Themes screen.

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):

{
  "name": "Canvas Ticket Theme",
  "supports-html": "true",
  "supports-pdf": "true",
  "supports-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:

"supports-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'] ) || ( __( 'Preview Event', 'woocommerce-events' ) === $ticket['name'] ) ) : ?>
    <!-- Header area that should output once -->
<?php endif; ?>

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>PDF Version</strong></p>
<?php else : ?>
  <p><strong>HTML Version</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>
<?php endif; ?>

<?php if ( ! empty( $ticket['WooCommerceEventsTicketHeaderImage'] ) ) : ?>
  <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:

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

o

&lt;img src="&lt;?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.

Repeat: edit, upload changed files and resend.

11) Modifiche e schemi comuni

Rendering condizionato per tipo di uscita

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

Mostra una sezione solo una volta per il primo biglietto

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

Interruzioni di pagina basate sul modulo

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

Uscita sicura

&lt;h2>&lt;?php echo esc_attr( $ticket['name'] ); ?>&lt;/h2>
&lt;p>&lt;?php echo wp_kses_post( $ticket['WooCommerceEventsTicketText'] ); ?>&lt;/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.

Hai bisogno di supporto?

Non trovi la risposta di cui hai bisogno? Il nostro team è qui per aiutarti, Contattami!