Shop#

Das Schaufenster des Projekt-Shops direkt in der App: Katalog, Produktkarte, Warenkorb, Bestellabschluss und die Bestellungen des Käufers. Produkte, Preise, Bestände, Lieferung und Zahlung nehmen die Elemente aus dem Shop — in der App legen Sie sie nicht an. Wie der Shop aufgebaut ist und wie das Schaufenster mit den Blöcken „Bestellung aufgeben“ und „Bestellzahlung“ zusammenhängt, steht im Bereich Shop.

In jedem Element wählen Sie zuerst den „Shop“ — den Projekt-Shop, dessen Produkte das Element zeigt. Im Editor zeigen die Elemente echte Produkte dieses Shops.

Wie Sie Elemente hinzufügen und was sie gemeinsam haben, steht auf der Seite Bildschirmelemente.

Der übliche Weg des Käufers: Kategorien → Produkte der Kategorie → Produktkarte → Warenkorb → Bestellabschluss → Block „Bestellung aufgeben“. Die Auswahl auf jedem Bildschirm landet in einer Variable, der nächste Bildschirm liest sie über einen Platzhalter.

Shop-Kategorien#

Die Kategorien des Katalogs, aus denen der Käufer einen Bereich wählt.

• „Unterkategorien von“ — die Kategorie, deren Unterkategorien angezeigt werden. Leer — Kategorien der obersten Ebene.
• „Ansicht“ — „Zeilen“ oder „Kacheln“.
• „Anzahl der Produkte zeigen“ — wie viele Produkte in der Kategorie sind.
• „Kategorie-ID in eine Variable“ — standardmäßig categoryId. Damit zeigt der nächste Bildschirm die Produkte dieser Kategorie.
• „Text, wenn nichts gefunden wurde“.

Den Ausgang „Kategorie N“ gibt es immer: Von einer Kategorie geht es immer weiter.

Shop-Produkte#

Eine Produktliste: der ganze Katalog oder eine Kategorie, mit Suche, Filterleiste und der Schaltfläche „In den Warenkorb“.

Was angezeigt wird:

• „Kategorie“ — leer — der ganze Katalog. Eine Kategorie wird mit ihren Unterkategorien gezeigt.
• „Kategorie aus einer Variablen“ — ein Platzhalter mit der ID der Kategorie, zum Beispiel {{ categoryId }} aus dem Element „Shop-Kategorien“. Die Variable hat Vorrang vor der oben gewählten Kategorie; ist sie leer, wird der ganze Katalog gezeigt.
• „Ansicht“ — „Zeilen“, „Karten“ oder „Kacheln“.
• „Abgerundete Fotoecken“, bei Karten und Kacheln — „Fotohöhe, px“ (das Foto passt vollständig in diese Höhe, ohne Beschnitt; 0 — in eigener Höhe) und „Fotos in der Karte wischen“ — mehrere Fotos eines Produkts werden direkt in der Liste gewischt.

„Auswahl“:

• „Sortierung“ — „Neueste zuerst“, „Günstigste zuerst“, „Teuerste zuerst“, „Nach Name“.
• „Produkte auf einmal“ — bis zu 50; weitere werden mit der Markierung „Beim Scrollen nachladen“ beim Scrollen geladen. „Text beim Laden“ — der Text währenddessen.
• „Nur auf Lager“.

„Suche und Filter“:

• „Suchleiste“ — sucht in Namen und Beschreibungen, Tippfehler werden verziehen. „Platzhalter der Suche“ — grauer Text in der leeren Suchleiste.
• „Filterleiste“ — Auswahl nach den Eigenschaften des Shops mit Zählern. Sie öffnet sich als Fenster über die Schaltfläche neben der Suche; „Titel des Auswahlfensters“ — sein Name. In die Leiste kommen Eigenschaften mit eingeschaltetem „In Filtern anzeigen“ — Kategorien, Eigenschaften und Filter.

„Produktkarte“ in der Liste:

• „Alten Preis zeigen“ — ein durchgestrichener Preis, wenn er höher als der aktuelle ist.
• „Schaltfläche „In den Warenkorb““ und „Text der Schaltfläche“. Bei einem Produkt mit Varianten steht auf der Schaltfläche „Auswählen“: Die Variante wird in der Produktkarte gewählt.
• „Produkt beim Tippen öffnen“ und „Produkt-ID in eine Variable“ — standardmäßig productId. Damit zeigt der Produktbildschirm die Karte.
• „Text, wenn nichts gefunden wurde“.

Produktkarte#

Ein Produkt vollständig: Fotos, Preis, Auswahl der Variante nach Optionen, Beschreibung und Merkmale, die Schaltfläche „In den Warenkorb“.

• „Welches Produkt zeigen“ — meist die Variable, in die das Element „Shop-Produkte“ das gewählte Produkt legt: {{ productId }}.
• „Was zeigen“ — „Fotos“ (mit den Markierungen „Fotos in voller Breite, ohne Seitenränder“ und „Abgerundete Fotoecken“), „Beschreibung“, „Merkmale“, „Alten Preis zeigen“.
• „Text der Schaltfläche“ — statt „In den Warenkorb“.
• „Text, wenn es das Produkt nicht gibt“ — das Produkt wurde vielleicht aus dem Verkauf genommen oder gelöscht. Leer — „Produkt nicht gefunden“.

Wie der Käufer eine Variante wählt — als Liste, mit Buttons, nach Farbe oder Bild —, legen Sie in der Produktkarte im Shop fest.

Im Editor zeigt das Element ein Muster mit dem ersten Produkt des Shops: Welches Produkt sich beim Käufer öffnet, ist vorher nicht bekannt.

Warenkorb#

Die Produkte im Warenkorb des Käufers: Anzahl, Summe und Bestell-Button.

• „Shop“ — der Käufer hat einen gemeinsamen Warenkorb mit den anderen Kanälen dieses Shops: Ein im Chatbot hinzugefügtes Produkt ist auch hier zu sehen.
• „Produktfotos zeigen“ und „Abgerundete Fotoecken“.
• „Bestellung“ — „Text der Schaltfläche“ (standardmäßig „Zur Kasse“) und „Farbe“. Von dieser Schaltfläche führt die Verbindung zum Bildschirm des Bestellabschlusses.
• „Text des leeren Warenkorbs“ — leer — „Der Warenkorb ist leer“.

Im Editor zeigt der Warenkorb ein Muster aus den ersten Produkten des Shops.

Der Ausgang des Warenkorbs ist der Bestell-Button, es gibt ihn immer.

Bestellabschluss#

Felder des Käufers, Auswahl von Lieferung und Zahlung und die Summe der Bestellung.

• „Shop“ — die Bestellung entsteht aus dem Warenkorb dieses Shops.
• „Wonach fragen“ — „Name“, „Telefon“, „E-Mail“, „Kommentar“. Pflichtfelder und den Mindestbestellwert legen die Einstellungen des Shops fest. Hier können Sie weglassen, was dieser Bildschirm nicht braucht: Bekannte Namen, Telefonnummern und E-Mail-Adressen werden selbst eingesetzt.
• „Summe zeigen“.
• „Text der Schaltfläche“ (standardmäßig „Bestellung aufgeben“) und „Farbe“. Von dieser Schaltfläche führt die Verbindung zum Block „Bestellung aufgeben“.
• „Text, wenn der Warenkorb leer ist“.

Lieferung und Zahlung sind die Methoden aus den Einstellungen des Shops. Die Adresse gibt der Käufer ein, wenn die gewählte Lieferung sie verlangt.

Meine Bestellungen#

Die Bestellungen dieses Käufers mit Nummer, Datum, Status und Betrag.

• „Wie viele Bestellungen zeigen“ — von 1 bis 20.
• „Bestellung beim Tippen öffnen“ und „Bestell-ID in eine Variable“ — standardmäßig orderId. Damit zeigt der Bestellbildschirm die Details und der Block „Bestellzahlung“ den Zahlungslink.
• „Text, wenn es keine Bestellungen gibt“ — leer — „Noch keine Bestellungen“.