> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.pandectes.io/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

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


![](https://storage.crisp.chat/users/helpdesk/website/-/1/a/5/a/1a5af239e847cf00/screenshot-2026-03-17-at-55951_z5btrm.png)

---

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

```html
<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:

1. Öffnen Sie den Shop auf einem iPhone
2. Laden Sie die Seite, auf der der Banner erscheint
3. Testen Sie **Accept**, **Deny** und "X"
4. 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.