HTML-Vorlagen

HTML-Vorlagen verwenden eine logikfreie Syntax im Mustache-Stil mit {{variable}}-Platzhaltern. Sie werden clientseitig im POS gerendert, was bedeutet, dass sie offline funktionieren — zum Anzeigen oder Drucken eines Belegs ist keine Serververbindung erforderlich.

Dies ist die empfohlene Engine für die meisten Benutzer.

Syntax

Variablen

Daten mit doppelten geschweiften Klammern einfügen:

<h1>{{store.name}}</h1>
<p>Order #{{order.number}}</p>
<p>Total: {{totals.total_display}}</p>

Verwenden Sie _display-Varianten für vorformatierte Währungswerte (z. B. $12.50 statt 12.5). Alle verfügbaren Felder finden Sie in der Referenz der Belegdaten.

Abschnitte (Schleifen und Bedingungen)

Verwenden Sie {{#section}}...{{/section}}, um Arrays zu durchlaufen oder Inhalte bedingt anzuzeigen:

{{#lines}}
<div class="line-item">
  <span>{{name}} × {{qty}}</span>
  <span>{{line_total_display}}</span>
</div>
{{/lines}}

Invertierte Abschnitte

Verwenden Sie {{^section}}...{{/section}}, um Inhalte anzuzeigen, wenn ein Wert leer oder falsch ist:

{{#customer.id}}
  <p>Customer: {{customer.name}}</p>
{{/customer.id}}
{{^customer.id}}
  <p>Guest checkout</p>
{{/customer.id}}

Lokalisierte Beschriftungen

Verwenden Sie {{i18n.key}} für übersetzbare Beschriftungen, die sich an die Sprache der Filiale anpassen:

<th>{{i18n.subtotal}}</th>
<td>{{totals.subtotal_display}}</td>

Gängige Muster

Filialkopfzeile

Das Array store.address_lines ist für Belege vorformatiert – durchlaufen Sie es, statt einzelne Adressfelder zusammenzusetzen.

<div style="text-align: center;">
  {{#store.logo}}<img src="{{store.logo}}" alt="{{store.name}}" style="max-width: 200px;" />{{/store.logo}}
  <h1 style="margin: 8px 0;">{{store.name}}</h1>
  {{#store.address_lines}}<div>{{.}}</div>{{/store.address_lines}}
  {{#store.phone}}<div>{{store.phone}}</div>{{/store.phone}}
  {{#store.tax_ids}}<div>{{#label}}{{label}} {{/label}}{{value}}</div>{{/store.tax_ids}}
</div>

Positionen mit Rabatten

Das Feld discounts einer Position ist der Rabattbetrag als positive Zahl oder 0, wenn kein Rabatt vorhanden ist. Mustache behandelt 0 als falsy, daher ist {{#discounts}}...{{/discounts}} die richtige Schutzbedingung.

{{#lines}}
<div class="line-item" style="display: flex; justify-content: space-between;">
  <div>
    <div>{{name}} × {{qty}}</div>
    {{#discounts}}
      <div style="font-size: 0.9em; color: #6b7280;">
        <s>{{unit_subtotal_display}}</s> {{unit_price_display}}
      </div>
    {{/discounts}}
  </div>
  <div>{{line_total_display}}</div>
</div>
{{/lines}}

Steuerübersicht

{{#tax_summary}}
<div class="tax-line">
  <span>{{label}} ({{rate}}%)</span>
  <span>{{tax_amount_display}}</span>
</div>
{{/tax_summary}}

Zahlungsdetails

{{#payments}}
<div class="payment" style="display: flex; justify-content: space-between;">
  <span>{{method_title}}</span>
  <span>{{amount_display}}</span>
</div>
{{#tendered}}
  <div style="display: flex; justify-content: space-between;">
    <span>{{i18n.tendered}}</span><span>{{tendered_display}}</span>
  </div>
  <div style="display: flex; justify-content: space-between;">
    <span>{{i18n.change}}</span><span>{{change_display}}</span>
  </div>
{{/tendered}}
{{/payments}}

Barcodes und QR-Codes

Verwenden Sie <barcode> Element – dieselbe Syntax wie Thermovorlagen. Der Wert wird innerhalb des Elements platziert; die Symbologie wird im type Attribut festgelegt. Der Renderer ersetzt jedes Element durch ein Inline-SVG.

<!-- Code 128 barcode of the order number -->
<barcode type="code128" height="40">{{order.number}}</barcode>

<!-- QR code -->
<barcode type="qrcode" scale="3">{{order.payment_url}}</barcode>

<!-- EAN-13 -->
<barcode type="ean13">{{order.number}}</barcode>

Das Attribut type muss in der Vorlage wörtlich festgelegt werden – es kann nicht aus einem Platzhalter stammen. Ein type von qr oder qrcode wird sowohl in HTML- als auch in Thermovorlagen als QR-Code gerendert.

Wenn der ausgewählte Barcode-Typ den Wert nicht codieren kann (zum Beispiel nicht numerische oder falsch lange EAN-13-Daten), zeigt die Vorschau einen Block Barcode error oder QR code error mit dem ursprünglichen Wert an, damit der Wert korrigiert oder zu einem kompatiblen Typ gewechselt werden kann.

Alle bwip-js-Symbologien werden unterstützt – code128, qrcode, ean13, ean8, upca, pdf417, datamatrix und viele mehr.

Formatierung

Logiklose Vorlagen werden vor dem Rendering durch WordPress' wp_kses_post bereinigt, wobei ** <style>, <head>, und Tags auf Dokumentebene** entfernt werden. Verwenden Sie Inline-Stile für jedes Element:

<div style="font-family: monospace; font-size: 12px; max-width: 300px; margin: 0 auto;">
  <div style="text-align: center; margin-bottom: 16px;">
    <strong style="font-size: 16px;">{{store.name}}</strong>
  </div>
  <div style="display: flex; justify-content: space-between; font-weight: 700; border-top: 1px solid black; padding-top: 8px;">
    <span>{{i18n.total}}</span>
    <span>{{totals.total_display}}</span>
  </div>
</div>

Dieselbe Einschränkung gilt für <script>, <link>, und andere Tags ohne Inhalt — sie werden entfernt, verlassen Sie sich also nicht auf externes CSS oder JavaScript.

Für Schwarzweiß ausgelegt

Belege werden in der Regel auf Schwarzweiß-Thermodruckern oder Schwarzweiß-Laserdruckern gedruckt. Berücksichtigen Sie das beim Design — verwenden Sie Schriftstärke, Weißraum, Schriftkontrast und horizontale Linien für die Hierarchie statt farbiger Flächen. Farbige Hintergründe und grauer Text verschwinden bei der Schwarzweiß-Ausgabe entweder oder werden als unscharfe Rasterflächen gedruckt.

Thermopapier-Optik ohne Thermodrucker benötigt?

Klicken Sie in der Galerie auf der Karte Schmaler Beleg auf Vorlage verwenden — das ist ein 72mm breites Layout mit Festbreitenschrift, das sauber über den Browserdruck, HTML-fähige Thermodrucker (Sunmi/Imin WebView-Geräte) und Standardpapier gedruckt wird. Nicht für rohe ESC/POS-Thermodrucker geeignet — verwenden Sie dafür die XML-Vorlagen Einfacher Thermobeleg.

Bewährte Verfahren

• Verwenden Sie _display Felder für alle Währungswerte — sie übernehmen die locale-gerechte Formatierung automatisch
• Verwenden Sie {{i18n.*}} Beschriftungen statt fest codiertem Text, damit Vorlagen sprachübergreifend funktionieren
• Abschnitte für Bedingungen verwenden — optionale Felder in {{#field}}...{{/field}} einschließen, damit sie ausgeblendet werden, wenn sie leer sind
• Mit einer Galerievorlage beginnen, anstatt von Grund auf neu zu erstellen
• Mit der Vorschau testen, bevor die Vorlage aktiviert wird