Modul SmartCheckout¶

Mit dem Modul SmartCheckout legen Sie Warenkorb, Kundendaten, Versandart, Zahlungsart und Zusammenfassung auf eine einzige Seite. Ihre Kunden sehen alle Schritte der Bestellung auf einen Blick und schließen sie ohne Seitenwechsel ab. Jede Änderung, etwa an der Menge, dem Lieferland oder der Versandart, schickt der Browser an den Shop, der mit der regulären Kalkulation neu rechnet. Die Zusammenfassung zeigt deshalb immer die richtigen Preise, Versandkosten und Steuern.

Der SmartCheckout ersetzt das frühere Modul EinSeitenCheckout.

Voraussetzungen¶

Ein Browser mit aktiviertem JavaScript.
Das Modul ist Bestandteil von wpShopGermany und benötigt keine eigene Lizenz.

Einrichten¶

Öffnen Sie wpShopGermany → Konfiguration → Module und wählen Sie in der Gruppe „Bestellung“ das Modul SmartCheckout.
Stellen Sie Modul aktiviert auf „Ja“.
Wählen Sie bei Seite für den EinSeitenCheckout den Eintrag „Neu anlegen und zuordnen“ und klicken Sie auf Einstellungen speichern. Der Shop legt dann die Seite „Kasse“ an und bindet den Checkout dort ein.

Alternativ ordnen Sie eine bestehende Seite zu. Der Checkout wird automatisch in diese Seite eingebunden, ein Shortcode ist nicht nötig.

Einstellungen¶

Einstellung	Beschreibung
Seite für den EinSeitenCheckout	Die Seite, auf der der Checkout angezeigt wird. „Neu anlegen und zuordnen“ erstellt sie beim Speichern.
Aufteilung	Zweispaltig: Eingaben links, die Zusammenfassung läuft rechts mit (Standard). Einspaltig: Die Zusammenfassung steht unterhalb der Eingaben. Auf schmalen Bildschirmen wie Smartphone oder Tablet im Hochformat wird der Checkout immer einspaltig dargestellt.
Bestellabschluss	Legt fest, wie der Kunde die Bestellung abschließt: Zusammenfassung anzeigen, Zusammenfassung vor Abschluss (Standard) oder Direkt abschließen. Siehe Bestellabschluss.
Produktbilder im Warenkorb anzeigen	Zeigt zu jeder Warenkorbposition das Produktbild an (Standard: aktiv).

Solange das Modul aktiv ist, leitet der Shop die Warenkorbseite und die bisherigen Schritte Kasse, Versand/Zahlung und Zusammenfassung auf den SmartCheckout um. Ausnahme: Beim Bestellabschluss „Zusammenfassung anzeigen“ führt der SmartCheckout selbst auf die Zusammenfassung. Links auf den Warenkorb in Menüs oder Widgets müssen Sie nicht ändern. Deaktivieren Sie das Modul, gilt sofort wieder der klassische Bestellablauf.

Der Checkout im Shop¶

Warenkorb¶

Im ersten Abschnitt sieht der Kunde alle Produkte im Warenkorb:

Menge ändern: über die Schaltflächen – und + oder durch direkte Eingabe. Der Preis der Position und die Zusammenfassung werden sofort aktualisiert. Bei mehr als einem Stück steht zusätzlich der Stückpreis unter dem Gesamtpreis.
Entfernen: nimmt die Position aus dem Warenkorb.
Gutscheincode: Das Feld erscheint, wenn das Modul Gutscheine aktiv ist. Eingelöste Gutscheine werden darunter aufgelistet und können wieder entfernt werden. Deckt ein Wertgutschein nur einen Teil ab, zeigt die Zusammenfassung zusätzlich den Betrag „Zu zahlen“.

Angaben anderer Module wie Lieferzeit, Füllmenge, Gewicht, Produktvariablen, das GARAN-Gewährleistungslabel oder der Link „Vertrag widerrufen“ (Widerrufsformular) erscheinen direkt an der jeweiligen Position.

Sind die Module Zubehörprodukte oder Warenkorbteaser aktiv, zeigt der SmartCheckout die vorgeschlagenen Produkte als kompakte Liste unter den Warenkorbpositionen. Mit „Hinzufügen“ legt der Kunde sie ohne Seitenwechsel in den Warenkorb.

Kundendaten¶

Im Abschnitt „Ihre Daten“ gibt der Kunde seine Anschrift ein. Welche Felder erscheinen und welche davon Pflicht sind, legen Sie wie gewohnt unter wpShopGermany → Konfiguration → Einstellungen → Kundendaten fest. Pflichtfelder sind mit einem * gekennzeichnet, auch eigene Kundenfelder werden übernommen.

Ändert der Kunde das Land, berechnet der Shop Versandkosten und Steuern sofort neu.

Weitere Module fügen sich an passender Stelle ein:

Kundenverwaltung: Anmeldung für Stammkunden und Anlegen eines Kundenkontos.
wpNewsletterGermany und Trusted Shops: Zustimmungen innerhalb der Kundendaten.
Lieferadresse und Bestellvariablen: eigener Abschnitt unter den Kundendaten.

Versandart und Zahlungsart¶

In den Abschnitten „Versandart“ und „Zahlungsart“ stehen alle Versand- und Zahlungsarten, die für den aktuellen Warenkorb und das gewählte Land verfügbar sind, jeweils mit Logo, Hinweistext und Gebühr. Die Auswahl wird sofort in die Zusammenfassung übernommen.

Zahlungsarten mit eigenen Eingabefeldern, zum Beispiel Kreditkarte oder Bankeinzug, zeigen ihre Felder direkt in der Auswahl an.

Zahlungsanbieter wie PayPal oder AmazonPay arbeiten im SmartCheckout wie im klassischen Ablauf: Nach dem Absenden der Bestellung wird der Kunde zur Bezahlseite des Anbieters weitergeleitet.

Beim Modul PayPal PLUS gilt: Ist dort Zahlung vor Bestellabschluss autorisieren aktiv, lautet der Bestellbutton bei gewählter PayPal-Zahlung „Mit PayPal bezahlen“. Die Zahlungsauswahl von PayPal und der Button „Direkt zu PayPal“ stehen im SmartCheckout nicht zur Verfügung, PayPal erscheint dort als normale Zahlungsart.

Zusammenfassung und Bestellabschluss¶

Die Zusammenfassung zeigt oben die bestellten Produkte mit Menge und Preis, darunter Zwischensumme, Rabatte, Gutscheine, Versandkosten, Zahlungsgebühr, Netto- und Bruttobetrag sowie die enthaltene Mehrwertsteuer. Bei Kleinunternehmern entfällt der Steuerausweis, stattdessen erscheint der entsprechende Hinweis.

Unter den Beträgen bestätigt der Kunde die AGB und die Widerrufsbelehrung. Ist das Modul Bestellbedingungen aktiv, erscheinen stattdessen Ihre eigenen Bedingungen. Bedingungen, die an bestimmten Produkten oder Versandarten hängen, blendet der SmartCheckout automatisch ein, sobald sie zutreffen.

Mit „zahlungspflichtig bestellen“ schließt der Kunde die Bestellung ab. Während die Bestellung übermittelt wird, ist der Button gesperrt, ein doppeltes Absenden ist damit ausgeschlossen. Danach folgt die gewohnte Abschlussseite bzw. die Weiterleitung zum Zahlungsanbieter.

Wie der Weg zu diesem Button aussieht, legt die Einstellung Bestellabschluss fest.

Bestellabschluss¶

Einstellung	Ablauf für den Kunden
Direkt abschließen	Der Button in der Zusammenfassung heißt „zahlungspflichtig bestellen“ und schließt die Bestellung sofort ab, wie oben beschrieben.
Zusammenfassung vor Abschluss	Der Button heißt zunächst „Weiter“. Der Shop prüft die Angaben; fehlt etwas, wird das Feld markiert. Sind alle Angaben in Ordnung, sperrt der SmartCheckout sämtliche Eingaben und zeigt oben den Hinweis „Bitte prüfen Sie Ihre Angaben“. Erst jetzt erscheinen AGB bzw. Bestellbedingungen und der Button „zahlungspflichtig bestellen“. Mit „Angaben ändern“ werden die Felder wieder bearbeitbar.
Zusammenfassung anzeigen	Der Button heißt „Weiter zur Zusammenfassung“. Nach der Prüfung der Angaben folgt die gesonderte Bestellübersicht des klassischen Ablaufs mit allen Angaben, den AGB bzw. Bestellbedingungen und dem Button „zahlungspflichtig bestellen“. Über „Ändern“ kommt der Kunde zurück in den SmartCheckout.

Arbeitet Ihr Shop mit eigenen Kopien von checkout.phtml oder smartcheckout.js aus einer älteren Version, kennen diese den Bestätigungsschritt nicht: Der SmartCheckout schließt dann bei „Zusammenfassung vor Abschluss“ direkt ab, wie bei Direkt abschließen. Aktualisieren Sie Ihre Kopien, siehe Templates.

Alle drei Abläufe erfüllen die Buttonlösung: Bestellt wird immer über „zahlungspflichtig bestellen“ (bzw. die Beschriftung des Zahlungsmoduls, etwa „Mit PayPal bezahlen“), „Weiter“ löst keine Bestellung aus.

AGB anpassen

Ihre AGB beschreiben in der Regel, wie der Vertrag zustande kommt und wie der Kunde Eingabefehler vor der Bestellung korrigiert. Passen Sie diesen Abschnitt an den gewählten Bestellabschluss an, zum Beispiel: „Mit Klick auf ‚Weiter‘ werden Ihre Angaben geprüft und zur Kontrolle angezeigt. Mit ‚Angaben ändern‘ können Sie sie korrigieren. Mit Klick auf ‚zahlungspflichtig bestellen‘ geben Sie eine verbindliche Bestellung ab.“ Beziehen Sie Ihre AGB von einem Anbieter für Rechtstexte, geben Sie dort den Ablauf entsprechend an. Im Zweifel ziehen Sie einen Anwalt hinzu.

Den Text Ihrer Bestellbedingungen müssen Sie nicht ändern: Er bezieht die Zustimmung auf das Absenden der Bestellung und passt zu allen drei Abläufen.

GARAN-Gewährleistungslabel¶

Führt Ihr Shop Produkte mit GARAN-Gewährleistungslabel, zeigt der SmartCheckout den gesetzlichen Hinweis zur Gewährleistung so an, wie Sie es unter Widerruf/Gewährleistung festgelegt haben: entweder als Hinweisfenster, das der Kunde mit „Zur Kenntnis genommen“ bestätigt, oder als Label direkt über dem Bestellbutton, das sich per Klick vergrößern lässt.

Fehlende oder fehlerhafte Angaben¶

Fehlt beim Absenden (bzw. bei „Weiter“) eine Pflichtangabe oder ist sie fehlerhaft, bleibt der Kunde auf dem SmartCheckout. Oben erscheint ein Hinweis, das betroffene Feld ist rot markiert. Alle übrigen Eingaben bleiben erhalten. Das gilt auch für nicht bestätigte AGB oder Bestellbedingungen sowie für eine fehlende Versand- oder Zahlungsart.

Leere Pflichtfelder meldet in der Regel schon der Browser, bevor die Bestellung abgeschickt wird.

Darstellung anpassen¶

Der SmartCheckout übernimmt Schrift und Farben Ihres Themes. Für eigene Anpassungen stehen im Stylesheet CSS-Variablen auf dem Element .wpsg_smartcheckout zur Verfügung, zum Beispiel:

Variable	Bedeutung
`--sc-u`	Basisgröße, aus der alle Abstände und Schriftgrößen berechnet werden (Vorgabe `1rem`). Hilfreich bei Themes, die die Schriftgröße von `html` verändern.
`--sc-accent`	Akzentfarbe, Vorgabe ist die Textfarbe des Themes
`--sc-error`	Farbe für Fehlermarkierungen
`--sc-line`	Farbe der Rahmen und Trennlinien
`--sc-radius`	Eckenradius von Feldern und Kästen

Beispiel für das Customizer-CSS oder das Stylesheet Ihres Themes:

.wpsg_smartcheckout { --sc-accent:#0a7c3e; --sc-radius:6px; }

Das Template mods/mod_smartcheckout/checkout.phtml lässt sich wie alle wpShopGermany-Templates im Theme unter wpsg_views/ überschreiben (siehe Templates).

Häufige Fragen¶

Der Warenkorb führt nicht auf den SmartCheckout. Prüfen Sie, ob das Modul aktiv ist und in den Moduleinstellungen eine Seite zugeordnet ist. Die Umleitung greift nur beim normalen Aufruf der Warenkorbseite.

Auf der Checkout-Seite erscheint nichts oder nur ein Hinweis auf JavaScript. Der SmartCheckout benötigt JavaScript. Ist es aktiviert, prüfen Sie, ob ein Optimierungs- oder Cache-Plugin die Skripte der Seite zusammenfasst oder verzögert lädt, und nehmen Sie die Checkout-Seite davon aus.

Eine Versand- oder Zahlungsart fehlt in der Auswahl. Es werden nur Versand- und Zahlungsarten angezeigt, die für das gewählte Land und den aktuellen Warenkorb freigegeben sind. Prüfen Sie die Einstellungen der jeweiligen Versand- bzw. Zahlungsart und die erlaubten Versand- und Zahlungsarten am Produkt.

Kann ich wieder zum klassischen Bestellablauf zurück? Ja. Deaktivieren Sie das Modul SmartCheckout, dann gilt sofort wieder der klassische Ablauf mit Warenkorb, Kasse, Versand/Zahlung und Zusammenfassung.