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.

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:

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

Bijgewerkt op: 19/10/2026