Shop – Überblick

Der Shop ist direkt in die Formdock-App integriert. Sie können Mietverträge, Betriebskostenabrechnungen, Guthaben-Pakete und weitere Produkte kaufen, ohne die Anwendung zu verlassen.

Shop öffnen

Der Shop befindet sich ganz oben in der Hauptnavigation – noch über dem Dashboard, durch eine Trennlinie abgesetzt. Klicken Sie auf das Warenkorb-Symbol (Shop), um den Shop zu öffnen. Er erscheint mit einer sekundären Seitenleiste zur Produktnavigation.

Aufbau des Shops

Bereich Beschreibung
Produkte „Alle Produkte" zeigt das gesamte Sortiment. Darunter die einzelnen Produktkategorien (z. B. Mietverträge, Pakete, Guthaben).
Bestellung „Warenkorb" zeigt die aktuell ausgewählten Artikel inkl. Anzahl-Badge. „Zur Kasse" führt direkt zum Checkout.

Produktübersicht (rechts)

Die Produkte werden als Karten (Cards) dargestellt mit:

  • Produktbild mit optionalen Banderolen (z. B. „Unser Bestseller", „5 % Rabatt")
  • Produktname
  • Preis (inkl. MwSt.), bei Staffelrabatten durchgestrichener Originalpreis + reduzierter Preis
  • Staffelrabatt-Badge (z. B. „5 % Staffelrabatt") falls für das Produkt verfügbar
  • Kurzbeschreibung des Produkts
  • Mengen-Stepper zum Einstellen der gewünschten Stückzahl
  • „In den Warenkorb"-Button

Maximale Kartenbreite

Die Produktkarten skalieren nicht endlos mit der Browserbreite, sondern haben eine maximale Breite von 280 Pixel. So bleiben die Karten kompakt und übersichtlich, auch auf großen Bildschirmen.

Produktdetailseite

Klicken Sie auf ein Produkt, um die Detailansicht zu öffnen. Diese zeigt:

  • Großes Produktbild (links)
  • Preis und eventuelle Rabatte
  • Kurzbeschreibung (falls vorhanden)
  • Mengenauswahl und „In den Warenkorb"-Button
  • Link „Zurück zur Übersicht"
  • Reiter-Navigation (Tabs) unterhalb des Produkts – identisch zur normalen Shop-Seite. Typische Tabs sind z. B. „Beschreibung" (ausführlicher Produkttext) und produktspezifische Tabs wie „Mustermietvertrag" (mit PDF-Download-Möglichkeit).

Warenkorb

Der Warenkorb zeigt alle ausgewählten Produkte mit:

  • Produktname, Menge und Einzelpreis
  • Rabattanzeige: Staffelrabatt, persönlicher Rabatt und IVD-Rabatt (falls vorhanden) werden einzeln aufgeführt
  • Zwischensumme und Gesamtbetrag
  • Link „Zur Kasse" zum Fortfahren

Kasse (Checkout)

Der Checkout nutzt die moderne Block-Ansicht von WooCommerce. Ihre Kontaktdaten und Rechnungsadresse werden aus Ihrem Profil vorausgefüllt.

Die Kasse zeigt:

  • Kontaktinformation (E-Mail, IVD-Mitglied-Checkbox)
  • Rechnungsadresse (vorausgefüllt, per „Bearbeiten" änderbar)
  • Zahlungsoptionen (z. B. Überweisung, Kreditkarte, Stripe)
  • Bestellübersicht (rechte Spalte): Produkte mit Bild, Menge, Preis; Rabatte; Gutschein-Eingabe; Zwischen- und Gesamtsumme
  • AGB- und Widerrufs-Checkbox
  • „Jetzt bestellen"-Button

Zahlungsarten

  • Überweisung / Rechnung (BACS) – Verfügbar für freigeschaltete Kunden. Bankdaten werden nach der Bestellung angezeigt.
  • Kreditkarte / Stripe – Je nach Konfiguration verfügbar.

Rabatte im Checkout

Alle Rabatte werden automatisch berechnet und in der Bestellübersicht angezeigt:

  • Staffelrabatt: Mengenrabatt ab bestimmter Stückzahl (z. B. 5 % ab 5 Stück, 10 % ab 10 Stück)
  • Persönlicher Rabatt: Individuell zugewiesener Rabatt für Ihren Account
  • IVD-Rabatt: Automatischer Rabatt für verifizierte IVD-Mitglieder

Danke-Seite (nach der Bestellung)

Nach erfolgreicher Bestellung sehen Sie:

  1. Erfolgs-Banner mit Bestellnummer
  2. Bankdaten (bei Zahlung per Überweisung): Kontoinhaber, Bank, IBAN, BIC und Verwendungszweck
  3. PDF-Rechnung zum Download (bei abgeschlossenen Bestellungen): Klicken Sie auf „Rechnung herunterladen"
  4. Bestellübersicht: Bestellnummer, Datum, E-Mail, Zahlungsart, Status, Gesamtbetrag
  5. Bestellte Produkte: Tabelle mit Produkt, Menge und Preis
  6. Aktionsbuttons: „Zum Dashboard", „Weitere Produkte kaufen", „PDF-Rechnung"

Guthaben aufladen

Um Guthaben aufzuladen, wählen Sie im Shop die Kategorie Guthaben oder klicken Sie auf den Guthaben-Anzeige in der Hauptnavigation. Guthaben-Produkte ermöglichen eine flexible Aufladung mit individuellem Betrag.

Warenkorb-Leiste

Oberhalb der Produktübersicht zeigt eine Warenkorb-Leiste den aktuellen Status:

  • Leer: „Ihr Warenkorb ist leer"
  • Mit Artikeln: Artikelanzahl, Produktbilder, Gesamtbetrag, sowie Buttons „Warenkorb" und „Zur Kasse"

Die Leiste wird automatisch aktualisiert, wenn Sie Produkte hinzufügen.

Warenkorb-Badge

In der Hauptnavigation zeigt das Shop-Symbol ein Badge mit der Anzahl der Artikel im Warenkorb. Dieses Badge wird automatisch aktualisiert, wenn Sie Produkte hinzufügen oder entfernen.

Zurück zur Kategorie