Naar hoofdinhoud gaan
Met de code-editor heb je volledige controle over een sjabloon. Sjablonen bestaan uit HTML en CSS met Liquid, dezelfde sjabloontaal die Shopify gebruikt: {{ order_name }} drukt de naam van de bestelling af, {% for line_item in line_items %} herhaalt iets voor elk item. De ordervariabelen van Foliant volgen die van Shopify Order Printer, dus sjablonen die daarvoor zijn geschreven werken meestal zoals ze zijn. De code-editor zit in elk abonnement.

De code-editor openen

Open het sjabloon in de editor en klik op het tabblad Code. Codesjablonen openen daar direct. Bij een visueel sjabloon zie je eerst de gecompileerde code; klik op Code bewerken om die te wijzigen. Zie Schakelen tussen Visueel en Code. Het linkerdeel heeft drie tabbladen: Het rechterdeel is het live voorbeeld. Het wordt kort nadat je stopt met typen bijgewerkt.

Een veld invoegen

  1. Zet de cursor waar het veld moet komen.
  2. Klik op Veld invoegen.
  3. Zoek het veld (bijvoorbeeld “tracking” of “SKU”) onder Velden zoeken en klik erop.
Foliant voegt de Liquid ervan in bij de cursor, bijvoorbeeld {{ shipping_address.city }}. Velden van regelitems, zoals {{ line_item.sku }}, werken alleen binnen de lus van de regelitems: voeg Regelitems in voor de lus zelf.

De code doorzoeken

Klik op de zoekknop naast Veld invoegen (of druk op ⌘F / Ctrl+F in de code) om tekst in het sjabloon te vinden.

Codefouten

De editor controleert je code terwijl je typt en markeert problemen in de marge:
  • Fouten voorkomen dat je opslaat en pauzeren het voorbeeld. Een niet-gesloten {{ of {% is een fout. Ze staan in een banner Codefouten boven de editor, elk met Ga naar regel.
  • Waarschuwingen wijzen op dingen die mogelijk fout zijn, maar houden je niet tegen bij het opslaan, bijvoorbeeld een onbekend Liquid-filter, -tag of -object, een onbekende HTML-tag of CSS-eigenschap, of een niet-gesloten HTML-tag.
Als je opslaat, controleert Foliant het sjabloon ook: de Liquid moet leesbaar zijn, HTML-tags moeten in balans zijn en inline SVG mag alleen tekenelementen bevatten. Is er iets mis, dan mislukt het opslaan en toont een banner Bijwerken mislukt tot vijf problemen, met hun regelnummers als die bekend zijn. Wordt het sjabloon opgeslagen maar kan het voorbeeld niet worden weergegeven, dan toont een banner de melding van Liquid en de regel, als die bekend is.

Goede sjablonen schrijven

  • Geldbedragen staan in centen: druk ze altijd af met een geldfilter, zoals {{ total_price | money }}. Zie Geld en valuta in sjablonen.
  • Gebruik | escape voor tekst die klanten hebben getypt, zoals notities en adressen: {{ note | escape }}.
  • Gebruik {{ 'subtotal' | t }} voor tekst die de taal van het document volgt. Zie Datums, talen en vertalingen.
  • Gebruik de ingebouwde snippets van Foliant voor btw: {% include 'vat_breakdown' %} drukt de btw-specificatie af en {% include 'legal_notes' %} de wettelijke vermeldingen (btw verlegd, export, IOSS…).

Goed om te weten

  • Als een genummerd sjabloon (factuur, creditnota of offerte) nergens document_number afdrukt, voegt Foliant aan het einde van het document een kleine regel met het nummer toe. Zie Documentnummers in sjablonen.
  • Paginanummers en herhaalde tabelkoppen voor codesjablonen vind je op de instellingenpagina van het sjabloon, onder Pagina-indeling.
  • Wil je een sjabloon overnemen uit Shopify Order Printer of Order Printer Pro, gebruik dan Sjabloon importeren op de pagina Sjablonen. Zie Een sjabloon importeren uit Order Printer.

Gerelateerde artikelen