Passer au contenu principal
L’éditeur de code vous donne un contrôle total sur un modèle. Les modèles sont écrits en HTML et CSS avec Liquid, le langage de modèles utilisé par Shopify : {{ order_name }} affiche le nom de la commande, {% for line_item in line_items %} se répète pour chaque article. Les variables de commande de Foliant suivent celles de Shopify Order Printer : les modèles écrits pour cette application fonctionnent donc en général tels quels. L’éditeur de code est disponible avec tous les forfaits.

Ouvrir l’éditeur de code

Ouvrez le modèle dans l’éditeur et cliquez sur l’onglet Code. Les modèles en code s’y ouvrent directement. Pour un modèle visuel, vous voyez d’abord le code compilé ; cliquez sur Modifier le code pour le changer. Consultez Passer du mode Visuel au mode Code. Le volet de gauche comporte trois onglets : Le volet de droite affiche l’aperçu en direct. Il se met à jour peu après que vous arrêtez de saisir.

Insérer un champ

  1. Placez le curseur à l’endroit où le champ doit apparaître.
  2. Cliquez sur Insérer un champ.
  3. Recherchez le champ (par exemple « suivi » ou « SKU ») dans Rechercher des champs, puis cliquez dessus.
Foliant insère son code Liquid à l’emplacement du curseur, par exemple {{ shipping_address.city }}. Les champs d’article, comme {{ line_item.sku }}, ne fonctionnent qu’à l’intérieur de la boucle des articles : insérez Articles de la ligne pour ajouter la boucle elle-même.

Rechercher dans le code

Cliquez sur le bouton de recherche à côté de Insérer un champ (ou appuyez sur ⌘F / Ctrl+F dans le code) pour trouver du texte dans le modèle.

Erreurs de code

L’éditeur vérifie votre code pendant que vous saisissez et signale les problèmes dans la marge :
  • Les erreurs vous empêchent d’enregistrer et mettent l’aperçu en pause. Un {{ ou un {% non fermé est une erreur. Elles sont listées dans un bandeau Erreurs de Code au-dessus de l’éditeur, chacune avec Aller à la ligne.
  • Les avertissements signalent ce qui pourrait être incorrect, mais ne vous empêchent pas d’enregistrer : par exemple un filtre, une balise ou un objet Liquid inconnu, une balise HTML ou une propriété CSS inconnue, ou une balise HTML non fermée.
Lorsque vous enregistrez, Foliant vérifie aussi le modèle : le Liquid doit être lisible, les balises HTML doivent être équilibrées et le SVG intégré ne peut contenir que des éléments de dessin. En cas de problème, l’enregistrement échoue et un bandeau Échec de la mise à jour liste jusqu’à cinq problèmes, avec leur numéro de ligne quand il est connu. Si le modèle est enregistré mais que l’aperçu ne peut pas être généré, un bandeau affiche le message de Liquid et la ligne, quand elle est connue.

Écrire de bons modèles

  • Les montants sont exprimés en centimes : affichez-les toujours avec un filtre monétaire, comme {{ total_price | money }}. Consultez Montants et devises dans les modèles.
  • Utilisez | escape sur le texte saisi par les clients, comme les notes et les adresses : {{ note | escape }}.
  • Utilisez {{ 'subtotal' | t }} pour les textes qui suivent la langue du document. Consultez Dates, langues et traductions.
  • Utilisez les snippets intégrés de Foliant pour la TVA : {% include 'vat_breakdown' %} affiche le tableau de ventilation de la TVA, et {% include 'legal_notes' %} les mentions légales (autoliquidation, export, IOSS…).

Bon à savoir

  • Si un modèle numéroté (facture, avoir ou devis) n’affiche document_number nulle part, Foliant ajoute une petite ligne avec le numéro à la fin du document. Consultez Numéros de document dans les modèles.
  • Les numéros de page et la répétition des en-têtes de tableau pour les modèles en code se trouvent sur la page des paramètres du modèle, sous Mise en page.
  • Pour récupérer un modèle depuis Shopify Order Printer ou Order Printer Pro, utilisez Importer un modèle sur la page Modèles. Consultez Importer un modèle depuis Order Printer.

Articles associés