Este documento muestra cómo crear un tema de ticket FooEvents personalizado comenzando con el archivo Tema de entradas Canvas. 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.
Requisitos previos
- A WooCommerce sitio con FooEvents instalado y activado.
- Acceso FTP/SFTP (o equivalente) para cargar archivos.
- Un editor de código (VS Code, Sublime, PhpStorm, etc.).
- Un producto de prueba configurado como un evento FooEvents para que pueda enviar previsualizaciones y reenvíos de tickets.
1) Descargue el tema Canvas Ticket
Descargue y descomprima gratuitamente Tema de entradas Canvas a tu ordenador local.
2) Archivos temáticos
Estos son los archivos clave que editará cuando trabaje en su tema de ticket personalizado:
├─ config.json ← Declara el nombre y la compatibilidad (HTML/PDF/POS)
├─ header.php ← Cabecera de correo electrónico/PDF + cuerpo de apertura de marcado y CSS
├─ ticket.php ← Cuerpo principal; se ejecuta una vez por billete.
├─ pie.php ← Cierre de las etiquetas body/html, anulaciones CSS del pie de página
├─ imágenes/ ← Activos de imagen (incluida la miniatura de vista previa)
├─ readme.txt ← Metadatos del tema (de cara al ser humano)
└─ Licencia/ ← GPL
└─ vista previa.jpg ← Miniatura mostrada en la pantalla de Temas de Ticket.
Los principales archivos con los que trabajará son los siguientes archivos de plantilla:
header.phpnormalmente incluirá un doctype de correo electrónico XHTML estricto, reseteos, ajustes de Outlook/Apple Mail y un$font_familymarcador de posición que Canvas ya ha cableado.ticket.phprenderiza el contenido del ticket; se ejecuta por cada billete en el correo electrónico.pie.phpcierra el documento HTML/PDF.
3) Actualizar el nombre del tema del ticket
Cree una copia de trabajo del tema de entradas del lienzo para poder modificarlo sin tocar el original.
Nombre de la carpeta: #
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 (Canvas por defecto): #
{
"nombre": "Canvas Ticket Theme",
"supports-html": "true",
"supports-pdf": "true",
"supports-pos": "false"
}En el archivo config.json también puede decidir si este tema personalizado también admitirá tickets PDF. Si tiene la intención de diseñar sólo para el correo electrónico HTML, establezca:
"soporta-pdf": "false"
Si va a admitir tanto HTML como PDF, manténgalo "true" y prueba ambas salidas por separado.
Nota: Estos valores son cadenas "verdadero"/"falso" en Canvas; mantenga ese formato por compatibilidad.
readme.txt #
Actualice el "Nombre del tema del ticket" y la descripción para reflejar su tema personalizado. Este archivo es informativo pero ayuda cuando se escanean muchos temas personalizados.
vista previa.jpg #
Actualice la miniatura de la imagen preview.jpg para que el tema de su entrada sea fácil de identificar.
4) Cargar el tema de la entrada en su sitio web
Los temas del ticket FooEvents se encuentran en una carpeta de temas FooEvents en su sitio. FooEvents descubre automáticamente los temas en este directorio. Utilizando FTP/SFTP, cargue su nueva carpeta de temas de tickets en la siguiente ubicación de su sitio:
/wp-content/uploads/fooevents/temas/5) Asignar el tema personalizado a un producto
Para probar y utilizar un tema de ticket, deberá asignarlo a un producto. Abra un producto WooCommerce que haya sido configurado como un 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 Datos del producto → Ajustes del ticket. Ajuste el Tema HTML para entradas a Tema MyTicket, then save.
If you’re also using FooEvents Entradas PDFpuede desactivarlo mientras realiza las pruebas o, si ha decidido que el tema de su entrada sea compatible con PDF, asegúrese de seleccionar el nuevo tema en la opción Tema de entradas PDF ajuste.
6) Encabezado y pie de página del lienzo (plantilla segura para el correo electrónico)
Utilice el encabezado y el pie de página de correo electrónico de Canvas como base para la compatibilidad con correo electrónico HTML (y una salida PDF razonable). El encabezado incluye CSS condicional para Outlook (MSO), restablecimientos que evitan el reformateo de Gmail/Apple Mail y valores predeterminados conservadores que mantienen los diseños estables en todos los clientes y en el renderizado de PDF.
7) El ticket.php bucle: estructura y patrones clave
Understand how the ticket themes render data so you can safely move/skin elements.
Canvas executes ticket.php una vez por billete. El archivo suele contener dos partes conceptuales:
- Un área de "cabecera" que sólo muestra una vez (para el primer ticket en el correo electrónico del lote o al previsualizar).
- Un bloque repetido que renderiza para cada billete.
"Guardia "Sólo primer billete #
Verás lógica como esta en la parte superior:
Al reenviar al comprador y se incluyen varias entradas en un correo electrónico, esto garantiza que el área de encabezado se imprima sólo una vez.
Ejemplo de HTML frente a PDF #
Canvas suele distinguir la salida en función del tipo de entrada. Esto se hace para asegurar la compatibilidad con la biblioteca DOMPDF que se utiliza para renderizar archivos PDF:
<?php if ( ! empty( $ticket['type'] ) && 'PDF' === $ticket['type'] ) : ?>
<p><strong>Versión PDF</strong></p>
<?php else : ?>
<p><strong>Versión HTML</strong></p>
<?php endif; ?>
Utilícelo para aplicar pequeñas diferencias específicas de formato si su diseño lo necesita. Mantenga los cambios al mínimo; es fácil introducir divergencias entre HTML y PDF.
Logotipos / imágenes de cabecera #
Canvas imprime el logotipo y la imagen de cabecera si se proporcionan en Producto → Configuración de entradas:
<?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; ?>
Saltos de página (para impresión/PDF) #
Canvas utiliza la lógica del módulo en el número de ticket para insertar saltos de página:
<?php if ( 0 !== $ticket['ticketNumber'] % 2 ) : ?>
<div style="page-break-before: always;"></div>
<?php endif; ?>
Este ejemplo inserta un salto de página después de cada billete impar. Ajuste la lógica del módulo a su diseño (por ejemplo, rompa cada 1, 2 o 3 tickets).
Campos dinámicos habituales #
- Nombre del evento:
<?php echo esc_attr( $ticket['name'] ); ?> - Fechas y horarios (varían según el tipo de acto):
WooCommerceEventsFecha,WooCommerceEventsEndDate,1TP1EventosHora,WooCommerceEventsMinutes,WooCommerceEventsPeriod,WooCommerceEventsTimeZoneetc. - Añadir al calendario:
fooevents_icsPunto final AJAX coneventoybilleteparámetros. - Añadir a la cartera:
fooevents_wallet_passPunto final AJAX conbilleteID. - Código de barras/QR:
<?php echo esc_attr( $barcodeURL ); ?> - Variaciones: iterar
WooCommerceEventsVariationsFromID - Reservas:
WooCommerceEventsBookingSlot,WooCommerceEventsFechaDeReserva - Asientos:
fooevents_seating_options_array - Campos de asistentes:
WooCommerceEventsAttendeeName,WooCommerceEventsAttendeeLastName,WooCommerceEventsAttendeeTeléfono,WooCommerceEventsAttendeeCompanyetc. - Campos personalizados para los asistentes:
fooevents_custom_attendee_fields_options_array - Zoom:
WooCommerceEventsZoomText(si está activada)
Seguridad: Canvas utiliza el escape (esc_attr, wp_kses_post, esc_attr_e) de forma coherente. Consérvelos cuando cambie de campo.
Diferencia entre plantillas de temas de entradas PDF únicas y múltiples #
Si utiliza la plantilla "Individual" y un cliente compra varias entradas, cada entrada aparecerá en su propia página en el mismo archivo PDF. Cada entrada tendrá su propia imagen de cabecera, logotipo y detalles del evento. Si utiliza la plantilla "Múltiple", el logotipo y los detalles del evento aparecerán en la parte superior de la página, seguidos de 3 entradas y, a continuación, de nuevo los detalles del evento, seguidos de 3 entradas, etc. La idea es que los detalles del evento y las 3 entradas quepan en una página, pero si está mostrando mucha información, estas entradas podrían pasar a la página siguiente. Para cambiar esto, puede mostrar menos información o modificar la plantilla para eliminar parte del relleno o reducir el tamaño de la fuente.
8) Imágenes temáticas de referencia
Cargar imágenes desde el tema imágenes/ 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="..." />
o
<img src="<?php echo $themePacksURL . 'theme/images/'; ?>myimage.png" alt="..." />
Inspeccione header.php en Canvas para confirmar las variables en su copia. Resuelve siempre a un URL absoluto por correo electrónico.
9) Directrices HTML/CSS para correo electrónico y PDF
Mantenga un marcado conservador para que se reproduzca de forma coherente en todos los clientes y en los PDF.
- Utilice un diseño basado en tablas o mínimo
<div>s; sin complejos flex/grid. - Estilos críticos en línea (especialmente fuentes, colores, espaciado).
- Evite las fuentes web en los PDF o proporcione alternativas sólidas.
- Minimizar elementos anidados y flotantes.
- Utilice
page-break-before/afterpara la paginación de PDF, pero pruébelo con su contenido final. - Mantenga la capacidad de respuesta de las imágenes con
max-width:100%; height:auto;y absoluto URL. - Pruebe las salidas HTML y PDF por separado después de los cambios.
10) Asignar, previsualizar e iterar
Valide el tema con datos realistas.
- En
Datos del producto → Ajustes del ticketConfirmar Tema HTML para entradas (y Tema de entradas PDF si procede) se establece en su tema personalizado. - Crear una orden de prueba o reenviar un ticket existente a su propia bandeja de entrada.
- Si las entradas se envían por correo electrónico al comprador y un pedido contiene varias entradas, el correo electrónico incluirá bloques de entradas múltiples-Verificar que el espaciado y los títulos siguen siendo correctos.
Repita: edite, cargue los archivos modificados y vuelva a enviarlos.
11) Ajustes y patrones comunes
Renderización condicional por tipo de salida
Mostrar una sección sólo una vez para el primer billete
Saltos de página basados en módulos
<?php if ( 0 === $ticket['ticketNumber'] % 3 && 0 !== $ticket['ticketNumber'] ) : ?>
<div style="page-break-before: always;"></div>
<?php endif; ?>
Salida segura
<h2><?php echo esc_attr( $ticket['name'] ); ?></h2>
<p><?php echo wp_kses_post( $ticket['WooCommerceEventsTicketText'] ); ?></p>
12) Lista de control de las pruebas
- Vista previa + reenvío de pruebas para HTML y PDF (si se admite).
- Correo electrónico con varios billetes a comprador renderiza ordenadamente varios bloques de billetes.
- Las imágenes se resuelven (sin enlaces rotos; URL absolutas).
- Principales clientes de correo electrónico: Gmail (web/móvil), Apple Mail, Outlook escritorio/web.
- Si los PDF están activados: imprima en PDF o genere entradas oficiales en PDF y confirme la paginación, los márgenes y los tipos de letra.
13) Solución de problemas
- El tema no se muestra en el desplegable: Confirme la ruta de la carpeta y
config.json"nombre"es único; borre las memorias caché y vuelva a cargar la pantalla de edición del producto. - Las imágenes no se cargan en el correo electrónico: Asegúrese de que las URL son absolutas; evite las URL relativas al protocolo; confirme los permisos de los activos.
- Espaciado extraño en Outlook: Reduzca los elementos anidados, apóyese en tablas y simplifique el CSS.
- Problemas de diseño del PDF: Utilice estructuras más sencillas, añada saltos de página explícitos, evite flotantes y posicionamientos complejos.
Otros temas
El mismo proceso puede aplicarse a cualquier FooEvents Tema del billete. Siguen la misma estructura subyacente y el mismo enfoque. Busque un tema similar a su diseño y utilícelo como punto de partida.
Resumen
Comience con Lienzodale un nombre único en config.jsonColóquelo en /wp-content/uploads/fooevents/temas/y asígnelo a un producto de prueba. Personalice el marcado en header.php, ticket.phpy pie.phpmanteniendo el HTML conservador y los estilos en línea. Utilice el protector de primer ticket para elementos de una sola tirada, ajuste condicionalmente la salida HTML frente a la salida PDF si es necesario y confíe en los saltos de página para la paginación PDF. Pruebe las vistas previas, reenvíe tickets reales y valide los correos electrónicos con varios tickets antes de ponerlos en marcha.