Tópicos

⌘K
  6. Tópicos
  8. Bilhetes
  10. Temas de bilhetes personalizados

Temas de bilhetes personalizados

Este documento mostra como criar um tema de bilhete FooEvents personalizado, começando com o Canvas Ticket Theme. Canvas is a starter template designed as a foundation for custom ticket designs. It outputs all FooEvents ticket data in a simple, clean format with basic HTML and a little PHP, which makes it ideal for extending and branding.

We’ll cover the folder layout, where themes live, how the config works, how to assign your theme to a product, and the key places to customize markup safely for both HTML email and PDF output.

Pré-requisitos

  • A WooCommerce sítio com FooEvents instalado e ativado.
  • Acesso FTP/SFTP (ou equivalente) para carregar ficheiros.
  • Um editor de código (VS Code, Sublime, PhpStorm, etc.).
  • Um produto de teste configurado como um evento FooEvents para que possa enviar pré-visualizações e reenvios de bilhetes.

1) Descarregar o tema Canvas Ticket

Descarregue e descomprima a versão gratuita do Canvas Ticket Theme para o seu computador local.

2) Ficheiros de tema

Estes são os principais ficheiros que irá editar quando trabalhar no seu tema de bilhetes personalizado:

├─ config.json        ← Declara o nome e a compatibilidade (HTML/PDF/POS)
├─ header.php         ← Cabeçalho do e-mail/PDF + marcação do corpo de abertura e CSS
├─ ticket.php         ← Corpo principal; executa-se uma vez por bilhete
├─ rodapé.php         ← Fechamento de tags body/html, substituições de CSS de rodapé
├─ imagens/            ← Recursos de imagem (incluindo miniatura de pré-visualização)
├─ readme.txt         ← Metadados do tema (virados para o ser humano)
└─ Licença/           ← GPL
└─ pré-visualização.jpg        ← Miniatura apresentada no ecrã Temas de bilhetes.

Os principais ficheiros em que irá trabalhar são os seguintes ficheiros modelo:

  • header.php incluirá normalmente um doctype de correio eletrónico XHTML rigoroso, reinicializações, ajustes no Outlook/Apple Mail e um $font_family que o Canvas já ligou.
  • ticket.php renderiza o conteúdo do bilhete; é executado por cada bilhete no correio eletrónico.
  • rodapé.php encerra o documento HTML/PDF.

3) Atualizar o nome do tema do bilhete 

Crie uma cópia de trabalho do tema de bilhete do Canvas para poder modificá-lo sem tocar no original.

Nome da pasta: #

Rename the unzipped folder to a unique slug, for example, change ‘canvas_custom_theme’ to something like ‘myticket_theme’. Give your theme a distinct name and declare which outputs it supports. Use lowercase and underscores only (no spaces). This folder name becomes your theme’s handle.

config.json (predefinição do Canvas): #

{
  "nome": "Canvas Ticket Theme",
  "suporta-html": "true" (verdadeiro),
  "suporta-pdf": "true",
  "supports-pos": "false"
}

No ficheiro config.json, também pode decidir se este tema personalizado também suporta bilhetes em PDF. Se pretender conceber apenas para correio eletrónico HTML, defina:

"supports-pdf": "false" (falso)

Se for compatível com HTML e PDF, mantenha-o "verdadeiro" e testar ambas as saídas separadamente.

Nota: Estes valores são cadeias de caracteres "verdadeiro"/"falso" no Canvas; mantenha esse formato por uma questão de compatibilidade.

readme.txt #

Actualize o "Nome do tema do bilhete" e a descrição para refletir o seu tema personalizado. Este ficheiro é informativo, mas ajuda a analisar muitos temas personalizados.

pré-visualização.jpg #

Actualize a miniatura da imagem preview.jpg para que o tema do bilhete seja fácil de identificar.

4) Carregamento do tema do bilhete para o seu site

Os temas dos bilhetes do FooEvents estão localizados numa pasta de temas do FooEvents no seu site. O FooEvents descobre automaticamente os temas nesta pasta. Utilizando FTP/SFTP, carregue a sua nova pasta de temas de bilhetes para o seguinte local no seu sítio:

/wp-content/uploads/fooevents/themes/

5) Atribuir o tema personalizado a um produto

Para testar e utilizar um tema de bilhete, terá de o atribuir a um produto. Abra um produto WooCommerce que tenha sido configurado como um evento FooEvents, and set the ticket theme settings to use this ticket theme so you can send actual test tickets while you iterate.

In WordPress, edit your event product and open Dados do produto → Definições da senha. Definir o Tema de bilhete HTML para Tema MyTicket, then save.

If you’re also using FooEvents Bilhetes PDFSe o tema do seu bilhete for compatível com PDF, certifique-se de que seleciona o seu novo tema na secção Tema de bilhetes PDF configuração.

6) Cabeçalho e rodapé do ecrã (modelo seguro para correio eletrónico)

Use o cabeçalho e o rodapé de e-mail do Canvas como base para compatibilidade de e-mail HTML (e saída razoável de PDF). O cabeçalho inclui CSS condicional para Outlook (MSO), redefinições que impedem a reformatação do Gmail/Apple Mail e predefinições conservadoras que mantêm os layouts estáveis entre clientes e renderização de PDF.

7) O ticket.php laço: estrutura e padrões-chave

Understand how the ticket themes render data so you can safely move/skin elements.

Canvas executes ticket.php uma vez por bilhete. O ficheiro contém normalmente duas partes conceptuais:

  1. Uma área de "cabeçalho" que só renderiza uma vez (para o primeiro bilhete no lote de correio eletrónico ou ao pré-visualizar).
  2. Um bloco repetido que é renderizado para cada bilhete.

Guarda "só o primeiro bilhete" #

Verá uma lógica como esta no topo:

Ao reenviar para o comprador e forem incluídos vários bilhetes numa mensagem de correio eletrónico, isto garante que a área do cabeçalho é impressa apenas uma vez.

Exemplo de HTML vs PDF #

O Canvas distingue normalmente a saída com base no tipo de bilhete. Isto é feito para garantir a compatibilidade com a biblioteca DOMPDF, que é utilizada para processar ficheiros PDF:

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

Utilize esta opção para aplicar pequenas diferenças específicas de formato, se o seu design o necessitar. Mantenha as alterações mínimas; é fácil introduzir divergências entre HTML e PDF.

Logótipos / imagens de cabeçalho #

O Canvas imprime o logótipo e a imagem do cabeçalho, se fornecidos em Produto → Definições de bilhetes:

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

Quebras de página (para impressão/PDF) #

O Canvas utiliza a lógica de módulo no número do bilhete para inserir quebras de página:

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

Este exemplo insere uma quebra de página após cada bilhete de número ímpar. Ajuste a lógica do módulo de acordo com o layout (por exemplo, quebrar a cada 1, 2 ou 3 bilhetes).

Campos dinâmicos comuns que verá #

  • Nome do evento: <?php echo esc_attr( $ticket['name'] ); ?>
  • Datas/horas (varia consoante o tipo de evento): WooCommerceEventsDate, WooCommerceEventsEndDate, WooCommerceEventosHora, WooCommerceEventsMinutes, WooCommerceEventsPeriod, WooCommerceEventsTimeZone, etc.
  • Adicionar ao calendário: fooevents_ics Ponto de extremidade AJAX com evento e bilhete params.
  • Adicionar à carteira: fooevents_wallet_pass Ponto de extremidade AJAX com bilhete ID.
  • Código de barras/QR: <?php echo esc_attr( $barcodeURL ); ?>
  • Variações: iterate WooCommerceEventsVariationsFromID
  • Reservas: WooCommerceEventsBookingSlot, WooCommerceEventsBookingDate
  • Seating: fooevents_seating_options_array
  • Attendee fields: WooCommerceEventsAttendeeName, WooCommerceEventsAttendeeLastName, WooCommerceEventsAttendeeTelephone, WooCommerceEventsAttendeeCompany, etc.
  • Custom attendee fields: fooevents_custom_attendee_fields_options_array
  • Zoom: WooCommerceEventsZoomText (if enabled)

Security: Canvas uses escaping (esc_attr, wp_kses_post, esc_attr_e) consistently. Preserve these when moving fields around.

Diferença entre modelos temáticos de bilhetes em PDF simples e múltiplos #

Se estiver a utilizar o modelo "Único" e um cliente comprar vários bilhetes, cada bilhete aparecerá na sua própria página no mesmo ficheiro PDF. Cada bilhete terá a sua própria imagem de cabeçalho, logótipo e detalhes do evento. Se estiver a utilizar o modelo "Múltiplo", o logótipo e os dados do evento aparecerão no topo da página, seguidos de 3 bilhetes e, depois, novamente os dados do evento seguidos de 3 bilhetes, etc. A ideia é que os detalhes do evento e os 3 bilhetes caibam numa página, mas se estiver a apresentar muitas informações, estes bilhetes podem passar para a página seguinte. Para alterar esta situação, pode apresentar menos informações ou substituir o modelo para remover algum do preenchimento ou reduzir o tamanho do tipo de letra.

8) Referencing theme images

Load images from your theme’s imagens/ folder with a reliable path.

Depending on the base, Canvas provides variables you can concatenate. You’ll commonly see one of these patterns:

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

ou

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

Inspect header.php in Canvas to confirm the variables in your copy. Always resolve to an absolute URL for email.

9) HTML/CSS guidelines for email and PDF

Keep markup conservative so it renders consistently across clients and in PDFs.

  • Use table-based layout or minimal <div>s; no complex flex/grid.
  • Inline critical styles (especially fonts, colors, spacing).
  • Avoid web fonts in PDFs or provide robust fallbacks.
  • Minimize nested elements and floats.
  • Use page-break-before/after for PDF pagination, but test with your final content.
  • Keep images responsive with max-width:100%; height:auto; e absolute URLs.
  • Test HTML and PDF outputs separately after changes.

10) Assign, preview, and iterate

Validate the theme with realistic data.

  • In Dados do produto → Definições da senha, confirm Tema de bilhetes HTML (and Tema de bilhetes PDF if applicable) is set to your custom theme.
  • Create a test order or reenviar an existing ticket to your own inbox.
  • If tickets are emailed to the comprador 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 comprador 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.

Resumo

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 header.php, ticket.phpe rodapé.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.