Banner-Schaltflächen auf Mobilgeräten reagieren nicht (Fehlerbehebung)

Überblick

In manchen Shops erscheint der Pandectes-Cookie-Banner auf iPhones zwar korrekt, seine Schaltflächen reagieren aber nicht. Besucher sehen den Banner, doch ein Tippen auf Accept, Deny oder das Schließen-Symbol "X" löst nichts aus.

Im untersuchten Fall lag die Ursache nicht an der Konfiguration des Banners, sondern an einem JavaScript-Konflikt mit fastclick.js, einer älteren Bibliothek, die früher die Tippverzögerung in mobilen Browsern beseitigen sollte. Moderne mobile Browser benötigen dieses Verhalten in der Regel nicht mehr, und FastClick im Theme zu belassen kann Probleme bei der Ereignisverarbeitung verursachen.

Warum das passiert

Der aktuelle Pandectes-Banner wird als Web Component (pandectes-cmp) dargestellt. Im betroffenen Shop hat fastclick.js das Touch- und Klickverhalten so abgefangen, dass die Interaktionen die Bedienelemente des Banners nicht erreichten.

Besonders auffällig ist das auf iPhones, weil Safari und Chrome unter iOS in der Standardumgebung dieselbe Browser-Engine nutzen. Dasselbe Interaktionsproblem kann daher in beiden Browsern auftreten.

Schritt 1: Das Symptom auf dem iPhone bestätigen

Prüfen Sie das Problem auf einem echten iPhone.

Erwartetes Verhalten in diesem Fall:

Der Banner ist sichtbar
Die Schaltflächen werden normal dargestellt
Ein Tippen auf Accept, Deny oder "X" bewirkt nichts

Dieser Schritt ist wichtig, weil sich das Problem auf Android-Geräten möglicherweise nicht reproduzieren lässt.

Schritt 2: Auf JavaScript-Konflikte im Theme prüfen

Prüfen Sie eigenes oder vom Theme mitgeliefertes JavaScript, das Folgendes verändert:

Touch-Ereignisse
Klick-Ereignisse
die Verarbeitung mobiler Gesten
künstlich erzeugtes Tippverhalten

Im bestätigten Fall war das konfliktverursachende Skript:

fastclick.js

Wenn der Shop ältere Bibliotheken für mobile Interaktionen verwendet, sollten diese zuerst geprüft werden.

Schritt 3: `fastclick.js` vorübergehend deaktivieren

Verhindern Sie über die Entwicklerwerkzeuge des Browsers, dass fastclick.js geladen wird, und laden Sie den Shop neu.

Lassen sich die Schaltflächen des Banners nach dem Deaktivieren des Skripts anklicken, ist die Ursache bestätigt.

Das ist der entscheidende Prüfschritt:

Mit aktivem fastclick.js → die Schaltflächen reagieren nicht
Mit deaktiviertem fastclick.js → die Schaltflächen reagieren korrekt

Schritt 4: Die Lösungsmethode wählen

Es gibt zwei gültige Vorgehensweisen.

Variante A: `fastclick.js` entfernen

Das ist der bevorzugte Weg, wenn das Skript vom Theme oder von anderen Funktionen des Shops nicht mehr benötigt wird.

Da FastClick ursprünglich die Tippverzögerung älterer mobiler Browser beheben sollte, bringt es in modernen mobilen Umgebungen oft keinen praktischen Nutzen mehr und kann stattdessen Ereigniskonflikte erzeugen.

Nutzen Sie diese Variante, wenn:

das Skript veraltet ist
das Theme nicht davon abhängt
Tests bestätigen, dass nach dem Entfernen keine Nebenwirkungen auftreten

Variante B: `fastclick.js` behalten und eine Kompatibilitätslösung ergänzen

Muss das Skript im Theme bleiben, fügen Sie folgendes Snippet hinzu, damit die Pandectes-Komponente die Klasse needsclick erhält:

<script>
customElements.whenDefined('pandectes-cmp').then(function() {
  document.querySelectorAll('pandectes-cmp').forEach(function(el) {
    el.classList.add('needsclick');
  });
});
</script>

Diese Anpassung weist FastClick an, die Pandectes-Komponente nicht zu beeinflussen, sodass die Banner-Aktionen Klickereignisse korrekt empfangen.

Schritt 5: Das Snippet im Theme platzieren

Fügen Sie das Snippet so in das Theme ein, dass es im Body des Shops geladen wird, üblicherweise vor dem schließenden </body>-Tag.

Nach dem Speichern der Änderung:

Öffnen Sie den Shop auf einem iPhone
Laden Sie die Seite, auf der der Banner erscheint
Testen Sie Accept, Deny und "X"
Prüfen Sie, ob die Bedienelemente nun reagieren

Schritt 6: In mobilen Browsern erneut testen

Prüfen Sie das Verhalten nach der Korrektur in:

Safari auf dem iPhone
Chrome auf dem iPhone

Da mobile Browser unter normalen Bedingungen häufig dieselbe Engine nutzen, hilft eine Bestätigung in beiden Browsern dabei, die Behebung des Interaktionsproblems abzusichern.

Technische Hinweise

Es handelt sich um ein Problem der Frontend-Interaktion, nicht der Einwilligungslogik.
Der Banner kann korrekt dargestellt werden, selbst wenn die Klickverarbeitung blockiert ist.
Verändern weitere Skripte die Touch- oder Klickverarbeitung, kann eine zusätzliche Prüfung nötig sein.
Verzichten Sie in modernen Shops möglichst auf ältere Bibliotheken zur Tipp-Optimierung, sofern keine konkrete und geprüfte Abhängigkeit besteht.

Zusammenfassung

Wenn der Pandectes-Cookie-Banner auf Mobilgeräten sichtbar ist, seine Schaltflächen sich aber nicht anklicken lassen, prüfen Sie zuerst JavaScript-Konflikte im Theme.

Im bestätigten Fall blockierte fastclick.js die Interaktion mit der Web Component pandectes-cmp. Das Problem wurde gelöst, indem die Komponente über ein kleines Kompatibilitäts-Snippet die Klasse needsclick erhielt, während das ursprüngliche Skript erhalten blieb.

Aktualisiert am: 22/09/2026

War dieser Beitrag hilfreich?

Danke!