Éditeurs

Éditeur de Template HTML

Cette page vous guidera à travers le processus de création d'un template PDF en utilisant notre éditeur visuel HTML. Après avoir lu cette documentation, vous serez capable de concevoir un template HTML avec des styles et des polices personnalisés ainsi que du contenu dynamique en utilisant le moteur de template Twig.

Note

Cette documentation couvre les fonctionnalités Twig les plus courantes. Pour une référence complète, consultez la documentation officielle de Twig.

Créer un Nouveau Template

Pour créer un nouveau template, connectez-vous à votre compte et accédez à la page "Templates". Ici, vous pouvez créer un nouveau template ou modifier un template existant. Cliquez sur "Créer un template" et sélectionnez "Template HTML vierge" pour partir de zéro.

Styles et Polices

Pour ajouter des styles et des polices personnalisés à votre template, vous pouvez utiliser du HTML et CSS standard. Vous pouvez inclure des styles en ligne ou faire référence à des feuilles de style externes. Par exemple, vous pouvez utiliser le code suivant pour ajouter une police personnalisée à votre template :

<html>
  <head>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap" rel="stylesheet">
    <style>
      body {
        font-family: "Open Sans"
      }
    </style>
  </head>
  <body>
    <h1>Bonjour, Monde !</h1>
  </body>
</html>

Contenu Dynamique

Pour inclure du contenu dynamique dans votre template, vous pouvez utiliser les variables Twig. Les variables dans Twig sont encadrées par des doubles accolades. Par exemple, si vous voulez afficher un nom, vous pouvez l'ajouter comme ceci : {{ name }}. Vous pouvez également accéder aux propriétés imbriquées d'un objet en utilisant la notation point. Par exemple, si vous avez un objet utilisateur avec une propriété email, vous pouvez y accéder en utilisant {{ user.email }}.

Les propriétés d'objet courantes auxquelles vous pouvez accéder incluent :

Informations de base : id, name, title, description, type, status
Informations de contact : email, phone, address
Données commerciales : price, amount, currency, qty, total
Dates et URLs : date, url
Collections : items, data

<html>
  <body>
    <h1>{{ title }}</h1>
    <p>Statut : {{ status }}</p>
    <p>Montant Total : {{ amount }} {{ currency }}</p>

    <h2>Informations de Contact</h2>
    <p>Email : {{ email }}</p>
    <p>Téléphone : {{ phone }}</p>
    <p>Adresse : {{ address }}</p>
  </body>
</html>

Structures de Contrôle

Boucles

Pour afficher une liste d'éléments dans votre template, vous pouvez utiliser la syntaxe de boucle for de Twig :

<table>
  <thead>
    <tr>
      <th>Nom de l'Article</th>
      <th>Quantité</th>
      <th>Prix</th>
    </tr>
  </thead>
  <tbody>
    {% for item in items %}
      <tr>
        <td>{{ item.name }}</td>
        <td>{{ item.qty }}</td>
        <td>{{ item.price }}</td>
      </tr>
    {% endfor %}
  </tbody>
</table>

Blocs Conditionnels

Vous pouvez inclure des blocs conditionnels en utilisant if, else et endif :

{% if status == 'paid' %}
  <div class="paid">Paiement reçu</div>
{% else %}
  <div class="unpaid">Paiement en attente</div>
{% endif %}

{% if total > 1000 %}
  <div class="large-order">Commande importante détectée !</div>
{% endif %}

Blocs With

Utilisez les blocs with pour créer une nouvelle portée de variables :

{% with %}
    {% set foo = 42 %}
    {{ foo }} {# affichera 42 #}
{% endwith %}
{{ foo }} {# ne sera pas disponible #}

Filtres

Twig fournit de nombreux filtres pour modifier les variables. Voici les filtres disponibles :

Formatage de Texte

{{ name|upper }}           {# Convertir en majuscules #}
{{ name|lower }}           {# Convertir en minuscules #}
{{ name|capitalize }}      {# Première lettre en majuscule #}
{{ name|title }}          {# Première Lettre De Chaque Mot En Majuscule #}
{{ content|trim }}        {# Supprimer les espaces #}
{{ content|nl2br }}       {# Convertir les retours à la ligne en <br> #}
{{ content|spaceless }}   {# Supprimer les espaces entre les balises HTML #}

Formatage des Nombres

{{ price|number_format(2, '.', ',') }}   {# Formater avec 2 décimales #}
{{ number|round }}                       {# Arrondir le nombre #}
{{ number|abs }}                         {# Valeur absolue #}
{{ amount|currency }}                    {# Formater en devise #}

Formatage des Dates

{{ date|date('Y-m-d') }}     {# Formater la date #}
{{ now()|date('H:i:s') }}    {# Heure actuelle #}

Opérations sur les Tableaux

{{ array|length }}           {# Longueur du tableau #}
{{ array|first }}           {# Premier élément #}
{{ array|last }}            {# Dernier élément #}
{{ array|reverse }}         {# Inverser le tableau #}
{{ array|keys }}            {# Obtenir les clés du tableau #}
{{ array|sort }}            {# Trier le tableau #}
{{ array|merge(other) }}    {# Fusionner les tableaux #}
{{ array|join(', ') }}      {# Joindre les éléments du tableau #}
{{ array|column('name') }}  {# Extraire une colonne du tableau #}
{{ array|batch(3) }}        {# Diviser le tableau en lots #}

Transformation de Données

{{ data|json_encode }}      {# Convertir en JSON #}
{{ url|url_encode }}       {# Encoder l'URL #}
{{ "Bonjour %s"|format(name) }} {# Formatage style printf #}

Opérations Mathématiques

{{ max(1, 2, 3) }}         {# Valeur maximale #}
{{ min(1, 2, 3) }}         {# Valeur minimale #}
{{ random(1, 100) }}       {# Nombre aléatoire #}

Valeurs par Défaut

{{ user.name|default('Invité') }}  {# Utiliser la valeur par défaut si null #}

Filtres Personnalisés

Somme et Moyenne

{{ items|sum('price') }}     {# Somme des prix #}
{{ items|avg('rating') }}    {# Moyenne des notes #}

Codes QR

{{ url|qrcode }}            {# Générer un code QR avec la taille par défaut #}
{{ url|qrcode(300) }}       {# Générer un code QR avec une taille personnalisée #}