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. O Canvas é um modelo inicial concebido como uma base para a conceção de bilhetes personalizados. Apresenta todos os dados dos bilhetes FooEvents num formato simples e limpo, com HTML básico e um pouco de PHP, o que o torna ideal para a extensão e a criação de marcas.

Abordaremos a disposição das pastas, onde os temas se encontram, como funciona a configuração, como atribuir o seu tema a um produto e os principais locais para personalizar a marcação em segurança para a saída de correio eletrónico HTML e PDF.

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

Renomeie a pasta descompactada com um slug exclusivo, por exemplo, altere 'canvas_custom_theme' para algo como 'myticket_theme'. Dê ao seu tema um nome distinto e declare quais as saídas que suporta. Utilize apenas letras minúsculas e sublinhados (sem espaços). Este nome de pasta torna-se o identificador do seu tema.

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 FooEventse definir as definições do tema do bilhete para utilizar este tema de bilhete, para que possa enviar bilhetes de teste reais enquanto itera.

No WordPress, editar o produto do evento e abrir Dados do produto → Definições da senha. Definir o Tema de bilhete HTML para Tema MyTickete, em seguida, guardar.

Se também estiver a utilizar 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

Compreenda como os temas dos bilhetes processam os dados para que possa mover/esfolar elementos com segurança.

O ecrã executa 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
  • Lugares sentados: fooevents_seating_options_array
  • Campos de participantes: WooCommerceEventsAttendeeName, WooCommerceEventsAttendeeLastName, WooCommerceEventosAtendenteTelefone, WooCommerceEventsAttendeeCompany, etc.
  • Campos personalizados de participantes: fooevents_custom_attendee_fields_options_array
  • Zoom: WooCommerceEventsZoomText (se ativado)

Segurança: O Canvas utiliza o escape (esc_attr, wp_kses_post, esc_attr_e) de forma consistente. Preserve-os quando deslocar os campos.

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) Referenciar imagens temáticas

Carregue imagens a partir da secção imagens/ com um caminho fiável.

Dependendo da base, o Canvas fornece variáveis que podem ser concatenadas. É comum ver um destes padrões:

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

ou

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

Inspecionar header.php no Canvas para confirmar as variáveis na sua cópia. Resolva sempre para um URL absoluto por correio eletrónico.

9) Diretrizes HTML/CSS para correio eletrónico e PDF

Mantenha a marcação conservadora para que seja apresentada de forma consistente em todos os clientes e em PDFs.

  • Utilizar um esquema baseado em tabelas ou um esquema mínimo <div>s; sem flexão/grelha complexa.
  • Estilos críticos em linha (especialmente tipos de letra, cores, espaçamento).
  • Evite tipos de letra da Web em PDFs ou forneça alternativas robustas.
  • Minimizar elementos aninhados e flutuadores.
  • Utilização quebra de página antes/depois para paginação de PDF, mas teste com o seu conteúdo final.
  • Mantenha as imagens responsivas com max-width:100%; height:auto; e absoluto URLs.
  • Teste os resultados HTML e PDF separadamente após as alterações.

10) Atribuir, pré-visualizar e iterar

Validar o tema com dados realistas.

  • Em Dados do produto → Definições da senha, confirmar Tema de bilhetes HTML (e Tema de bilhetes PDF se aplicável) está definido para o seu tema personalizado.
  • Criar uma ordem de ensaio ou reenviar um bilhete existente para a sua própria caixa de entrada.
  • Se os bilhetes forem enviados por correio eletrónico para o comprador e uma encomenda contiver vários bilhetes, o e-mail incluirá blocos de bilhetes múltiplos-verificar se o espaçamento e os títulos ainda estão corretos.

Repetir: editar, carregar os ficheiros alterados e reenviar.

11) Ajustes e padrões comuns

Renderização condicional por tipo de saída

Mostrar uma secção apenas uma vez para o primeiro bilhete

Quebras de página baseadas no módulo

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

Saída segura

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

12) Lista de controlo dos testes

  • Pré-visualização + reenvio de testes para HTML e PDF (se suportado).
  • Correio eletrónico para comprador processa vários blocos de bilhetes de forma clara.
  • Imagens resolvidas (sem ligações quebradas; URLs absolutos).
  • Principais clientes de correio eletrónico: Gmail (web/móvel), Apple Mail, Outlook desktop/web.
  • Se os PDFs estiverem activados: imprima em PDF ou gere bilhetes oficiais em PDF e confirme a paginação, as margens e os tipos de letra.

13) Resolução de problemas

  • O tema não é apresentado no menu pendente: Confirmar o caminho da pasta e config.json "nome" é único; limpe as caches e volte a carregar o ecrã de edição do produto.
  • As imagens não carregam no correio eletrónico: Assegurar URLs absolutos; evitar URLs relativos a protocolos; confirmar permissões de activos.
  • Espaçamento estranho no Outlook: Reduzir os elementos aninhados, basear-se em tabelas e simplificar as CSS.
  • Problemas de apresentação do PDF: Utilize estruturas mais simples, adicione quebras de página explícitas, evite flutuações e posicionamentos complexos.

Outros temas

O mesmo processo pode ser aplicado a qualquer FooEvents Tema do bilhete. Seguem a mesma estrutura e abordagem subjacentes. Encontre um tema que seja semelhante ao seu design e utilize-o como ponto de partida.

Resumo

Começar com Tela, atribua-lhe um nome único em config.json, coloque-o em /wp-content/uploads/fooevents/themes/e atribuí-lo a um produto de teste. Personalize a marcação em header.php, ticket.phpe rodapé.phpmantendo o HTML conservador e os estilos em linha. Utilize a proteção do primeiro bilhete para elementos de execução única, ajuste condicionalmente a saída HTML vs. PDF, se necessário, e confie nas quebras de página para a paginação do PDF. Teste as pré-visualizações, reenvie os bilhetes reais e valide os e-mails com vários bilhetes antes de entrar em funcionamento.