# 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…

- Seite: <https://www.datafirefly.com/de/documentation/dfsimplecheckout/>
- Sprache: de
- Aktualisiert am: 2026-07-02
- Weitere Sprachen: [fr](https://www.datafirefly.com/documentation/dfsimplecheckout/index.md), [en](https://www.datafirefly.com/en/documentation/dfsimplecheckout/index.md), [es](https://www.datafirefly.com/es/documentation/dfsimplecheckout/index.md), [it](https://www.datafirefly.com/it/documentation/dfsimplecheckout/index.md), [pl](https://www.datafirefly.com/pl/documentation/dfsimplecheckout/index.md), [nl](https://www.datafirefly.com/nl/documentation/dfsimplecheckout/index.md), [pt](https://www.datafirefly.com/pt/documentation/dfsimplecheckout/index.md)
- Index: <https://www.datafirefly.com/de/documentation/llms.txt>

## Ü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.

Das Modul ist kompatibel mit PrestaShop 8.0 → 9.x. Keine Theme-Änderung erforderlich. Die Deinstallation stellt automatisch den nativen Checkout wieder her.

## 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](https://console.cloud.google.com/) 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](https://developers.facebook.com/) 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).

Google berechnet die Places API oberhalb des monatlichen Gratiskontingents. Für einen Shop mit moderatem Volumen reicht das Gratiskontingent in der Regel aus.

## 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.