Thèmes

⌘K
  6. Thèmes
  8. Billets
  10. Thèmes de billets personnalisés

Thèmes de billets personnalisés

Ce document montre comment construire un thème de billetterie FooEvents personnalisé en commençant par le fichier Thème de billetterie Canvas. Canvas est un modèle de départ conçu pour servir de base à la conception de billets personnalisés. Il produit toutes les données des billets FooEvents dans un format simple et propre avec un HTML de base et un peu de PHP, ce qui le rend idéal pour l'extension et l'image de marque.

Nous aborderons la disposition des dossiers, l'emplacement des thèmes, le fonctionnement de la configuration, l'affectation d'un thème à un produit et les principaux endroits où personnaliser les balises en toute sécurité pour les courriels HTML et les fichiers PDF.

Conditions préalables

  • A WooCommerce site avec FooEvents installés et activés.
  • Accès FTP/SFTP (ou équivalent) pour télécharger des fichiers.
  • Un éditeur de code (VS Code, Sublime, PhpStorm, etc.).
  • Un produit test configuré comme un événement FooEvents afin de pouvoir envoyer des aperçus et des renvois de tickets.

1) Télécharger le thème Canvas Ticket

Téléchargez et décompressez le logiciel gratuit Thème de billetterie Canvas sur votre ordinateur local.

2) Fichiers de thème

Ce sont les fichiers clés que vous éditerez lorsque vous travaillerez sur votre thème de billetterie personnalisé :

├─ config.json        ← Déclare le nom et la compatibilité (HTML/PDF/POS)
├─ header.php         ← Email/PDF head + opening body markup and CSS
├─ ticket.php         ← Corps principal ; s'exécute une fois par ticket
├─ footer.php         ← Fermeture des balises body/html, surcharges CSS du pied de page
├─ images/            ← Images (y compris la vignette de prévisualisation)
├─ readme.txt         ← Métadonnées du thème (face à l'homme)
└─ Licence/           ← GPL
└─ aperçu.jpg        ← Vignette affichée dans l'écran Thèmes des billets.

Les principaux fichiers sur lesquels vous travaillerez sont les fichiers modèles suivants :

  • header.php comprendra généralement un doctype de courrier électronique XHTML strict, des réinitialisations, des ajustements Outlook/Apple Mail et une fonction d'alerte. $font_family que Canvas a déjà câblé.
  • ticket.php rend le contenu du ticket ; il est exécuté pour chaque billet dans le courriel.
  • footer.php ferme le document HTML/PDF.

3) Mettre à jour le nom du thème du ticket 

Créez une copie de travail du thème du ticket Canvas afin de pouvoir le modifier sans toucher à l'original.

Nom du dossier : #

Renommez le dossier décompressé en un nom unique, par exemple, remplacez "canvas_custom_theme" par quelque chose comme "myticket_theme". Donnez un nom distinct à votre thème et indiquez les sorties qu'il prend en charge. Utilisez uniquement des minuscules et des traits de soulignement (pas d'espaces). Ce nom de dossier devient l'identifiant de votre thème.

config.json (Canvas par défaut) : #

{
  "name" : "Canvas Ticket Theme",
  "supports-html" : "true",
  "supports-pdf" : "true",
  "supports-pos" : "false"
}

Dans le fichier config.json, vous pouvez également décider si ce thème personnalisé prendra également en charge les tickets PDF. Si vous avez l'intention de concevoir uniquement pour les courriels HTML, définissez :

"supports-pdf" : "false"

Si vous supportez à la fois le HTML et le PDF, gardez-le. "true" (vrai) et tester les deux sorties séparément.

Remarque : Ces valeurs sont des chaînes de caractères "true"/"false" (vrai/faux) dans Canvas ; conservez ce format pour des raisons de compatibilité.

readme.txt #

Mettez à jour le "Ticket Theme Name" et la description pour refléter votre thème personnalisé. Ce fichier est informatif, mais il est utile lors de l'analyse de nombreux thèmes personnalisés.

aperçu.jpg #

Mettez à jour la vignette de l'image preview.jpg afin que le thème de votre billet soit facilement identifiable.

4) Télécharger votre thème de billetterie sur votre site

Les thèmes des tickets FooEvents sont situés dans un dossier de thème FooEvents sur votre site. FooEvents découvre automatiquement les thèmes dans ce répertoire. En utilisant FTP/SFTP, téléchargez votre nouveau dossier de thème de billetterie à l'emplacement suivant sur votre site :

/wp-content/uploads/fooevents/themes/

5) Affecter le thème personnalisé à un produit

Pour tester et utiliser un thème de ticket, vous devez l'affecter à un produit. Ouvrez un produit WooCommerce qui a été configuré comme un événement FooEventset définissez les paramètres du thème de ticket pour utiliser ce thème de ticket afin de pouvoir envoyer des tickets de test réels pendant que vous itérez.

Dans WordPress, éditez votre produit d'événement et ouvrez Données produit → Paramètres du ticket. Régler le Thème de billetterie HTML à Thème MyTicketpuis enregistrer.

Si vous utilisez également FooEvents PDF Ticketssi vous avez décidé de rendre votre thème de billetterie compatible avec les PDF, assurez-vous de sélectionner votre nouveau thème dans la section Thème PDF Ticket de la mise en place.

6) En-tête et pied de page du canevas (gabarit de sécurité pour les courriels)

Utilisez l'en-tête et le pied de page de Canvas pour assurer la compatibilité avec les courriels HTML (et une sortie PDF raisonnable). L'en-tête comprend des feuilles de style CSS conditionnelles pour Outlook (MSO), des réinitialisations qui empêchent le reformatage de Gmail/Apple Mail et des valeurs par défaut conservatrices qui assurent la stabilité des mises en page entre les clients et le rendu PDF.

7) Le ticket.php boucle : structure et modèles clés

Comprendre comment les thèmes des billets restituent les données afin de pouvoir déplacer ou habiller des éléments en toute sécurité.

Canvas exécute ticket.php une fois par billet. Le fichier contient généralement deux parties conceptuelles :

  1. Une zone "d'en-tête" qui rend seulement une fois (pour le premier ticket dans l'email du lot ou lors de la prévisualisation).
  2. Un bloc répété qui rend pour chaque billet.

Garde "Premier billet seulement". #

Vous verrez une logique comme celle-ci en haut de la page :

Lors de la réexpédition au acheteur et que plusieurs billets sont inclus dans un même courriel, cela permet de s'assurer que la zone d'en-tête ne s'imprime qu'une seule fois.

Exemple HTML vs PDF #

Canvas distingue généralement la sortie en fonction du type de billet. Cela permet d'assurer la compatibilité avec la bibliothèque DOMPDF, qui est utilisée pour rendre les fichiers PDF :

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

Utilisez cette fonction pour appliquer de petites différences spécifiques au format si votre conception le nécessite. Les modifications doivent être minimales ; il est facile d'introduire des divergences entre HTML et PDF.

Logos / images d'en-tête #

Canvas imprime le logo et l'image d'en-tête s'ils sont fournis dans le fichier Produit → Paramètres du ticket:

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

Sauts de page (pour l'impression/PDF) #

Canvas utilise la logique modulo sur le numéro de ticket pour insérer des sauts de page :

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

Cet exemple insère un saut de page après chaque billet impair. Ajustez la logique modulo à votre disposition (par exemple, interrompre tous les 1, 2 ou 3 tickets).

Champs dynamiques courants #

  • Nom de l'événement : <?php echo esc_attr( $ticket['name'] ); ?>
  • Dates/heures (variables selon le type d'événement) : WooCommerceEventsDate, WooCommerceEventsEndDate, WooCommerceEventsHour, WooCommerceEventsMinutes, WooCommerceEventsPeriod, WooCommerceEventsTimeZone, etc.
  • Ajouter au calendrier : fooevents_ics AJAX avec événement et billet params.
  • Ajouter au portefeuille : fooevents_wallet_pass AJAX avec billet ID.
  • Code-barres/QR : <?php echo esc_attr( $barcodeURL ); ?>
  • Variantes : itérer WooCommerceEventsVariationsFromID
  • Réservations : WooCommerceEventsBookingSlot, WooCommerceEventsBookingDate
  • Sièges : fooevents_seating_options_array
  • Domaines des participants : WooCommerceEventsNom du participant, WooCommerceEventsAttendeeLastName, 1TP1ÉvénementsParticipantsTéléphone, WooCommerceEventsAttendeeCompany, etc.
  • Champs personnalisés pour les participants : fooevents_custom_attendee_fields_options_array
  • Zoom : WooCommerceEventsZoomText (si activée)

La sécurité : Canvas utilise l'échappement (esc_attr, wp_kses_post, esc_attr_e) de manière cohérente. Conservez-les lorsque vous déplacez des champs.

Différence entre les modèles de thèmes de tickets PDF simples et multiples #

Si vous utilisez le modèle "Unique" et qu'un client achète plusieurs billets, chaque billet apparaîtra sur sa propre page dans le même fichier PDF. Chaque billet aura sa propre image d'en-tête, son logo et les détails de l'événement. Si vous utilisez le modèle "Multiple", le logo et les détails de l'événement apparaîtront en haut de la page, suivis de 3 billets, puis des détails de l'événement, suivis de 3 billets, etc. L'idée est que les détails de l'événement et les trois billets tiennent sur une seule page, mais si vous affichez beaucoup d'informations, ces billets risquent de déborder sur la page suivante. Pour y remédier, vous pouvez soit afficher moins d'informations, soit modifier le modèle pour supprimer une partie du rembourrage ou réduire la taille de la police.

8) Référencement des images du thème

Chargez des images à partir de la section images/ avec un chemin d'accès fiable.

Selon la base, Canvas fournit des variables que vous pouvez concaténer. Vous verrez généralement l'un de ces modèles :

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

ou

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

Contrôler header.php dans Canvas pour confirmer les variables dans votre copie. Résolvez toujours un URL absolu pour le courrier électronique.

9) Lignes directrices HTML/CSS pour le courrier électronique et les PDF

Veillez à ce que les balises soient conservées afin qu'elles s'affichent de manière cohérente sur tous les clients et dans les PDF.

  • Utiliser une mise en page basée sur des tableaux ou une mise en page minimale <div>pas de grille complexe.
  • Inline les styles critiques (en particulier les polices, les couleurs, l'espacement).
  • Évitez les polices web dans les PDF ou fournissez des solutions de rechange robustes.
  • Réduire les éléments imbriqués et les flottants.
  • Utilisation page-break-before/after pour la pagination des PDF, mais testez avec votre contenu final.
  • Gardez les images réactives avec max-width:100% ; height:auto ; et absolu URLs.
  • Tester les sorties HTML et PDF séparément après les modifications.

10) Assigner, prévisualiser et itérer

Valider le thème à l'aide de données réalistes.

  • En Données produit → Paramètres du ticket, confirmer Thème HTML Ticket (et Thème PDF Ticket le cas échéant) est défini sur votre thème personnalisé.
  • Créer une commande test ou renvoyer un ticket existant dans votre propre boîte de réception.
  • Si les billets sont envoyés par courriel au acheteur et qu'une commande contient plusieurs billets, l'e-mail comprendra blocs de billets multiples-Vérifier que l'espacement et les titres sont toujours corrects.

Répétez : modifiez, téléchargez les fichiers modifiés et renvoyez-les.

11) Modifications et modèles courants

Rendu conditionnel par type de sortie

Ne montrer une section qu'une seule fois pour le premier billet

Sauts de page basés sur le modulo

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

Sortie sécurisée

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

12) Liste de contrôle des tests

  • Prévisualisation + renvoi des tests pour HTML et PDF (EN ANGLAIS) (le cas échéant).
  • Envoi de plusieurs billets par courrier électronique à acheteur rend proprement les blocs de billets multiples.
  • Les images sont résolues (pas de liens brisés ; URL absolues).
  • Principaux clients de messagerie : Gmail (web/mobile), Apple Mail, Outlook desktop/web.
  • Si les PDF sont activés : imprimez au format PDF ou générez des tickets PDF officiels et confirmez la pagination, les marges et les polices.

13) Dépannage

  • Le thème ne s'affiche pas dans la liste déroulante : Confirmer le chemin d'accès au dossier et config.json "nom" est unique ; videz les caches et rechargez l'écran d'édition du produit.
  • Les images ne se chargent pas dans l'e-mail : Veillez à ce que les URL soient absolues ; évitez les URL relatives au protocole ; confirmez les autorisations d'accès aux ressources.
  • Espacement bizarre dans Outlook : Réduire les éléments imbriqués, s'appuyer sur des tableaux et simplifier les feuilles de style CSS.
  • Problèmes de mise en page des PDF : Utilisez des structures plus simples, ajoutez des sauts de page explicites, évitez les flottants et les positionnements complexes.

Autres thèmes

Le même processus peut être appliqué à n'importe quel FooEvents Thème du billet. Ils suivent la même structure sous-jacente et la même approche. Trouvez un thème similaire à votre projet et utilisez-le comme point de départ.

Résumé

Commencer par Toile, donnez-lui un nom unique dans config.jsonLe placer dans /wp-content/uploads/fooevents/themes/et l'affecter à un produit test. Personnalisez le balisage dans header.php, ticket.phpet footer.phpen conservant le HTML conservateur et les styles en ligne. Utilisez la protection du premier ticket pour les éléments à tirage unique, modifiez conditionnellement la sortie HTML par rapport à la sortie PDF si nécessaire, et utilisez les sauts de page pour la pagination PDF. Testez les prévisualisations, renvoyez les tickets réels et validez les e-mails à tickets multiples avant de les mettre en ligne.