Toolbox: #007 · Fokus: Plain · Popup · Contact Form
Problem
Ich möchte den ab Juni 2026 gesetzlich geforderten Widerrufsbutton in meinem JTL-Shop sichtbar und für Besucher leicht erreichbar umsetzen, ohne dafür erst ein großes Shopupdate fahren zu müssen.
Die gesetzlich geforderte Widerrufs-Lösung (Button + einfaches Formular) muss schnell und auf jeder Shopsseite auffindbar sein, z.B. im Footer. Es existiert keine zentrale, shopweite & templateunabhängige Standardlösung für den JTL-Shop - eine offizielle Option soll erst mit JTL-Shop 5.7. kommen.
Lösung
Mit Dropper platzierst du Drops flexibel im Shop und kombinierst sie nach Bedarf. Um das Problem zu lösen, erzeugst du via Plain Drop den Widerrufsbutton im Footer. Ein Popup Drop öffnet sich beim Klick darauf, und im Popup befindet sich ein Contact Form Drop für die Widerrufsangaben.
So bleibt alles zentral wartbar und funktioniert unabhängig vom Template. Das Formular lässt sich an deinen Ablauf anpassen (z.B. Bestellnummer, Kontaktdaten, zusätzliche Angaben). Und den Button kannst du überall wo du willst ein- bzw. ausblenden.
In der Dropper-Zone
Beachte den Footer des Demoshops und schau ins Dropper Backend, um die Konfiguration von Plain, Popup und Contact Form nachzuvollziehen.
Schritt für Schritt
- Plain Drop für den Footer-Button erstellen;
classergänzen, z. B.kk-btn-wrb. - Plain Drop global im Footer einbinden (zentrale, template-unabhängige Ausgabe).
- Popup Drop anlegen und als Auslöser "Per Klick" auf den Selektor
.kk-btn-wrbkonfigurieren. - Contact Form Drop erstellen: Felder Name, Bestellnummer, E-Mail, Nachricht (optional).
- E-Mail-Versand im Contact Form konfigurieren (Bestätigung an Kunde + Benachrichtigung an Support).
- Contact Form im Popup verlinken.
- Auf Desktop und Mobil testen: Button klicken -> Popup öffnet Formular -> Formular absenden -> E-Mails prüfen.
in Dropper Gold & Ultimate
Nutze alle Drops in unseren Flatrates oder wähle gezielt, was du brauchst.
Wissenswert
Wir steigern die Usability des Formulars, indem wir für Felder mit Kundendaten (Name, E-Mail-Adresse) die Autocomplete-Semantik des Browsers und gespeicherte Kundendaten nutzen. Ein eingeloggter Kunde muss dann nur noch die Bestellnummer eingeben; die Kontaktdaten werden durch das Contact Form Drop vorausgefüllt.
Das Beispiel kann ausgebaut werden, z.B. mit einem zusätzlichen Widerrufsbutton direkt auf der Bestelldetailseite des Kundenkontos. Dort könnte dann sogar die Bestellnummer vorausgefüllt sein und der Button nur in bestimmten Zeiträumen (max. 14 Tage nach Versand der Bestellung) angezeigt werden. Das wäre aber einen weiteren Toolbox-Beitrag wert.
Hilfreich ist auch, dass das Contact Form Drop beliebig viele Mails pro Vorgang versenden kann. Hier senden wir eine Bestätigung an den Kunden und eine Benachrichtigung an das Supportteam des Shops. Beide E-Mails können vollkommen unterschiedliche Inhalte haben.
Die Umsetzung wirkt quasi in jedem Template stimmig, weil wir im Beispiel (und in unseren Drops) bewusst mit Bootstrap-Klassen arbeiten. Du kannst die Lösung in der Dropper-Zone nachvollziehen und sogar für deinen Shop exportieren.
Der Widerrufs-Button wird per Drop-Zone in die erste gefundene Linkgruppe des Footers eingefügt. Solange der Footer eine Linkgruppen-Box enthält, erscheint der Button dort in jedem JTL-Shop - unabhängig vom Template.
Mehr zu den rechtlichen Grundlagen zum Widerrufsbutton erfährst du z. B. bei e-recht24.de.
Das gleiche Prinzip funktioniert - ebenfalls mit Plain, Popup & Contact Form Drop - auch für andere Anwendungsfälle, z.B. Musteranforderungen, Prospektbestellungen, Projektanfragen oder die Vereinbarung von Rückrufterminen.
Ressourcen
| Format | Ressource (Link) |
|---|---|
| Demo | Live-Demo zum Widerrufsbutton |
| Test & Shop | Drops im Store: Plain · Popup · Contact Form |
| Dokumentation | Plain Docs · Popup Docs · Contact Form Docs · Wiki |
| Test & Shop | Dropper in unserem Store · Dropper Ultimate im JTL-Extension Store |
| Toolbox | So erstellst du einen Widerrufsbutton in jedem JTL-Shop |