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

# Knoppen van de mobiele banner reageren niet: probleemoplossing

### Overzicht

In sommige storefronts wordt de Pandectes-cookiebanner correct weergegeven op iPhone-apparaten, maar zijn de acties van de banner niet interactief. In dit scenario zien bezoekers de banner, maar er gebeurt niets wanneer ze op **Accept**, **Deny** of de sluitknop "X" tikken.

In het onderzochte geval werd het probleem niet veroorzaakt door de configuratie van de banner zelf. Het werd veroorzaakt door een JavaScript-conflict met `fastclick.js`, een verouderde bibliotheek die van oudsher werd gebruikt om de tikvertraging in mobiele browsers te verwijderen. Moderne mobiele browsers hebben dit gedrag over het algemeen niet meer nodig en het behouden van FastClick in het thema kan problemen met de afhandeling van events veroorzaken.

---

### Waarom dit gebeurt

De huidige Pandectes-banner wordt gerenderd als een webcomponent (`pandectes-cmp`). In de getroffen storefront onderschepte `fastclick.js` touch- en klikgedrag op een manier die voorkwam dat interacties de bedieningselementen van de banner bereikten.

Dit type probleem is vooral zichtbaar op iPhone-apparaten, omdat zowel Safari als Chrome op iOS in standaard iOS-omgevingen op dezelfde onderliggende browser-engine vertrouwen. Hetzelfde interactieprobleem kan dus in beide browsers optreden.
---

### Stap 1. Bevestig het symptoom op een iPhone

Controleer het probleem op een echte iPhone.

Verwacht gedrag in dit geval:

* De banner is zichtbaar
* De knoppen worden normaal weergegeven
* Tikken op **Accept**, **Deny** of Close "X"   doet niets

Deze stap is belangrijk omdat het probleem zich mogelijk niet voordoet op Android-apparaten.

---

### Stap 2. Controleer op JavaScript-conflicten op themaniveau

Controleer alle aangepaste of door het thema geleverde JavaScript die het volgende wijzigt:

* touch events
* click events
* verwerking van mobiele gebaren
* synthetisch tikgedrag

In het bevestigde geval was het conflicterende script:

`fastclick.js`

Als de storefront verouderde bibliotheken voor mobiele interactie gebruikt, moeten die als eerste worden beoordeeld.


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

---

### Stap 3. Schakel `fastclick.js` tijdelijk uit

Voorkom met de developer tools van de browser dat `fastclick.js` wordt geladen en laad vervolgens de storefront opnieuw.

Als de knoppen van de banner na het uitschakelen van het script klikbaar worden, is de oorzaak bevestigd.

Dit is de belangrijkste validatiestap:

* Met `fastclick.js` ingeschakeld → knoppen van de banner reageren niet
* Met `fastclick.js` uitgeschakeld → knoppen van de banner reageren correct

---

### Stap 4. Kies de oplossingsmethode

Er zijn twee geldige benaderingen.

#### Optie A. Verwijder `fastclick.js`

Dit is de voorkeursaanpak wanneer het script niet meer nodig is voor het thema of andere functionaliteit van de storefront.

Omdat FastClick is gemaakt om het tikvertragingsgedrag in oudere mobiele browsers aan te pakken, biedt het in moderne mobiele omgevingen vaak geen praktisch voordeel en kan het juist eventconflicten veroorzaken. ([GitHub][1])

Gebruik deze optie als:

* het script verouderd is
* het thema er niet van afhankelijk is
* testen bevestigt dat er na verwijdering geen regressies optreden

#### Optie B. Behoud `fastclick.js` en voeg een compatibiliteitsfix toe

Als het script in het thema moet blijven, voeg dan het volgende fragment toe zodat de Pandectes-component wordt gemarkeerd met de klasse `needsclick`:

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

Deze aanpassing geeft FastClick aan dat het de Pandectes-component niet mag verstoren, zodat de acties van de banner klikevents correct ontvangen.

---

### Stap 5. Plaats het fragment in het thema

Voeg het fragment zo aan het thema toe dat het in de body van de storefront wordt geladen, meestal vóór de afsluitende `</body>`-tag.

Nadat je de wijziging hebt opgeslagen:

1. open de storefront op een iPhone
2. laad de pagina waarop de banner verschijnt
3. test **Accept**, **Deny** en Close " X "
4. bevestig dat de bedieningselementen nu interactief zijn

---

### Stap 6. Test opnieuw in mobiele browsers

Controleer na het toepassen van de fix het gedrag in:

* Safari op iPhone
* Chrome op iPhone

Omdat mobiele browsers onder normale storefrontomstandigheden vaak hetzelfde enginegedrag delen, helpt het bevestigen van de fix in beide browsers om te valideren dat het interactieprobleem consistent is opgelost. 

---

### Technische opmerkingen

* Dit is een frontend-interactieprobleem, geen probleem met de toestemmingslogica.
* De banner kan correct worden weergegeven, ook wanneer de afhandeling van klikken wordt geblokkeerd.
* Als andere scripts ook de afhandeling van touch of klikken wijzigen, kan aanvullende controle nog steeds nodig zijn.
* Vermijd waar mogelijk verouderde bibliotheken voor tikoptimalisatie in moderne storefronts, tenzij er een specifieke en geverifieerde afhankelijkheid is.

---

### Samenvatting

Als de Pandectes-cookiebanner op mobiel zichtbaar is maar de knoppen niet klikbaar zijn, controleer dan eerst op JavaScript-conflicten op themaniveau.

In het bevestigde geval blokkeerde `fastclick.js` de interactie met de `pandectes-cmp`-webcomponent. Het probleem werd opgelost door via een klein compatibiliteitsfragment de klasse `needsclick` aan de component toe te voegen, terwijl het oorspronkelijke script op zijn plaats bleef.