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.
Bei rechtlich sensiblen Abläufen muss der Einstieg in den Widerruf schnell zu finden und auf allen relevanten Seiten erreichbar sein. Der Footer eignet sich dafür meist gut, weil Besucher dort einen solchen Button erwarten und er zentral eingebunden werden kann.
Allerdings haben nicht alle JTL-Shop-Versionen oder Templates eine einfache, zentral pflegbare Lösung dafür. Es fehlt an einer einheitlichen Möglichkeit, den Button shopweit zu platzieren und mit einem strukturierten Widerrufsprozess zu verknüpfen. Eine offizielle Lösung kommt erst mit JTL-Shop 5.7 - ein sofortiges Update ist nicht für jeden Betreiber praktikabel.
Lösung
Mit Dropper platzierst du Drops flexibel im Shop und kombinierst sie nach Bedarf. In diesem Anwendungsbeispiel erzeugt ein 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 der Button überall wo du willst ein- bzw. ausblenden.
in Dropper Gold & Ultimate
Nutze alle Drops in unseren Flatrates oder wähle gezielt, was du brauchst.
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.
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.
Ressourcen
| Format | Ressource (Link) |
|---|---|
| Demo | Live-Demo zum Widerrufsbutton |
| Test & Shop | Drops im Store: Plain · Popup · Contact Form |
| Test & Shop | Dropper in unserem Store · Dropper Ultimate im JTL-Extension Store |
| Dokumentation | Plain Docs · Popup Docs · Contact Form Docs · Wiki |