Les boutons de la bannière mobile ne répondent pas : dépannage

Vue d'ensemble

Sur certaines boutiques, la bannière de cookies Pandectes peut s'afficher correctement sur les iPhone, mais les actions de la bannière ne sont pas interactives. Dans ce cas, les visiteurs voient la bannière, mais appuyer sur Accept, Deny ou sur le bouton de fermeture « X » ne déclenche aucune réponse.

Dans le cas étudié, le problème n'était pas causé par la configuration de la bannière elle-même. Il provenait d'un conflit JavaScript avec fastclick.js, une ancienne bibliothèque historiquement utilisée pour supprimer le délai de toucher sur les navigateurs mobiles. Les navigateurs mobiles modernes n'ont généralement plus besoin de ce comportement, et conserver FastClick dans le thème peut provoquer des problèmes de gestion des événements.

Pourquoi cela se produit

La bannière Pandectes actuelle est rendue sous forme de composant web (pandectes-cmp). Sur la boutique concernée, fastclick.js interceptait le comportement des touchers et des clics de manière à empêcher les interactions d'atteindre les contrôles de la bannière.

Ce type de problème est particulièrement visible sur les iPhone, car Safari et Chrome sur iOS s'appuient sur le même moteur de navigateur sous-jacent dans les environnements iOS standard. Le même problème d'interaction peut donc apparaître dans les deux navigateurs.

Étape 1. Confirmer le symptôme sur iPhone

Vérifiez le problème sur un véritable iPhone.

Comportement attendu dans ce cas :

• La bannière est visible
• Les boutons s'affichent normalement
• Appuyer sur Accept, Deny ou sur le « X » de fermeture ne fait rien

Cette étape est importante, car le problème peut ne pas se reproduire sur les appareils Android.

Étape 2. Rechercher des conflits JavaScript au niveau du thème

Examinez tout JavaScript personnalisé ou fourni par le thème qui modifie :

• les événements tactiles
• les événements de clic
• la gestion des gestes mobiles
• le comportement de toucher synthétique

Dans le cas confirmé, le script en conflit était :

fastclick.js

Si la boutique utilise d'anciennes bibliothèques d'interaction mobile, elles doivent être examinées en premier.

Étape 3. Désactiver temporairement fastclick.js

À l'aide des outils de développement du navigateur, empêchez le chargement de fastclick.js, puis rechargez la boutique.

Si les boutons de la bannière deviennent cliquables après la désactivation du script, la cause principale est confirmée.

C'est l'étape de validation clé :

• Avec fastclick.js activé : les boutons de la bannière ne répondent pas
• Avec fastclick.js désactivé : les boutons de la bannière répondent correctement

Étape 4. Choisir la méthode de résolution

Il existe deux approches valables.

Option A. Supprimer fastclick.js

C'est l'approche à privilégier lorsque le script n'est plus nécessaire au thème ni aux autres fonctionnalités de la boutique.

FastClick ayant été créé pour corriger le délai de toucher sur les anciens navigateurs mobiles, il n'apporte souvent aucun avantage pratique sur les environnements mobiles modernes et peut au contraire créer des conflits d'événements. ([GitHub][1])

Utilisez cette option si :

• le script est ancien
• le thème n'en dépend pas
• les tests confirment l'absence de régressions après la suppression

Option B. Conserver fastclick.js et ajouter un correctif de compatibilité

Si le script doit rester dans le thème, ajoutez le snippet suivant pour que le composant Pandectes soit marqué avec la classe needsclick :

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

Cet ajustement indique à FastClick de ne pas interférer avec le composant Pandectes et permet aux actions de la bannière de recevoir correctement les clics.

Étape 5. Placer le snippet dans le thème

Ajoutez le snippet au thème pour qu'il se charge dans le corps de la boutique, généralement avant la balise fermante </body>.

Après avoir enregistré la modification :

1. ouvrez la boutique sur un iPhone
2. chargez la page où la bannière apparaît
3. testez Accept, Deny et le « X » de fermeture
4. vérifiez que les contrôles sont désormais interactifs

Étape 6. Retester sur les navigateurs mobiles

Après avoir appliqué le correctif, vérifiez le comportement dans :

• Safari sur iPhone
• Chrome sur iPhone

Comme les navigateurs mobiles partagent généralement le même comportement de moteur dans des conditions normales de boutique, confirmer le correctif dans les deux navigateurs permet de valider que le problème d'interaction est résolu de manière cohérente.

Notes techniques

• Il s'agit d'un problème d'interaction côté interface, et non d'un problème de logique de consentement.
• La bannière peut s'afficher correctement même lorsque la gestion des clics est bloquée.
• Si d'autres scripts modifient aussi la gestion des touchers ou des clics, un examen supplémentaire peut rester nécessaire.
• Dans la mesure du possible, évitez les anciennes bibliothèques d'optimisation du toucher sur les boutiques modernes, sauf en cas de dépendance spécifique et vérifiée.

Résumé

Si la bannière de cookies Pandectes est visible sur mobile mais que ses boutons ne sont pas cliquables, vérifiez d'abord les conflits JavaScript au niveau du thème.

Dans le cas confirmé, fastclick.js bloquait l'interaction avec le composant web pandectes-cmp. Le problème a été résolu en ajoutant la classe needsclick au composant via un petit snippet de compatibilité, tout en conservant le script d'origine.

Mis à jour le : 02/10/2026