Como criar um tema de bilhete de Halloween personalizado

O Dia das Bruxas está a chegar, por isso, neste artigo, vou mostrar-vos como criar um tema de bilhetes personalizado para o Dia das Bruxas e torná-lo nosso. Modificando um modelo simples e CSS, transformaremos o tema de bilhete do pavilhão num design assustador, inspirado no Dia das Bruxas, perfeito para o seu próximo evento de Dia das Bruxas.

A FooEvents Tema do bilhete é um conjunto de ficheiros de modelos utilizados para processar e-mails de bilhetes em FooEvents. Ao configurar um evento com o FooEvents, pode definir o tema do bilhete a utilizar para esse evento. Os e-mails dos bilhetes serão então gerados utilizando o tema de bilhete especificado. Além disso, os temas dos bilhetes também podem ser utilizados para gerar Bilhetes PDF e bilhetes presenciais através de FooEvents POS.

O que vamos abordar

Vamos descarregar e mudar o nome de um tema gratuito do FooEvents Ticket.
Em seguida, vamos adicionar o nosso logótipo e gráfico de cabeçalho à pasta de imagens e alterar os caminhos do logótipo e da imagem de cabeçalho para apontar para estas imagens.
Em seguida, carregamos o tema do bilhete e enviamos um bilhete de teste para ver quais as cores e o estilo que precisam de ser alterados para corresponder ao nosso design.
Depois, em passos incrementais, actualizaremos o CSS e o HTML para utilizar as mesmas cores do nosso design, testando regularmente.

1) Introdução

Para manter a simplicidade, usei como modelo o desenho do Dia das Bruxas no Tema do bilhete do pavilhão. Isto torna-o fácil de modificar, uma vez que a maioria das alterações são simples mudanças de cor. Descarregue o tema gratuito Pavilion Ticket Theme a partir da página do produto e descompacte-o no seu computador.

Sugestão: O nosso catálogo de temas de bilhetes inclui muitos designs de base que incorporam diferentes disposições estruturais. Encontre um tema de base que seja estruturalmente semelhante ao seu design e utilize-o como ponto de partida.

2) Mudar o nome do tema do bilhete

Uma vez transferido, renomeie a pasta descompactada (tema_do_ticket_pavilion) para halloween_ticket_theme. Mantenha-o em letras minúsculas e use sublinhados - sem espaços. Esta abordagem de nomeação é a forma como o FooEvents espera que os temas personalizados sejam organizados.

Abrir o halloween_ticket_theme e editar a pasta readme.txt e config.json ficheiros.

Em readme.txt, mudar Tema do bilhete do pavilhão para Tema do bilhete de Halloween. Também é possível atualizar a descrição, o autor, etc.

Em seguida, actualize o valor do nome em config.json ficheiro, alteração: “nome”: “Tema do bilhete do pavilhão” para “nome”: “Tema do bilhete de Halloween”.

Também pode definir os formatos em que este tema de bilhete pode ser utilizado (HTML, PDF e POS). Recomendo desativar o suporte a PDF (“supports-pdf: false”) para que possamos nos concentrar no tema de email HTML. É possível usar um tema de PDF separado e fácil de imprimir ou, se puder deixar suporta-pdf definido como verdadeiro, Se não tiver a certeza de que o ficheiro PDF está a ser processado, não se esqueça de o testar cuidadosamente.

Em seguida, substituir pré-visualização.jpg com a sua própria miniatura, para que possa reconhecer o seu tema instantaneamente no ecrã Temas de bilhetes.

3) Atualizar o logótipo e o gráfico do cabeçalho

Por predefinição, o tema original do Pavilion Ticket permite-lhe definir o logótipo e o gráfico do cabeçalho em Produto > Definições de bilhetes. Normalmente, utilizaria essas opções para definir o logótipo e o gráfico do cabeçalho; no entanto, para o tema do bilhete de Halloween, vamos codificar os caminhos para o logótipo e o gráfico do cabeçalho.

O motivo para isso é que o logotipo e o gráfico são muito distintos do design do tema do ticket - você não gostaria de usar a versão PDF do ticket para impressão. A codificação do logotipo e do gráfico do cabeçalho no tema do ticket permite especificar um logotipo e uma imagem de cabeçalho diferentes para as versões PDF e POS usando o formulário Configurações do ticket.

Em primeiro lugar, coloque o seu logótipo e a imagem de cabeçalho na pasta de imagens:

halloween_ticket_theme/images/logo.jpg
halloween_ticket_theme/images/header_img.jpg

Abrir o ticket.php e encontre o seguinte código no topo do ficheiro:

<!-- LOGO -->
<?php if ( ! empty( $ticket['WooCommerceEventsTicketLogo'] ) ) : ?>
<p>
<img src="<?php echo esc_attr( $ticket['WooCommerceEventsTicketLogo'] ); ?>" alt="<?php echo esc_attr( $ticket['name'] ); ?>" style="width: auto; max-width:100%; margin-bottom:20px;"/>
</p>
<?php endif; ?>

<!-- GRAPHIC -->
<?php if ( ! empty( $ticket['WooCommerceEventsTicketHeaderImage'] ) ) : ?>
<img src="<?php echo esc_attr( $ticket['WooCommerceEventsTicketHeaderImage'] ); ?>" alt="<?php echo esc_attr( $ticket['name'] ); ?>" style="width: auto; max-width:100%; margin:0 auto; padding:0; display: block; vertical-align: bottom"/>
<?php endif; ?>

As duas instruções PHP “if” que envolvem as imagens verificam se as definições do logótipo e da imagem do cabeçalho estão activadas. Não vamos utilizar essas definições, pelo que pode remover as verificações.

Em seguida, substitua os caminhos de imagem pelo seguinte:

Caminho do logótipo:

/images/logo.jpg

Caminho da imagem do cabeçalho:

/images/header_img.jpg

O código atualizado deve ter o seguinte aspeto:

<!-- LOGO -->
<p>
<img src="<?php echo $theme_packs_url; ?><?php echo $theme_name; ?>/images/logo.jpg" alt="<?php echo esc_attr( $ticket['name'] ); ?>" style="width: auto; max-width:100%; margin-bottom:20px;"/>
</p>

<!-- GRAPHIC -->
<img src="<?php echo $theme_packs_url; ?><?php echo $theme_name; ?>/images/header_img.jpg" alt="<?php echo esc_attr( $ticket['name'] ); ?>" style="width: auto; max-width:100%; margin:0 auto; padding:0; display: block; vertical-align: bottom"/>

4) Carregue o tema para o seu sítio de teste

Vamos testar estas alterações e certificar-nos de que o novo tema de bilhete pode ser atribuído a um produto, enviado com êxito e que o logótipo e a imagem do cabeçalho são corretamente originados.

Carregar o tema do bilhete

Você precisará de um site de teste que já tenha o FooEvents instalado e configurado. Utilizando FTP/SFTP, carregue a pasta do novo tema de bilhetes para o seguinte local:

/wp-content/uploads/fooevents/themes/

O FooEvents carrega temas personalizados a partir deste caminho. Se preferir, também pode usar FooEvents → Temas de bilhetes (no WP admin) para gerir e pré-visualizar temas, mas para edições de código é melhor utilizar o FTP, uma vez que terá de atualizar vários ficheiros. Mais tarde, quando estivermos prontos para testar, carregaremos os ficheiros do tema editado para esta mesma pasta e enviaremos e-mails de ticket para uma conta de teste.

Definir o tema do bilhete para um produto de teste

Em seguida, vamos atualizar as configurações do tema de ticket de um produto para usar esse tema de ticket, para que você possa enviar tickets de teste reais enquanto itera. Dessa forma, você está testando os dados reais e o layout que enviará.

No WordPress, editar o produto do evento e abrir Dados do produto → Definições da senha. Defina o tema do bilhete HTML para o seu tema de bilhete de Halloween carregado. Não irá utilizar o logótipo, a imagem do cabeçalho e as opções de cor, pelo que pode deixá-los em branco por agora. Mais tarde, se estiver a utilizar os bilhetes PDF do FooEvents, pode utilizar estas definições para personalizar o bilhete PDF.

Enviar um bilhete de teste

Abrir uma encomenda existente para este produto ou criar uma nova encomenda e utilizar o botão Reenviar bilhetes na barra lateral para enviar e-mails de teste de tíquetes. O bilhete deve ser semelhante ao Tema de bilhete original do Pavilion, com a única diferença de que o logótipo e a imagem do cabeçalho estão agora codificados em vez de utilizarem as definições do logótipo e do caminho do cabeçalho.

5) Modificar as cores e o esquema para corresponder ao design personalizado do tema do bilhete de Halloween

Este próximo passo pode ser complicado; no entanto, os modelos foram concebidos para serem tão simples quanto possível e devem ser relativamente fáceis de modificar. Encontre as cores existentes e substitua-as pelas cores utilizadas no design. Se o seu design for estruturalmente diferente, modifique o HTML e o CSS para corresponder ao seu design. O resultado do modelo é composto por três ficheiros principais:

header.php ← Logotipo/cabeçalho/event meta/secção superior
ticket.php ← O bloco principal do ticket (repete-se por ticket)
Rodapé.php ← Rodapé/informações de contacto

Modifique estes três ficheiros conforme necessário, mas tenha em atenção que os clientes de correio eletrónico têm opiniões diferentes. Mantenha a marcação simples (tabelas ou divs mínimas), coloque em linha os estilos importantes e utilize URLs de imagem absolutos. Evite CSS moderno que muitos clientes retiram ou processam de forma inconsistente. É uma prática recomendada manter o HTML/CSS básico para alta compatibilidade. Consulte o guia FooEvents para obter referência: Ajuda de temas de tickets.

Quando tiver feito alterações, carregue os ficheiros actualizados para:
/wp-content/uploads/fooevents/themes/halloween_ticket_theme/

Sugestão: Faça testes regularmente e mantenha as alterações pequenas e incrementais. Sempre que carregar alterações, pode premir o botão de reenvio no ecrã de encomendas sem ter de atualizar a página (o que lhe poupará alguns segundos). Depois de ter modificado o tema do bilhete para corresponder ao seu próprio design, teste-o em diferentes cenários. Não se esqueça de testar os bilhetes individuais, bem como os emails de bilhetes que incluem vários bilhetes (enviados aos compradores).

Verificações finais antes da entrada em funcionamento

Veja a mensagem de correio eletrónico no Gmail, Outlook, Apple Mail e, se possível, no telemóvel. Se utilizar um serviço de pré-visualização como o Litmus, Faça uma varredura nos clientes comuns. Quando estiver satisfeito com o design do bilhete, carregue a pasta do tema do bilhete para o seu site ativo e active-o para o(s) seu(s) produto(s). Faça uma rodada adicional de testes para garantir que as alterações sejam refletidas corretamente e que os caminhos de imagem estejam funcionando.

Palavra final

Personalizar um tema de bilhetes FooEvents é muito simples. Comece com uma base sólida, renomeie-a, adicione o seu trabalho artístico e, em seguida, repita o CSS/HTML em pequenos passos testáveis. Mantenha a marcação de e-mail simples e não se enfeite com CSS que os clientes irão ignorar.

Pode descarregar e modificar o meu desenho de tema de bilhete de Halloween, bem como o tema de bilhete de Halloween completo, links abaixo.