# 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[​](#syntax "Direkter Link zu Syntax")

### Variablen[​](#variables "Direkter Link zu 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](/de/receipts/receipt-data.md).

### Abschnitte (Schleifen und Bedingungen)[​](#sections-loops-and-conditionals "Direkter Link zu 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[​](#inverted-sections "Direkter Link zu 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[​](#localised-labels "Direkter Link zu 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[​](#common-patterns "Direkter Link zu Gängige Muster")

### Filialkopfzeile[​](#store-header "Direkter Link zu 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[​](#line-items-with-discounts "Direkter Link zu 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 "Direkter Link zu Steuerübersicht")

```
{{#tax_summary}}

<div class="tax-line">

  <span>{{label}} ({{rate}}%)</span>

  <span>{{tax_amount_display}}</span>

</div>

{{/tax_summary}}
```

### Zahlungsdetails[​](#payment-details "Direkter Link zu 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[​](#barcodes-and-qr-codes "Direkter Link zu Barcodes und QR-Codes")

Verwenden Sie `<barcode>` Element – dieselbe Syntax wie [Thermovorlagen](/de/receipts/thermal-templates.md). 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](https://github.com/metafloor/bwip-js/wiki/Supported-Barcode-Types) werden unterstützt – `code128`, `qrcode`, `ean13`, `ean8`, `upca`, `pdf417`, `datamatrix` und viele mehr.

## Formatierung[​](#styling "Direkter Link zu 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[​](#best-practices "Direkter Link zu 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