21a

Kassenoberfläche und Produkt-Layout

Wozu dient das?#

Der Produkt-Layout-Editor bestimmt die visuelle Anordnung und Ergonomie der Produkt-Schaltflächen auf den Touch-Bildschirmen Ihrer Kassenterminals. Während die Speisekarte alle Produkte, Preise und Steuersätze zentral im Stammdatenbestand verwaltet, legen Sie im Layout-Editor fest, wie und wo diese Artikel auf dem Kassenbildschirm platziert sind. Eine durchdachte Anordnung reduziert Suchzeiten im Service und ermöglicht Ihrem Kassenpersonal maximale Geschwindigkeit beim Buchen von Bestellungen.

Voraussetzungen#

• Ein betriebsbereiter Mandant mit mindestens einem eingerichteten Standort.
• Ein aktiver Backoffice-Zugang mit der Systemrolle Owner oder Manager.
• Bereits im Produktinventar angelegte Kategorien und Artikel (→ Kapitel 21).

Rollen & Berechtigungen#

Trennung von Speisekarte und Kassen-Layout#

Im Kassensystem sind die Stammdaten der Speisekarte und die visuelle Kassenoberfläche strikt in zwei logische Ebenen getrennt:

• Produktinventar (product_inventory / Speisekarte): Verwaltet die rechtlich und kaufmännisch relevanten Stammdaten aller Artikel: Produktnamen, Bruttoverkaufspreise, Steuersätze (19 % / 7 %), Barcodes (EAN/SKU) und Produktvarianten (Master Data).
• Produkt-Layout (product_layout / Kassenoberfläche): Steuert ausschließlich die grafische Platzierung, Kachelgröße und Reihenfolge der Schaltflächen auf den Touchscreen-Terminals eines Standorts.

Praxisvorteil dieser Architektur:#

Mehrere Verkaufsstellen oder Kassenterminals desselben Betriebs (z. B. das Hauptrestaurant, ein Kiosk im Außenbereich und eine reine Getränke-Bar) nutzen exakt dieselben zentralen Artikel- und Preisstammdaten. Jede Verkaufsstelle erhält jedoch ihr eigenes, maßgeschneidertes Kassen-Layout:

• Bar-Terminal: Getränke, Cocktails und Snacks sind auf den ersten Plätzen des Rasters großflächig platziert.
• Restaurant-Terminal: Vorspeisen, Hauptgerichte und Desserts stehen im Fokus.
• Kiosk-Terminal: Schnelldreher und Mitnahmeartikel sind direkt erreichbar.

Preis- oder Namenänderungen im Produktinventar werden an allen Terminals automatisch übernommen, ohne dass die visuellen Kassen-Layouts manuell angepasst werden müssen.

Bildschirm für Bildschirm (ProductLayoutEditor.tsx)#

Der Bereich Produkt-Layout (Menüeintrag PRODUKT-LAYOUT) trägt die Zeile Ordnen Sie die Artikel im Gitter neu an oder fügen Sie neue aus der Bibliothek hinzu.

• 1 Rückgängig und Wiederherstellen (die Namen erscheinen als Hinweis am Knopf). Tastenkombinationen: Strg + Z und Strg + Umschalt + Z.
• 2 Änderungen speichern. Der Knopf ist hervorgehoben, solange ungespeicherte Änderungen vorliegen; danach steht dort Gespeichert.
• 3 Eine Kachel im Gitter: Zieh-Griff oben links, Artikelname und Brutto-Preis. Ziehen Sie sie an den Griff, um sie umzusortieren.
• 4 Das Papierkorb-Symbol oben rechts an der Kachel (Artikel entfernen). Es erscheint, sobald Sie mit der Maus über die Kachel fahren.
• 5 In der Produktbibliothek suchen Sie mit Bibliothek durchsuchen....
• 6 Jede Karte der Bibliothek zeigt Name und Preis; das Plus legt den Artikel aufs Gitter. Liegt er schon dort, blendet die Kasse Produkt bereits im Layout ein.
• 7 Das gestrichelte Gitter. Ohne Artikel steht dort Gitter ist leer. Fügen Sie Produkte aus der Bibliothek hinzu.

Die Einzelheiten:

• Kopfzeile:
  • Titel: Produkt-Layout (product_layout).
  • Untertitel: Ordnen Sie die Artikel im Gitter neu an oder fügen Sie neue aus der Bibliothek hinzu.
  • Rückgängig / Wiederherstellen: Werkzeugleiste oben rechts:
    • Rückgängig-Symbol: Macht den letzten Verschiebe- oder Einfügeschritt rückgängig (Hinweis Rückgängig).
    • Wiederherstellen-Symbol: Stellt einen rückgängig gemachten Schritt wieder her (Hinweis Wiederherstellen).
  • Speichern-Schaltfläche:
    • Änderungen speichern (save_changes): In Primärfarbe hervorgehoben, sobald nicht gespeicherte Kachelanpassungen vorliegen.
    • Gespeichert (saved): Grau schattiert, sobald der Zustand vollständig mit dem Server synchronisiert ist.
• Zentraler Arbeitsbereich (Gitter-Canvas):
  • Gestrichelter Rahmen, der das physische Touchscreen-Raster der Kassenterminals simuliert.
  • LargeScreenGate: Bei der Bearbeitung auf kleineren Bildschirmen empfiehlt das System die Umschaltung auf eine höhere Auflösung zur optimalen Vorschau des Terminal-Rasters.
  • Leerer Zustand: Ist noch kein Produkt platziert, wird der Hinweis Gitter ist leer. Fügen Sie Produkte aus der Bibliothek hinzu. (grid_is_empty_add_products_from_the_libr) angezeigt.
  • Produkt-Kacheln:
    • Grid-Icon: Symbolisiert die Kassen-Touchfläche.
    • Produktname: Fettgedruckte Bezeichnung des Artikels (maximal zweizeilig).
    • Preis-Badge: Zeigt den Brutto-Einzelpreis in Euro an (z. B. €8.50).
    • Zieh-Griff (GripVertical): Oben links an jeder Kachel zum Greifen per Maus oder Touch.
    • Entfernen-Schaltfläche (Trash2): Oben rechts an jeder Kachel (wird beim Darüberfahren eingeblendet) mit dem barrierefreien Hinweis Artikel entfernen (remove_item).
• Rechte Seitenleiste: Produktbibliothek (product_library)
  • Bereichs-Überschrift: Produktbibliothek (product_library).
  • Suchfeld: Bibliothek durchsuchen... (search_library) mit Lupe-Symbol zur Schnellsuche in den Stammdaten.
  • Produkt-Karten: Liste aller aktiven Stammdaten-Artikel des Mandanten mit Name, Einzelpreis und einer Plus-Schaltfläche (+) zum Hinzufügen auf das Raster.

Schritt für Schritt (mit Verzweigungen)#

1. Layout-Editor aufrufen#

1. Melden Sie sich im Backoffice an.
2. Wählen Sie im Navigationsmenü den Punkt Produkt-Layout (product_layout).
3. Das Kassensystem lädt automatisch das aktive Touchscreen-Raster des aktuell ausgewählten Standorts.

2. Artikel aus der Bibliothek auf das Kassenraster hinzufügen#

1. Nutzen Sie in der rechten Seitenleiste Produktbibliothek (product_library) das Suchfeld Bibliothek durchsuchen... (search_library).
2. Klicken Sie auf die Plus-Schaltfläche (+) neben dem gewünschten Artikel. > Verzweigung: Ist das Produkt bereits auf dem Kassenraster vorhanden, blendet das System den Hinweis "Product already in layout" ein und verhindert ein versehentliches Doppel-Einfügen.

3. Produktkacheln frei anordnen (Drag & Drop)#

1. Fahren Sie mit dem Mauszeiger über die gewünschte Kachel im Arbeitsbereich.
2. Klicken Sie auf den Zieh-Griff (GripVertical) oben links an der Kachel und halten Sie die Maustaste gedrückt.
3. Ziehen Sie die Kachel an die gewünschte Rasterposition.
4. Lassen Sie die Maustaste los. Das System sortiert benachbarte Kacheln automatisch um.

4. Artikel vom Kassenraster entfernen#

1. Fahren Sie mit der Maus über die Kachel, die Sie von der Kassenoberfläche entfernen möchten.
2. Klicken Sie oben rechts auf das rote Mülleimer-Symbol mit der Beschriftung Artikel entfernen (remove_item).
3. Die Kachel verschwindet aus dem Raster. > Wichtig: Das Entfernen aus dem Layout löscht das Produkt nicht aus den Stammdaten des Produktinventars, sondern blendet die Schaltfläche lediglich auf den Terminals aus.

5. Arbeitsschritte rückgängig machen oder wiederholen#

1. Nutzen Sie die Werkzeug-Symbole in der Kopfzeile (Rückgängig, Wiederherstellen) oder die Tastenkombinationen Strg + Z bzw. Strg + Shift + Z.

6. Kassen-Layout speichern und freigeben#

1. Sobald Änderungen am Raster vorliegen, wird die Schaltfläche Änderungen speichern (save_changes) in der Primärfarbe aktiv.
2. Klicken Sie auf Änderungen speichern (save_changes).
3. Nach erfolgreicher Übertragung wechselt die Schaltfläche zu Gespeichert (saved). > Verzweigung: Wenn Sie versuchen, die Seite mit ungespeicherten Änderungen zu verlassen, sperrt der Browser die Navigation mit einer Sicherheitsabfrage (beforeunload).

Kategorie-Tabs & Untergruppen auf der Kassenoberfläche#

Auf den Live-Kassenterminals wird das Produkt-Layout durch die im Produktinventar angelegten Kategorien strukturiert:

• Kategorie-Reiter (Tabs): Am oberen Bildrand der Kasse werden Reiter für jede Kategorie eingeblendet (z. B. "Getränke", "Hauptspeisen", "Desserts").
• Rasterzuordnung: Der Layout-Editor erlaubt die freie Platzierung aller Artikel. An den Terminals filtern die Kategorie-Reiter das angezeigte Kachelraster dynamisch, sodass Servicekräfte schnell zwischen Produktgruppen wechseln können.

Was passiert im Hintergrund#

• Das Kassen-Raster wird in der PostgreSQL-Datenbanktabelle product_grids als strukturierte Liste von Objektpositionen (X/Y-Koordinaten, Breite und Höhe) gespeichert.
• Nach dem Klick auf Änderungen speichern veröffentlicht das Backend ein Echtzeit-Event über den Redis-Stream (product_grid_updated).
• Alle aktiven Kassenterminals des Standorts empfangen dieses Event im Hintergrund und aktualisieren ihre Kassenansicht unverzüglich ohne Unterbrechung laufender Bediener-Sitzungen.

Häufige Probleme#

1. Fehlermeldung: Product grid not found#

• Ursache: Für den aktuell gewählten Standort existiert noch kein Datenbank-Eintrag in der Grid-Tabelle.
• Lösung: Das System erstellt bei der Ersteinrichtung eines Standorts ein Standard-Grid (→ Kapitel 20). Überprüfen Sie, ob ein gültiger Standort ausgewählt ist.

2. Fehlermeldung: Overlapping items at {pos}#

• Ursache: Zwei Produkt-Kacheln wurden durch einen Übertragungsfehler auf exakt dieselbe Rasterkoordinate platziert.
• Lösung: Verschieben Sie eines der betroffenen Elemente manuell auf ein freies Rasterfeld und speichern Sie erneut.

3. Fehlermeldung: Some products do not belong to this tenant or do not exist: {missing}#

• Ursache: Das geladene Layout enthält Produkt-IDs von Artikeln, die im Produktinventar gelöscht wurden oder zu einem anderen Mandanten gehören.
• Lösung: Entfernen Sie die ungültigen Kacheln mit Artikel entfernen (remove_item) und speichern Sie das Layout ab.

4. Fehlermeldung: Product not found#

• Ursache: Ein im Kassenraster platziertes Produkt wurde in den Stammdaten gelöscht oder archiviert.
• Lösung: Entfernen Sie die verwaiste Kachel aus dem Kassen-Layout.

5. Fehlermeldung: Category not found or belongs to another tenant#

• Ursache: Die Kategoriezuordnung eines im Layout verwendeten Produkts ist fehlerhaft.
• Lösung: Korrigieren Sie die Kategoriezuordnung des Produkts im Produktinventar (→ Kapitel 21).

6. Fehlermeldung: Location not found#

• Ursache: Dem angemeldeten Benutzerkonto ist im Backoffice derzeit kein aktiver Standort zugewiesen.
• Lösung: Wählen Sie in der oberen Standort-Auswahlleiste einen gültigen Standort aus.

7. Fehlermeldung: Access denied#

• Ursache: Der angemeldete Benutzer besitzt keine Berechtigung als Manager oder Owner.
• Lösung: Bitten Sie den Inhaber, Ihrem Benutzerkonto die erforderlichen administrativen Rechte zuzuweisen.

8. Fehlermeldung: Conflict: The item has been modified by another user.#

• Ursache: Ein anderer Benutzer hat zeitgleich Änderungen am Kassen-Layout desselben Standorts vorgenommen und gespeichert.
• Lösung: Laden Sie die Seite mit F5 neu, um den aktuellen Stand abzurufen, und führen Sie Ihre Anpassungen erneut durch.

Grenzen#

• Maximale Rasterbreite: Das Kassenraster ist auf Standard-Touchscreens (z. B. 10-Zoll-Tablets bis 15-Zoll-Kassenmonitore) ausgelegt. Bei extrem kleinen oder ungewöhnlich großen Bildschirmen wird das Raster skaliert.
• Keine individuellen Tastenfarben pro Einzelprodukt: Die Einfärbung der Touch-Kacheln richtet sich automatisch nach der übergeordneten Kategorie.

Dieses Kapitel gehört zum Merkuron-Handbuch für Inhaber und Servicepersonal.