Tutorial: Shop im Frontend benutzen

Tutorial: Shop im Frontend benutzen

dbXapp Shop-Katalog mit Artikelgruppen, Suche, Filtern und Produktkarten
Schritt 1: Im Katalog Gruppen, Suche, Filter und Seitennavigation verwenden.
Produktdetail eines dbXapp Pakets mit Bild, SKU, Beschreibung, Preis, Lieferung, Menge und Warenkorb-Schaltfläche
Schritt 2: Produktangaben und Menge prüfen und den Artikel in den Warenkorb legen.
Warenkorb mit Artikel, Menge, Preis, Versand, Gesamtsumme und Schaltfläche zur Kasse
Schritt 3: Warenkorbposition, Menge, Versand und Summe prüfen und zur Kasse wechseln.
Checkout mit Bestellübersicht und Eingabefeldern für Name, E-Mail, Telefon, Lieferadresse und Hinweis
Schritt 4: Kundendaten, Zahlung und rechtliche Zustimmung sorgfältig abschließen; Bestellbutton nur einmal verwenden.

Dieses Tutorial erklärt den Shop aus Sicht von Kunden und Testern – vom Katalog über Produktdetail und Warenkorb bis zur Kasse, Bestellübersicht und zu den Rechtstexten.

Demo-Hinweis beachten: Wenn der Shop ausdrücklich als Demo-Shop gekennzeichnet ist, entsteht kein tatsächlicher Kauf, keine Zahlung und keine Lieferung. In einem produktiven Shop gelten dagegen die angezeigten Vertrags- und Zahlungsbedingungen.

Der Einkaufsablauf auf einen Blick

1. Katalog 2. Produktdetail 3. Warenkorb 4. Kasse 5. Bestellung 6. Status und Dokumente

1. Katalog öffnen und Sortiment eingrenzen

Öffnen Sie im Hauptmenü Shop. Oben wechseln Sie zwischen Katalog, Warenkorb, Kasse, Bestellungen, Rechtstexten und Widerruf.

  1. Wählen Sie bei Bedarf eine Artikelgruppe wie Software, Dienstleistungen oder Merchandise.
  2. Geben Sie einen Suchbegriff ein und starten Sie Filtern.
  3. Öffnen Sie Filter verfeinern, um Merkmale wie Größe, Farbe oder Material zu wählen.
  4. Kontrollieren Sie „Gesamt“ und „Selektiert“, um zu sehen, wie stark der Filter wirkt.
  5. Blättern Sie über die Seitennavigation durch weitere Treffer.
Tipp: Wenn ein erwarteter Artikel fehlt, zuerst Suchtext und alle verfeinerten Filter zurücksetzen. Danach Gruppe und nächste Katalogseite prüfen.

2. Produktdetail sorgfältig lesen

Öffnen Sie einen Artikel über Bild oder Ansehen. Die Detailseite zeigt die für die Kaufentscheidung wichtigen Informationen.

  • Artikelname und SKU
  • Beschreibung und Artikelgruppe
  • Preis, Steuerhinweis und Versandkosten
  • Lieferzeit und Versandweg
  • Produktbilder und technische Merkmale
  • Mengenfeld und Schaltfläche „In den Warenkorb“

Prüfen Sie Varianten, Lieferumfang und Menge vor dem Hinzufügen. Bei digitalen Artikeln kann der Versandweg „Download / Freischaltung“ lauten; bei physischen Artikeln gelten die angegebenen Versandkosten.

3. Artikel in den Warenkorb legen

  1. Gewünschte Anzahl eintragen.
  2. In den Warenkorb wählen.
  3. Im Bestätigungsdialog zwischen Warenkorb, Kasse und „Weiter einkaufen“ entscheiden.
  4. Auf das Warenkorb-Symbol in der oberen Navigation achten; es zeigt die aktuelle Anzahl.

4. Warenkorb prüfen und ändern

Im Warenkorb werden Artikel, Menge, Preis, Versand und Summe tabellarisch dargestellt.

  1. Artikel und SKU mit der Produktauswahl vergleichen.
  2. Menge ändern und Mengen aktualisieren drücken.
  3. Summe und Versandkosten nach der Aktualisierung erneut prüfen.
  4. Einzelne Position über das Papierkorb-Symbol entfernen oder den gesamten Warenkorb leeren.
  5. Mit Zur Kasse fortfahren.
Preisprüfung: Maßgeblich ist die serverseitig neu berechnete Anzeige im Warenkorb und an der Kasse. Verlassen Sie sich nicht auf einen alten Tab oder eine zwischengespeicherte Produktansicht.

5. Kundendaten an der Kasse eingeben

Die Kasse zeigt zuerst noch einmal die Bestellung. Darunter folgen Kundendaten, Zahlung und rechtliche Zustimmungen.

  1. Name und gültige E-Mail-Adresse eintragen.
  2. Telefonnummer nur im erwarteten Format angeben.
  3. Lieferadresse vollständig mit Name, Straße, PLZ, Ort und Land erfassen.
  4. Optionalen Hinweis nur für bestellbezogene Informationen nutzen.
  5. Zahlungsart auswählen und den angezeigten Hinweis lesen.

6. Zahlung und Rechtliches bestätigen

Vor dem Absenden müssen die eingeblendeten rechtlichen Informationen gelesen und die erforderlichen Kontrollfelder aktiviert werden.

  • Rechtstexte, AGB, Zahlungs- und Versandhinweise öffnen.
  • Widerrufsbelehrung lesen.
  • Nur tatsächlich gelesene und verstandene Zustimmungen setzen.
  • Bei Online-Zahlung den Providerdialog vollständig abschließen und zum Shop zurückkehren.
Nicht doppelt absenden: Nach dem Klick auf den Bestellbutton auf die Rückmeldung warten. Mehrfaches Klicken oder Zurück-/Vorwärts-Navigation kann den Ablauf unnötig erschweren.

7. Bestellung und Status kontrollieren

Nach erfolgreicher Verarbeitung wird eine eindeutige Bestellnummer angezeigt. Notieren Sie diese Nummer. Im Bereich Bestellungen sehen angemeldete Benutzer ihre eigenen Bestellungen und – sofern verfügbar – Rechnungen oder Statusinformationen.

  • Bestellnummer und Positionen vergleichen.
  • Zahlungs- und Versandstatus nicht verwechseln.
  • Tracking-Link nur verwenden, wenn Dienstleister und Trackingnummer vorhanden sind.
  • Bei Unklarheiten Bestellnummer in der Kontaktanfrage nennen.

Typische Probleme

ProblemLösung
Keine Treffer im KatalogSuche und Detailfilter zurücksetzen, Gruppe und Seitennavigation prüfen.
Warenkorb ist leerProduktdetail erneut öffnen, Menge mindestens 1 setzen und Bestätigungsdialog beachten.
Kasse meldet fehlende DatenMarkierte Pflichtfelder, Lieferadresse und E-Mail vollständig ergänzen.
Bestellung wird nicht abgesendetRechtstexte und Widerruf öffnen, erforderliche Zustimmungen setzen, Zahlungsart prüfen.
Zahlung bleibt offenBestellstatus abwarten und nicht erneut bestellen; bei Bedarf mit Bestellnummer nachfragen.

Testcheckliste

  • Katalogsuche, Gruppe und mindestens ein Attributfilter getestet
  • Produktdetail mit Bild, Preis, Steuer, Versand und Menge geprüft
  • Warenkorbmenge geändert und Summe neu berechnet
  • Pflichtfelder und fehlende Zustimmungen erzeugen verständliche Meldungen
  • Bestellbutton nur einmal verwendet
  • Bestellnummer, Status und eigene Bestellansicht kontrolliert
  • Desktop- und Mobilansicht getestet

Shop öffnenZum Shop-Admin-TutorialAlle Tutorials