Liquid-Vorlagen

Dokumente, E-Mails und Gutscheinkarten sind HTML mit Liquid (liquidjs). Händler bearbeiten sie im Dashboard mit Live-Vorschau; PDFs rendert Gotenberg (Chromium).

#Regeln

• Ausgaben werden automatisch HTML-escaped. | raw nur für vertrauenswürdige Werte.
• Strikte Filter: ein unbekannter Filter ist ein Fehler (mit Zeile und Spalte im Editor).
• Es werden nur eigene Eigenschaften gelesen (ownPropertyOnly).
• Keine Skripte: Vorschau-iframes sind ohne allow-scripts gesandboxt; Gotenberg lädt nur https:- und data:-Ressourcen.
• Seitengröße per CSS: @page { size: 148mm 105mm; margin: 0 }.

#Filter

#Rechnung

<h1>{{ document.title }} {{ document.number }}</h1>
<p>{{ customer.name }}<br>{% for line in customer.address_lines %}{{ line }}<br>{% endfor %}</p>
<table>
  {% for line in line_items %}
  <tr><td>{{ line.quantity }} × {{ line.title }}</td><td>{{ line.total | money: currency }}</td></tr>
  {% endfor %}
</table>
<p>Gesamt: {{ total | money: currency }}</p>
{% if payment.girocode %}<img src="{{ payment.girocode }}" alt="GiroCode">{% endif %}

Variablen: document (kind, title, number, date, refers_to, reason), order (number, date, po_number), customer (name, company, address_lines, email, vat_id), shop (name, legal_name, address_lines, vat_id, tax_number, bank, logo, primary_color, small_business), line_items[] (title, detail, sku, quantity, unit_price, total, tax_rate), shipping_lines[], taxes[] (rate, net, tax, total), net_total, tax_total, total, footer_lines, payment (method, reference, paid, due_date, skonto_*, girocode), intra_eu, lang, currency.

Lieferschein / Pickliste: order (number, date, qr_code, note), shipping_address, line_items[] (title, detail, sku, barcode, image, quantity, storage_location, stock, stock_after, weight, product_fields), item_count, total_weight, shipping_method.

#Gutscheinkarte

<div class="card">
  <div class="shop">{{ shop.name }}</div>
  <h1>{{ card.fields.headline | default: "Für dich" }}</h1>
  <div class="amount">{{ card.amount | money: card.currency }}</div>
  {% if card.recipient_name %}Für {{ card.recipient_name }}{% endif %}
  {% if card.message %}<p>{{ card.message }}</p>{% endif %}
  <div class="code">{{ card.code }}</div>
  {% if qr %}<img class="qr" src="{{ qr }}" alt="">{% endif %}
</div>

Variablen: card (code, amount, currency, expires_at, recipient_name, sender_name, message, fields.<key>), shop (name, logo, primary_color), qr (Bild-URL zum Einlösen).

Eigene Felder legt der Händler im Design-Editor an (Kennung ^[a-z][a-z0-9_]{1,30}$, max. 8 Felder). recipient_name, sender_name und message sind Standardfelder und stehen auch direkt auf card. Leere Felder bekommen den Vorgabetext des Felds. Auf der Produktseite rendert die Storefront dieselbe Vorlage live im Browser (mit Platzhalter-Code und -QR) – nur mit der Erweiterung Geschenkkarten Pro.