# 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](https://support.jetbot24.ru/de/shop/sales).

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](https://support.jetbot24.ru/de/mini-apps/elements).

| Element | Was es zeigt | Ausgang |
|---|---|---|
| [„Shop-Kategorien“](https://support.jetbot24.ru/de/mini-apps/elements/shop#shop-kategorien) | Die Kategorien des Katalogs | Immer — „Kategorie N“ |
| [„Shop-Produkte“](https://support.jetbot24.ru/de/mini-apps/elements/shop#shop-produkte) | Eine Produktliste mit Suche und Filter | Mit der Markierung „Produkt beim Tippen öffnen“ — „Produkt N“ |
| [„Produktkarte“](https://support.jetbot24.ru/de/mini-apps/elements/shop#produktkarte) | Ein Produkt: Fotos, Preis, Varianten, Beschreibung | — |
| [„Warenkorb“](https://support.jetbot24.ru/de/mini-apps/elements/shop#warenkorb) | Die Produkte im Warenkorb und die Summe | Immer — die Beschriftung des Bestell-Buttons |
| [„Bestellabschluss“](https://support.jetbot24.ru/de/mini-apps/elements/shop#bestellabschluss) | Felder des Käufers, Lieferung, Zahlung, Summe | Immer — die Beschriftung der Schaltfläche |
| [„Meine Bestellungen“](https://support.jetbot24.ru/de/mini-apps/elements/shop#meine-bestellungen) | Die Bestellungen dieses Käufers | Mit der Markierung „Bestellung beim Tippen öffnen“ — „Bestellung N“ |

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.

![Element „Shop-Kategorien“: Kategorien als Kacheln und Einstellungen des Elements](https://support.jetbot24.ru/_media/de/02-mini-apps/15-elements/_images/shop-categories.webp?v=1791786050)

- **„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“.

![Element „Shop-Produkte“: Produkte als Kacheln mit Suchleiste und Einstellungen des Elements](https://support.jetbot24.ru/_media/de/02-mini-apps/15-elements/_images/shop-products.webp?v=1791786050)

**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](https://support.jetbot24.ru/de/shop/catalog).

**„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“.

![Element „Produktkarte“: Fotos, Preis und Schaltfläche „In den Warenkorb“ und Einstellungen des Elements](https://support.jetbot24.ru/_media/de/02-mini-apps/15-elements/_images/shop-product.webp?v=1791786050)

- **„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.

![Element „Warenkorb“: zwei Produkte, Summe und Schaltfläche „Zur Kasse“ und Einstellungen des Elements](https://support.jetbot24.ru/_media/de/02-mini-apps/15-elements/_images/shop-cart.webp?v=1791786050)

- **„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.

![Element „Bestellabschluss“: Felder des Käufers, Summe und Schaltfläche „Bestellung aufgeben“ und Einstellungen des Elements](https://support.jetbot24.ru/_media/de/02-mini-apps/15-elements/_images/shop-checkout.webp?v=1791786050)

- **„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.

![Element „Meine Bestellungen“: Bestellungen des Käufers und Einstellungen des Elements](https://support.jetbot24.ru/_media/de/02-mini-apps/15-elements/_images/shop-orders.webp?v=1791786050)

- **„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“.