Shop

Zweck

Der Shop ist das E-Commerce-Frontend von SpeamCore — Endkunden und authentifizierte Anwender koennen den Mandanten-Produktkatalog durchsuchen, Produkte einer Warengruppe anzeigen, Suche mit Debounce nutzen, in den Warenkorb legen und Bestellungen aufgeben. Der Shop hat eine Public-Sicht (ohne Login) und eine Auth-Sicht (mit Mandanten-Kontext und Preisen).

Voraussetzungen

- Public-Sicht: keine Voraussetzungen. - Auth-Sicht: Mandant ist eingeloggt; Profil hat Warengruppen freigegeben (siehe [Warengruppen-Profile](/product-group-profiles)). - Für Bestellungen: aktiver Warenkorb.

Berechtigungen (CASL)

Action	Subject	Wirkung	Keycloak-Rolle
view	FE_Shop	Shop-Frontend aufrufbar	—
view	Product, ProductGroup	Produktkatalog lesen	APP_SPEAMCORE_VIEW_PRODUCT, PRODUCT_GROUP
view	Product, Field sellPrice	Preise sichtbar — wenn fehlt, werden Preise ausgeblendet	APP_SPEAMCORE_VIEW_PRODUCT, FIELD SELL_PRICE`
view/create	ShoppingCart, ShoppingCartProduct	Warenkorb pflegen	APP_SPEAMCORE_VIEW/CREATE_SHOPPING_CART, SHOPPING_CART_PRODUCT
create	ShopOrder	Bestellung aufgeben	APP_SPEAMCORE_CREATE_SHOP_ORDER

Schritt-für-Schritt-Anleitung

Produkt suchen

1. Shop (/shop) öffnen.
2. Suchfeld nutzen — Suche laeuft nach 400 ms Debounce.
3. Optional: Warengruppe über /shop/groups/:id/:slug? wählen.
4. Klick auf Produkt → Detailseite /shop/p/:id/:productNo/:slug? (SEO-Slug).

In den Warenkorb legen

1. Auf der Produkt-Detailseite Menge wählen.
2. In den Warenkorb klicken — POST /api/shopping-carts/:id/products.
3. Cart-Badge im Header zeigt den aktuellen Cart-Stand.

Bestellung erstellen

1. Warenkorb (/shop/shopping-carts) öffnen.
2. Bestellung erstellen triggert POST /api/shop-orders mit den Cart-IDs.
3. Sie werden auf die Shop-Order-Detailseite weitergeleitet.

UI-Elemente

Suchfeld

Debounced (400 ms). Loest beim Tippen useInfiniteQuery mit neuem searchTerm aus.

Komponente: ShopHeaderElement

Zeigt Cart-Badge mit aktueller Anzahl Cart-Einträge.

Public/Auth-Split

Anonyme Anwender treffen GET /api/public/shop/products; eingeloggte Anwender treffen GET /api/products mit Mandanten-Filter.

Felder und Eingaben

Der Shop ist primaer Lese-/Browse-Modus. Eingaben:

Feldname	Pflicht	Datentyp	Wirkung beim Ausfuellen	Voraussetzung
searchTerm	nein	String	Debounce 400 ms; refetcht den Produkt-InfiniteQuery mit neuem Filter.	—
quantity (im Warenkorb)	ja	Integer	Bestimmt Bestellmenge. Wird gegen Lagerbestand validiert.	min = 1; ggf. Lagerbestand prüfen.

Wiederverwendbare Konzepte

• Berechtigungen verstehen (CASL) — Field-Level für sellPrice.
• Warengruppen-Profile — Sichtbarkeit der Warengruppen pro Mandant.

Verknuepfungen zu anderen Modulen

• Produkte — Quelle des Katalogs.
• Warengruppen-Profile — Filter, welche Produkte ein Mandant sieht.
• Warenkorb — /shop/shopping-carts.
• Bestellungen — /shop-orders.

API/Schnittstellen

Methode	Endpoint	Zweck	CASL
GET	/api/public/shop/products	Public-Produktliste	—
GET	/api/products	Auth-Produktliste mit Discount/Mandanten-Filter	view Product
GET	/api/product-groups	Warengruppen-Navigation	view ProductGroup
POST	/api/shopping-carts/:id/products	Produkt in Warenkorb legen	create ShoppingCartProduct
POST	/api/shop-orders	Bestellung erstellen	create ShopOrder

Versionshinweise

• 2026-04-29: Initiale Veroeffentlichung mit FE-Tiefen-Standard.