Dokumentation

Isotope OnePage-Checkout

Adresse, Versand, Zahlung und Bestellübersicht auf einer Seite – mit Adressvorschlägen für Deutschland und Versandkosten, die schon vor dem Absenden feststehen. Paket: contaolabs/isotope-onepage-checkout

Einrichtung

  1. Erweiterung im Contao Manager hochladen, „Änderungen anwenden“ und die Datenbank aktualisieren.
  2. Unter Themes → Frontend-Module ein Modul vom Typ OnePage-Checkout (Kategorie Isotope) anlegen.
  3. Zahlungs- und Versandarten, Benachrichtigungen und die Weiterleitung nach Bestellabschluss wie beim Isotope-Checkout wählen.
  4. Unter Rechtstexte die Seiten für AGB, Widerrufsbelehrung und Datenschutzerklärung wählen – sie werden an der Bestätigungs-Checkbox verlinkt.
  5. Das Modul auf der Kassenseite anstelle des bisherigen Checkout-Moduls einbinden.

Adressfelder und Reihenfolge

Welche Felder erscheinen, welche Pflicht sind und in welcher Reihenfolge sie stehen, legst du wie gewohnt unter Isotope → Shop-Konfiguration → Adressfelder fest – per Drag & Drop. Der Checkout übernimmt diese Einstellungen:

  • Straße, PLZ und Ort werden für Deutschland zu einem Adressfeld mit Vorschlägen zusammengefasst. Es steht dort, wo das erste dieser drei Felder einsortiert ist.
  • Für alle anderen Länder erscheinen Straße, PLZ und Ort als einzelne Felder an ihren Positionen.
  • Ein optionales, leeres Firmenfeld wird als „+ Firma hinzufügen“ angezeigt, ein optionales Telefonfeld mit „(optional)“.

Empfohlene Reihenfolge: E-Mail, Vorname, Nachname, Firma, Land, Straße, PLZ, Ort, Telefon. Auf die Anrede kannst du meist verzichten.

Adressvorschläge

  • OpenPLZ (Standard): kostenlos und ohne API-Key, amtliche Daten für PLZ, Ort und Straße (ohne Hausnummer).
  • Geoapify: Vorschläge bis zur Hausnummer, benötigt einen eigenen (kostenlosen) API-Key von myprojects.geoapify.com.
  • Keine Vorschläge: normale Adressfelder ohne Prüfung.

Für die Vorschläge fragt dein Server Postleitzahl, Ort und Straße beim gewählten Dienst ab. Bitte erwähne das in der Datenschutzerklärung deines Shops.

Gutscheine

Gutscheincodes legst du als Isotope-Regel unter Isotope → Regeln & Gutscheine mit aktivem Code an. Kunden lösen sie direkt in der Bestellübersicht ein.

Design anpassen

Das Grundlayout ist bewusst schlicht. Farben, Ecken und Abstände passt du über CSS-Variablen in deinem Theme an:

.shopify-checkout {
  --cl-opc-accent: #8a5a2b;  /* Buttons und Auswahl */
  --cl-opc-radius: 0;        /* eckige Felder */
}

Weitere Variablen: --cl-opc-ink, --cl-opc-muted, --cl-opc-line, --cl-opc-soft, --cl-opc-bg, --cl-opc-ok, --cl-opc-error. Mit „Kein Standard-Design laden“ im Modul lädt nur das Grund-CSS für die Funktion – das Aussehen kommt dann komplett aus deinem Theme. Das Template heißt mod_iso_onepage_checkout.

Update

Nach jedem Update im Contao Manager die Datenbank aktualisieren. Checkout-Module aus älteren Versionen werden dabei automatisch auf den aktuellen Modultyp umgestellt.