Cómo crear un tema personalizado para las entradas de Halloween

Halloween está a la vuelta de la esquina, así que en este artículo os voy a mostrar cómo crear un Tema de Entradas de Halloween personalizado y hacerlo nuestro. Modificando una sencilla plantilla y CSS, transformaremos el Tema de Entradas del Pabellón en un espeluznante diseño inspirado en Halloween, perfecto para tu próximo evento de Halloween. A

A Tema de entradas FooEvents es un conjunto de archivos de plantilla utilizados para renderizar correos electrónicos de tickets en FooEvents. Al configurar un evento con FooEvents, puedes elegir qué plantilla de ticket utilizar para ese evento. Los correos electrónicos de los tickets se generarán entonces utilizando la plantilla especificada. Además, las plantillas de ticket también se pueden utilizar para generar Entradas PDF y entradas en persona utilizando FooEvents POS.

De qué hablaremos

Vamos a descargar y renombrar una plantilla gratuita de FooEvents Ticket.
A continuación, vamos a agregar nuestro logo y gráfico de encabezado a la carpeta de imágenes y a cambiar las rutas del logo e imagen de encabezado para que apunten a estas imágenes.
Luego cargaremos el tema del ticket y enviaremos un ticket de prueba para ver qué colores y estilos necesitan cambiarse para que coincidan con nuestro diseño.
Luego, en pasos incrementales, actualizaremos el CSS y el HTML para usar los mismos colores que nuestro diseño, mientras probamos regularmente.

1) Empezando

Para simplificar, he modelado el diseño de Halloween en el Pabellón Tema del billete. Esto facilita la modificación ya que la mayoría de los cambios son simples cambios de color. Descarga el tema gratuito Pavilion Ticket de su página de producto y descomprímelo en tu computadora.

Consejo: Nuestro catálogo de temas de entradas incluye muchos diseños de base que incorporan diferentes estructuras. Encuentra un tema de base que sea estructuralmente similar a tu diseño y úsalo como punto de partida.

2) Renombrar el Tema del Ticket

Una vez descargado, renombra la carpeta descomprimida (pabellón_boleto_tema) a tema_entrada_halloween. Escribe todo en minúsculas y utiliza guiones bajos, sin espacios. Este es el método de nomenclatura que FooEvents espera que se utilice para organizar los temas personalizados.

Abra el tema_entrada_halloween carpeta y editar el readme.txt y config.json archivos.

En readme.txt, cambiar Pabellón Tema del billete a Tema del billete de Halloween. También puedes actualizar la descripción, el autor, etc.

A continuación, actualiza el valor del nombre en config.json archivo, cambio: “nombre”: “Tema de entrada para pabellón” a “nombre”: “Tema de la entrada de Halloween”.

También puedes configurar en qué formatos se puede utilizar esta plantilla de ticket (HTML, PDF y POS). Te recomiendo desactivar la compatibilidad con PDF (“supports-pdf: false”) para que podamos centrarnos en la plantilla de correo electrónico en HTML. Puedes utilizar una plantilla de PDF independiente optimizada para impresión o, si puedes dejar soporta-pdf establecido en verdadero, asegúrate de probar exhaustivamente la representación del boleto PDF.

A continuación, reemplazar vista previa.jpg con tu propia miniatura para que puedas reconocer tu tema al instante en la pantalla Temas de Boletos.

3) Actualiza el logo y el gráfico del encabezado

Por defecto, el tema original Pavilion Ticket te permite configurar el logotipo y el gráfico de cabecera en Producto > Configuración de entradas. Normalmente utilizarías esas opciones para configurar el logo y el gráfico de la cabecera; sin embargo, para el tema de la entrada de Halloween, codificaremos las rutas al logo y al gráfico de la cabecera.

El motivo es que el logotipo y el gráfico son elementos muy característicos del diseño de esta plantilla de entrada; no sería recomendable utilizarlos en la versión en PDF de la entrada, pensada para su impresión. Al codificar el logotipo y el gráfico del encabezado en el tema del ticket, podremos especificar un logotipo y una imagen de encabezado diferentes para las versiones en PDF y POS mediante el formulario de configuración del ticket.

Primero, coloca tu logo y la imagen del encabezado en la carpeta imágenes:

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

Abra el ticket.php archivo y busca el siguiente código en la parte superior del archivo:

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

Las dos sentencias “if” de PHP que envuelven las imágenes verifican si la configuración de las imágenes del logotipo y la cabecera están habilitadas. No usaremos esas configuraciones, por lo que puede eliminar las verificaciones.

A continuación, reemplace las rutas de las imágenes con las siguientes:

Ruta del logotipo:

/images/logo.jpg

Ruta de la imagen de encabezado:

/images/header_img.jpg

Tu código actualizado debería verse así:

<!-- 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) Sube el tema a tu sitio de prueba

Probemos estos cambios y aseguremos que el nuevo tema de ticket pueda asignarse a un producto, enviarse correctamente y obtenga el logo e imagen de encabezado de forma correcta.

Subir el tema del ticket

Necesitarás un sitio de pruebas en el que ya esté instalado y configurado FooEvents. Mediante FTP/SFTP, sube la carpeta del nuevo tema de tickets a la siguiente ubicación:

/wp-content/uploads/fooevents/temas/

FooEvents carga los temas personalizados desde esta ruta. Si lo prefieres, también puedes utilizar FooEvents → Temas de entradas (en el administrador de WP) para administrar y previsualizar temas, pero para editar código es mejor usar FTP, ya que necesitarás actualizar varios archivos. Más tarde, cuando estemos listos para probar, subiremos los archivos del tema editados a esta misma carpeta y luego enviaremos correos de tickets a una cuenta de prueba.

Establecer el tema del ticket para un producto de prueba

A continuación, actualizaremos la configuración del tema de tickets de un producto para usar este tema de tickets, de modo que puedas enviar tickets de prueba reales mientras iteras. De esta manera, estarás probando los datos y el diseño reales que enviarás.

En WordPress, edita el producto del evento y abre Datos del producto → Configuración de tickets. Configura el tema de la entrada HTML con el tema de entrada de Halloween que has subido. No vas a utilizar el logotipo, la imagen de cabecera ni las opciones de color, así que puedes dejarlos en blanco por ahora. Más adelante, si utilizas las entradas en PDF de FooEvents, podrás usar esos ajustes para personalizar la entrada en PDF.

Enviar un ticket de prueba

Abrir un pedido existente para este producto o crear uno nuevo, y usar Reenviar entradas opción en la barra lateral para enviar correos electrónicos de prueba de entradas. Asegúrese de probar las entradas individuales, así como los correos electrónicos de entradas que incluyan varias entradas. La entrada debe verse similar al tema original de la entrada de Pavilion, la única diferencia es que el logotipo y la imagen del encabezado ahora están codificados, en lugar de usar la configuración de la ruta del logotipo y el encabezado.

5) Modificar los colores y el diseño para que coincidan con el diseño personalizado de la entrada de Halloween

El siguiente paso puede ser complicado; sin embargo, las plantillas están diseñadas para ser lo más simples posible y deberían ser relativamente fáciles de modificar. Encuentra los colores existentes y reemplázalos con los colores utilizados en el diseño. Si tu diseño difiere estructuralmente, modifica el HTML y CSS para que coincidan con tu diseño. La salida de la plantilla consta de tres archivos principales:

├─ header.php ← Encabezado/logo/meta del evento/sección superior 
├─ ticket.php ← Bloque principal de la entrada (se repite por entrada) 
├─ footer.php ← Pie de página/información de contacto

Modifica estos tres archivos según sea necesario, pero ten en cuenta que los clientes de correo electrónico tienen sus propias preferencias. Mantén el marcado sencillo (tablas o divs mínimos), incluye los estilos importantes en línea y utiliza URL de imagen absolutas. Evita el CSS moderno, ya que muchos clientes lo eliminan o lo representan de forma inconsistente. Se recomienda mantener el HTML/CSS básico para lograr una alta compatibilidad. Consulta la guía de FooEvents como referencia: Ayuda de Ticket Themes.

Cuando hayas realizado los cambios, carga los archivos actualizados a:
/wp-content/uploads/fooevents/themes/halloween_ticket_theme/

Consejo: Prueba regularmente y haz que los cambios sean pequeños e incrementales. Cada vez que subas cambios, puedes presionar el botón de reenviar en la pantalla de pedidos sin tener que actualizar la página (eso te ahorrará unos segundos). Una vez que hayas modificado el tema del boleto para que coincida con tu propio diseño, pruébalo en diferentes escenarios. Asegúrate de probar boletos individuales, así como correos electrónicos de boletos que incluyan varios boletos (enviados a los compradores).

Verificaciones finales antes de salir en vivo

Abre el correo electrónico en Gmail, Outlook, Apple Mail y, si puedes, en el móvil. Si utilizas un servicio de vista previa como Tornasol, ejecuta un escaneo en clientes comunes. Cuando estés satisfecho con el diseño del ticket, sube la carpeta del tema del ticket a tu sitio web en vivo y habilítala para tus productos. Ejecuta una ronda adicional de pruebas para asegurarte de que tus cambios se reflejen correctamente y tus rutas de imágenes funcionen.

Última Palabra

Personalizar una plantilla de ticket de FooEvents es muy sencillo. Empieza con una base sólida, cámbiale el nombre, añade tus diseños y, a continuación, ve modificando el CSS y el HTML en pequeños pasos que puedas probar. Mantén el código tan sencillo como el de un correo electrónico y no te compliques con CSS que los clientes acabarán ignorando.

Siéntete libre de descargar y modificar mi diseño de tema "Halloween Ticket", así como el tema "Halloween Ticket" completo. Enlaces a continuación.