Einfacher & Eleganter Checkout (dfsimplecheckout) — Vollständige Anleitung

Überblick

DataFirefly Simple Checkout ersetzt den nativen 5-Schritte-Checkout von PrestaShop durch einen modernen One-Page-Kaufprozess, inspiriert von den Checkouts von Shopify und Stripe. Das Modul mountet seinen Controller zur Laufzeit über den Hook actionDispatcher — es wird keine Override-Datei auf die Festplatte geschrieben, und bestehende Drittanbieter-Overrides auf OrderController werden sauber geerbt.

Hauptfunktionen: zweispaltiges Layout mit permanenter Bestellübersicht, Social Login mit Google und Facebook, Adress-Autovervollständigung mit Google Places, länderbewusstes Adressformular, AJAX-Rabattcode, drei konfigurierbare Farben, ablenkungsfreier Modus.

Installation

1. Gehen Sie in Ihrem PrestaShop-Back-Office zu Module → Modul-Manager → Modul hochladen.
2. Wählen Sie die von Ihrem DataFirefly-Konto heruntergeladene Datei dfsimplecheckout.zip.
3. Klicken Sie auf Installieren und dann auf Konfigurieren.
4. Leeren Sie den PrestaShop-Cache (Erweiterte Einstellungen → Leistung → Cache leeren).
5. Besuchen Sie die Seite /order Ihres Shops mit einem Produkt im Warenkorb: Der neue Checkout wird sofort angezeigt.

Allgemeine Konfiguration

Farben

Drei Farben sind in den Moduleinstellungen konfigurierbar:

• Primärfarbe — Buttons, Links, aktive Zustände, ausgewählte Radios (Standard #1a73e8).
• Button-Hover-Farbe — Hover-Zustand der Primär-Buttons „Weiter“, „Bestellen“ (Standard #1559b8).
• Akzent-/Erfolgsfarbe — Indikatoren abgeschlossener Schritte, Pill des angewendeten Rabattcodes, „Gratis“-Label des Versanddienstleisters, Erfolgsmeldungen (Standard #008060).

Alle drei Werte werden als CSS-Variablen injiziert (--dfsc-primary, --dfsc-primary-hover, --dfsc-success) und per striktem Hexadezimal-Regex validiert.

Logo

Geben Sie die URL eines benutzerdefinierten Logos für den Checkout-Header an; andernfalls wird das Shop-Logo verwendet. Gerenderte Größe: maximal 190×42 px.

Ablenkungsfreier Modus

Die Option Header und Footer des Themes ausblenden (standardmäßig aktiviert) entfernt den kompletten Header des Themes (Menü, Suche, Warenkorb) und dessen Footer nur auf der Seite /order. Die Implementierung überschreibt die Smarty-Blöcke header und footer in unserem Template: Bei einem Theme, das diese Standardblöcke nicht verwendet, hat die Option schlicht keine Wirkung — niemals eine leere Seite.

Weitere Optionen

• Feld für Kundennotiz an den Verkäufer (ein/aus)
• Rabattcode-Feld (ein/aus)
• Vertrauensabzeichen — freies HTML unter der Übersicht
• Rechtliche Links im Checkout-Footer (AGB, Datenschutz, Widerruf — erkannt über die nativen CMS-Rollen)

Social Login Google

Anmeldedaten erstellen

1. Gehen Sie zur Google Cloud Console und erstellen (oder wählen) Sie ein Projekt.
2. Erstellen Sie unter APIs & Services → Credentials eine OAuth client ID vom Typ Web application.
3. Fügen Sie unter Authorized JavaScript origins die URL Ihres Shops hinzu (z. B. https://www.meinshop.de) — ohne Pfad, mit https-Protokoll.
4. Kopieren Sie die generierte Client ID (endet auf .apps.googleusercontent.com).

Modul konfigurieren

1. Aktivieren Sie in den Moduleinstellungen Google Sign-In und fügen Sie die Client ID ein.
2. Speichern, dann Cache leeren.
3. Auf /order erscheint der Google-Button oberhalb der Tabs „Ich bin Neukunde / Ich habe bereits ein Konto“.

Der Ablauf: Der Kunde klickt, wählt sein Google-Konto, und das Modul erhält ein JWT, das serverseitig über den offiziellen Endpoint tokeninfo validiert wird (Prüfung von Audience, Aussteller, Ablauf und verifizierter E-Mail). Existiert bereits ein Kundenkonto mit dieser E-Mail, wird der Kunde angemeldet; andernfalls wird automatisch ein Konto mit Vor- und Nachnamen des Google-Profils erstellt.

Social Login Facebook

App erstellen

1. Erstellen Sie auf Meta for Developers eine App vom Typ Consumer.
2. Fügen Sie das Produkt Facebook Login hinzu und deklarieren Sie Ihre Domain in den Einstellungen.
3. Holen Sie sich App ID und App Secret unter Settings → Basic.

Modul konfigurieren

Aktivieren Sie Facebook Login in den Einstellungen, fügen Sie App ID und App Secret ein, speichern. Die serverseitige Validierung erfolgt in zwei Schritten: debug_token (verifiziert, dass das Token zu Ihrer App gehört) gefolgt vom Profilabruf mit appsecret_proof-Signatur (HMAC-SHA256). Das App Secret verlässt Ihren Server nie.

Adress-Autovervollständigung Google Places

1. Aktivieren Sie in der Google Cloud Console die APIs Places API und Maps JavaScript API.
2. Erstellen Sie einen API-Schlüssel und beschränken Sie ihn auf Ihre Domain (empfohlen).
3. Aktivieren Sie im Modul Adress-Autovervollständigung und fügen Sie den Schlüssel ein.

Das Adressfeld des Formulars bietet dann während der Eingabe Vorschläge an. Die Auswahl eines Vorschlags füllt Straße, Zusatz, Stadt, PLZ, Land und ggf. Region aus. Die Vorschläge sind auf die aktiven Länder Ihres Shops beschränkt (bis zu 5 Länder — Limit der Google-API).

Länderbewusstes Adressformular

Das Adressformular passt sich automatisch an das gewählte Land an:

• Das Standardland des Dropdowns ist das in International → Lokalisierung Ihres Back-Office konfigurierte (nicht das alphabetisch erste Land).
• Das Feld Bundesland/Region erscheint nur für Länder, die welche haben (USA, Spanien, Italien…), und sein Dropdown listet nur die aktiven Regionen des gewählten Landes.
• Das Feld DNI erscheint für Länder, die es verlangen (Spanien).
• Die PLZ-Validierung verwendet das Format des Landes.
• Bei Landwechsel lädt die Seite neu, mit dem für das neue Land umstrukturierten Formular.

Adressbearbeitung

Jede gespeicherte Adresse zeigt ein Bleistift-Symbol. Ein Klick öffnet das Inline-Formular, vorausgefüllt mit allen Werten der Adresse (serverseitig geladen mit Eigentümerprüfung — ein Kunde kann niemals die Adresse eines anderen einsehen). Das Speichern aktualisiert die bestehende Adresse, ohne ein Duplikat anzulegen.

Rabattcode

Das (aktivierbare) Rabattcode-Feld funktioniert per AJAX: Anwenden und Entfernen ohne Neuladen, mit sofortiger Aktualisierung der Übersicht. Die Operationen werden an PrestaShops nativen CartController delegiert, sodass alle Warenkorbregeln (Daten, Mindestbetrag, Versandbeschränkungen, Kumulierung) identisch eingehalten werden. Native Fehlermeldungen („Dieser Gutschein ist abgelaufen“, „Mindestbetrag nicht erreicht“…) werden unverändert angezeigt.

Versandkompatibilität und Colissimo

Der Zusatzinhalt der Versanddienstleister (Colissimo-Abholpunkt-Karte, Mondial-Relay-Widget…) wird über {$carrier.extraContent} gerendert, exakt wie im nativen Template. Für Colissimo Abholpunkte injiziert das Modul automatisch die Daten des gewählten Punkts (Kennung, Mobilnummer) in die Validierungsanfragen, was die falsche Meldung „Bitte wählen Sie einen Abholpunkt“ eliminiert, die das Colissimo-Modul bei One-Page-Checkouts anzeigen konnte.

Entwickler-Hooks

• displayDfsimplecheckoutExpress — Slot oben im Checkout für Express-Zahlungen (Apple Pay, Google Pay, PayPal Express).
• displayDfsimplecheckoutSidebarTop / displayDfsimplecheckoutSidebarBottom — Injektionszonen in der Übersichtsspalte.
• actionDfscSocialLogin — wird nach einem erfolgreichen Social Login ausgelöst, mit den Parametern customer und dfsc_social_provider (google oder facebook). Nützlich für CRM-Tagging.

Fehlerbehebung

Der Google-Button wird nicht angezeigt

• Prüfen Sie, ob die Client ID eingetragen und die Option aktiviert ist.
• Prüfen Sie in der Browser-Konsole, ob ein „origin not allowed“-Fehler vorliegt — falls ja, fügen Sie die exakte URL Ihres Shops (mit https, ohne abschließenden Schrägstrich) in die Authorized JavaScript origins der Google Cloud Console ein.

Der Social Login bleibt nicht bestehen

Leeren Sie den PrestaShop-Cache und den Browser-Cache. Bleibt das Problem bestehen, prüfen Sie, ob ein Drittanbieter-Sicherheitsmodul die Session-Cookies nach dem Login invalidiert.

Das Feld Bundesland zeigt falsche Regionen

Stellen Sie sicher, dass Sie Modulversion 1.2.20 oder höher verwenden, welche die Formularstruktur serverseitig für jedes Land auflöst.

Leere Seite auf /order

Aktivieren Sie den PrestaShop-Debug-Modus (_PS_MODE_DEV_), um den Fehler anzuzeigen, oder prüfen Sie var/logs. Stellen Sie sicher, dass kein anderes One-Page-Checkout-Modul gleichzeitig aktiv ist.

Deinstallation

Deinstallieren Sie das Modul über den Modul-Manager. Die Runtime-Umgebung wird sofort freigegeben und der native 5-Schritte-Checkout wiederhergestellt. Keine Restdateien, keine verwaisten Daten.