HTML et Données dynamiques

Structurer un modèle de document

Le cœur des modèles est HTML. Vous pouvez structurer vos documents en définissant des paragraphes avec <p> ou des titres avec <h1>, <h2>, …. Vous pouvez librement utiliser des éléments <div> ou <span> tout comme vous pouvez insérer des images avec <img> (voir Inclure des images dans les recettes).

Tout élément HTML supporté par votre navigateur peur être utilisé dans un modèle PDFMonkey.

Données dynamiques

Votre modèle va plus loin que du HTML basique, grâce à la syntaxe Liquid vous pouvez insérer des données dynamiques dans celui-ci. C’est là toute la force de PDFMonkey : définir une modèle unique et fournir des données différentes pour chaque génération de document.

Les données dynamiques peuvent être utiles pour :

Avant de pouvoir insérer des données dynamiques, il faut au préalable les définir quelque part. Ce quelque part est l’onglet Données d’exemple :

Mettons que nous ayons déclaré les données suivantes :

{
  "nom": "Jeanne Machin"
}

Vous pouvez utiliser cette information dans votre modèle en appelant une variable :

<p>Bonjour {{nom}} !</p>

La donnée sera insérée avant la génération du document :

Données groupées

Il est parfois plus simple de regrouper des données liées à un concept spécifique :

{
  "client": {
    "nom": "Jeanne Machin"
  },
  "produit": {
    "nom": "Délicieuses Gauffres"
  }
}

Vous pouvez ensuite y accéder grâce à la notation avec points :

<p>{{client.nom}} s'intéresse au produit {{produit.nom}}</p>

Ces données seront de nouveau insérées avant la génération du document :

Documentation de Liquid

Nous fournissons dans ces guides quelques exemples de d’utilisation de Liquid pour vos modèles. Pour aller plus loin vous pouvez vous référer à la documentation complète sur https://shopify.github.io/liquid/.