Zum Hauptinhalt springen
Mit dem Code-Editor haben Sie die volle Kontrolle über eine Vorlage. Vorlagen bestehen aus HTML und CSS mit Liquid, derselben Vorlagensprache, die Shopify verwendet: {{ order_name }} gibt den Namen der Bestellung aus, {% for line_item in line_items %} wird für jeden Artikel wiederholt. Die Bestellvariablen von Foliant folgen denen von Shopify Order Printer, daher funktionieren dafür geschriebene Vorlagen meist unverändert. Der Code-Editor ist in jedem Tarif enthalten.

Code-Editor öffnen

Öffnen Sie die Vorlage im Editor und klicken Sie auf den Tab Code. Code-Vorlagen öffnen sich direkt dort. Bei einer visuellen Vorlage sehen Sie zuerst den kompilierten Code. Klicken Sie auf Code bearbeiten, um ihn zu ändern. Siehe Zwischen Visuell und Code wechseln. Der linke Bereich hat drei Tabs: Der rechte Bereich ist die Live-Vorschau. Sie aktualisiert sich kurz nachdem Sie aufgehört haben zu tippen.

Feld einfügen

  1. Setzen Sie den Cursor an die Stelle, an der das Feld stehen soll.
  2. Klicken Sie auf Feld einfügen.
  3. Suchen Sie unter Felder suchen nach dem Feld (zum Beispiel „tracking“ oder „SKU“) und klicken Sie darauf.
Foliant fügt das zugehörige Liquid am Cursor ein, zum Beispiel {{ shipping_address.city }}. Artikelfelder wie {{ line_item.sku }} funktionieren nur innerhalb der Artikelschleife: Fügen Sie Artikelzeilen für die Schleife selbst ein.

Code durchsuchen

Klicken Sie auf die Suchschaltfläche neben Feld einfügen (oder drücken Sie im Code ⌘F / Strg+F), um Text in der Vorlage zu finden.

Code-Fehler

Der Editor prüft Ihren Code während der Eingabe und markiert Probleme am Rand:
  • Fehler verhindern das Speichern und pausieren die Vorschau. Ein nicht geschlossenes {{ oder {% ist ein Fehler. Fehler werden in einem Banner Code-Fehler über dem Editor aufgelistet, jeweils mit Zur Zeile.
  • Warnungen weisen auf mögliche Probleme hin, verhindern das Speichern aber nicht, zum Beispiel ein unbekannter Liquid-Filter, ein unbekanntes Tag oder Objekt, ein unbekanntes HTML-Tag oder eine unbekannte CSS-Eigenschaft oder ein nicht geschlossenes HTML-Tag.
Beim Speichern prüft Foliant die Vorlage ebenfalls: Das Liquid muss lesbar sein, HTML-Tags müssen ausgeglichen sein, und Inline-SVG darf nur Zeichenelemente enthalten. Wenn etwas nicht stimmt, schlägt das Speichern fehl, und ein Banner Update fehlgeschlagen listet bis zu fünf Probleme auf, mit Zeilennummern, sofern bekannt. Wenn die Vorlage gespeichert wird, die Vorschau aber nicht gerendert werden kann, zeigt ein Banner die Meldung von Liquid und die Zeile an, sofern bekannt.

Gute Vorlagen schreiben

  • Geldbeträge sind in Cent angegeben: Geben Sie sie immer mit einem Geldfilter aus, zum Beispiel {{ total_price | money }}. Siehe Geld und Währung in Vorlagen.
  • Verwenden Sie | escape bei Text, den Kunden eingegeben haben, etwa Notizen und Adressen: {{ note | escape }}.
  • Verwenden Sie {{ 'subtotal' | t }} für Formulierungen, die der Sprache des Dokuments folgen. Siehe Datumsangaben, Sprachen und Übersetzungen.
  • Verwenden Sie die integrierten Snippets von Foliant für die MwSt.: {% include 'vat_breakdown' %} gibt die Tabelle mit der MwSt.-Aufschlüsselung aus, {% include 'legal_notes' %} die rechtlichen Hinweise (Reverse Charge, Export, IOSS…).

Gut zu wissen

  • Wenn eine nummerierte Vorlage (Rechnung, Gutschrift oder Angebot) document_number nirgends ausgibt, fügt Foliant am Ende des Dokuments eine kleine Zeile mit der Nummer hinzu. Siehe Dokumentnummern in Vorlagen.
  • Seitenzahlen und wiederholte Tabellenköpfe für Code-Vorlagen finden Sie auf der Einstellungsseite der Vorlage unter Seitenlayout.
  • Um eine Vorlage aus Shopify Order Printer oder Order Printer Pro zu übernehmen, verwenden Sie Vorlage importieren auf der Seite „Vorlagen“. Siehe Vorlage aus Order Printer importieren.

Verwandte Artikel