HINWEIS: Bevor ein Rechnungs- und Bonlayout in der Cloud geändert wird, wird empfohlen erst eine Kopie zu erstellen und diese dann zu bearbeiten. Somit ist gewährleistet, dass bei einem Fehler immer noch auf das Original umgestellt werden kann.
ACHTUNG: Jeglicher Fehler im Layout kann dazu führen dass, der gewünschte Bon bzw. die Rechnung nicht mehr gedruckt werden.
Rechnungs- und Bonlayouts können in der Lightspeed-Cloud vom Nutzer unter Setup > Hardware > Rechnungslayout erstellt werden. Hierzu wird eine stark vereinfachte Form des HTML-Codes verwendet.
In diesem Artikel werden folgende Punkte aufgeführt:
- Was sind Tags?
- Layout von Rechnungen und Bons
- Allgemeiner Aufbau
- Rows & Columns
- Layout von Zeilen & Spalten
- Textausrichtung
- Schriftgröße
- Fill- with Zeichen
- Ausgabe von Daten aus der Cloud
- Liste aller Tags
Um alles korrekt darstellen und ausweisen zu können, benutzen wir Tags (Syntax- oder Befehlsblöcke), die wie oben erwähnt aus dem HTML-Code übernommen sind und in vielen Fällen einen Anfangsbefehl und einen Endbefehl benötigen. Als Code gibt es die unten aufgeführten Varianten.
{{#anfangsbefehl}}
…code…
{{/endbefehl}}
<anfangsbefehl>
…code…
</endbefehl>
Layout von Rechnungen & Bons
Allgemeiner Aufbau
Zum generellen Aufbau gibt es fünf Komponenten, die den Rahmen der Darstellung bilden und in denen man innerhalb der Syntax (Satzbau) frei in der Gestaltung ist.
Die ersten drei Komponenten sind Header (Kopfzeile), Body (Text) und Footer (Fußzeile).
Diese sind die drei Hauptbereiche, in die sich eine Rechnung bzw. ein Bon gliedern lassen. In der unterstehenden Aufstellung sind die jeweiligen Inhalte für die einzelnen Bereiche aufgelistet.
POSITION | RECHNUNG | BON |
Header (Kopfzeile) | Logo | Tisch |
Header (Kopfzeile) | Restaurantadresse | Kellner |
Header (Kopfzeile) | Kundendaten (bei aktiver KDB) | Datum, Uhrzeit |
Header (Kopfzeile) | Kellner; Tisch; Datum | Bonnummer |
Header (Kopfzeile) | Rechnungsnummer | |
Body | Anzahl | Gang |
Body | Artikel | Anzahl |
Body | Einzelpreis | Artikel |
Body | Gesamtpreis | Einzelpreis |
Body | Total | |
Body | Zahlart | |
Body | MwSt.-Ausweis | |
Body | Tip (optional) | |
Body | Wechselgeld (optional) | |
Footer (Fußzeile) | Danksagung | Bleibt regulär leer |
Footer (Fußzeile) | Steuernummer | |
Footer (Fußzeile) | Kontaktmöglichkeiten | |
Footer (Fußzeile) | Öffnungszeiten |
Rows & Columns
Innerhalb des Headers, Bodys und Footers wird durch rows (Zeilen) unterteilt, die wiederum in columns (Spalten) unterteilt werden können. Im unteren Bild steht jedes Kästchen symbolisch für ein darstellbares Zeichen innerhalb einer Zeile mit einer Spalte. Die Gesamtanzahl von 48 Zeichen entspricht der Gesamtanzahl aller Zeichen der Zeichenbreite unseres Standarddruckers EPSON TM-M30.
HINWEIS: Die darstellbare Zeichenanzahl pro Zeile variiert je nach Drucker.
Als Code gibt es die unten aufgeführten Varianten.
<row>
<column></column>
</row>
oder
<row><column></column></row>
HINWEIS: Die oben gezeigten Code-Beispiele haben auch einen praktischen Anwendungsbereich, da sie als Leerzeile genutzt werden können. Zu den darstellbaren Zeichen gehören auch die Leerzeichen, daher müssen diese in die Überlegung der Aufteilung einer Zeile mit einbezogen und mitgezählt werden.
ZEILENUNTERTEILUNG | Beispiel 1
In diesem Beispiel wird die Zeile durch folgenden Code in 8 Spalten á 6 Zeichen unterteilt:
<row>
<column width=“6“></column>
<column width=“6“></column>
<column width=“6“></column>
<column width=“6“></column>
<column width=“6“></column>
<column width=“6“></column>
<column width=“6“></column>
</row>
Der Code zur Zeilenunterteilung in Spalten wird hier zusätzlich durch den Variablentag width ergänzt. Dieser wird nur in Verbindung mit column genutzt. Durch ihn werden die einzelnen Spalten bestimmt.
Width = Breite / nutzbare Anzahl an Zeichen pro Spalte in einer Zeile.
ZEILENUNTERTEILUNG | Beispiel 2
Die Zeile wird hier in drei Spalten unterteilt. Die erste und letzte Spalte entsprechen 12 Zeichen und die mittlere Spalte 24.
<row>
<column width=“12“></column>
<column width=“24“></column>
<column width=“12“></column>
</row>
Layout von Zeilen & Spalten
Textausrichtung
Um Spalten innerhalb einer Zeile individuell anzupassen, gibt es folgende Variablentags:
Align = left, center oder right legt die Ausrichtung (Bündigkeit) des Zeichenblockes fest
<row>
<column width=“12“ align="left"></column>
<column width=“24“ align="center"></column>
<column width=“12“ align="right"></column>
</row>
Schriftgröße
Style = double-height oder bold legt die Schriftgröße größer als Standard fest
WICHTIG: Wenn größere Schriften verwendet werden, verringert sich die Anzahl der druckbaren Zeichen. Die Anzahl ist zusätzlich der gewählten Schriftart auch noch zeichenabhängig, da beispielsweise der Buchstabe I weniger Platz benötigt als ein W.
<row>
<column width=“24“ style=“double-height“>2x so hoch</column>
<column width=“24“ style=“bold“> 3 x so groß</column>
</row>
HINWEIS: Bei Text, der in Standardgröße gedruckt werden soll, wird der „style“-Tag einfach weggelassen.
Fill- with - {Zeichen}
Fill-with - {Zeichen} mit dieser Variable wird ein Zeichen festgelegt, das dazu genutzt wird die Zeile komplett aufzufüllen.
<row>
<column width=“48“ fill-with="_"></column>
<column width=“48“ fill-with="*"></column>
</row>
Einfache Textausgabe
Wenn Text auf dem Bon oder der Rechnung ausgegeben werden soll, wird dieser immer innerhalb der Zeile, zwischen die jeweiligen column-Tags geschrieben.
<row>
<column width=“48“> Der Text steht hier </column>
</row>
Ausgabe von Daten aus der Cloud (Datenbank)
Als weitere Möglichkeit gibt es die Einzeltags, die eine direkte Ausgabe eines Datenbankeintrages in einem Bon bzw. einer Rechnung ausgeben. Diese benötigen auch keine Endbefehle und stehen immer zwischen den column-Tags, genauso wie Text.
<row>
<column width=“48“>Info:{{befehlDatenausgabe}}</column>
</row>
Eine Übersicht aller verfügbarer Tags gibt es hier: Liste aller Tags