I pulsanti del banner su mobile non rispondono: risoluzione dei problemi

Panoramica

In alcuni storefront, il banner dei cookie di Pandectes può apparire correttamente sui dispositivi iPhone, ma le azioni del banner non sono interattive. In questo scenario, i visitatori vedono il banner, ma toccando Accept, Deny o il pulsante di chiusura "X" non succede nulla.

Nel caso analizzato, il problema non era causato dalla configurazione del banner. Era causato da un conflitto JavaScript con fastclick.js, una libreria legacy usata in passato per eliminare il ritardo del tocco sui browser mobile. I browser mobile moderni in genere non richiedono più questo comportamento, e mantenere FastClick nel tema può introdurre problemi nella gestione degli eventi.

Perché succede

Il banner attuale di Pandectes viene visualizzato come web component (pandectes-cmp). Nello storefront interessato, fastclick.js intercettava il comportamento di tocco e clic in un modo che impediva alle interazioni di raggiungere i controlli del banner.

Questo tipo di problema è particolarmente evidente sui dispositivi iPhone perché sia Safari sia Chrome su iOS si basano sullo stesso motore del browser negli ambienti iOS standard, quindi lo stesso problema di interazione può comparire su entrambi i browser.

Passaggio 1. Conferma il sintomo su iPhone

Verifica il problema su un iPhone reale.

Comportamento atteso in questo caso:

• Il banner è visibile
• I pulsanti vengono visualizzati normalmente
• Toccando Accept, Deny o la chiusura "X" non succede nulla

Questo passaggio è importante perché il problema potrebbe non riprodursi sui dispositivi Android.

Passaggio 2. Controlla eventuali conflitti JavaScript a livello di tema

Esamina qualsiasi JavaScript personalizzato o fornito dal tema che modifichi:

• eventi touch
• eventi click
• gestione dei gesti mobile
• comportamento di tocco sintetico

Nel caso confermato, lo script in conflitto era:

fastclick.js

Se lo storefront usa librerie legacy per l'interazione mobile, vanno controllate per prime.

Passaggio 3. Disattiva temporaneamente fastclick.js

Utilizzando gli strumenti per sviluppatori del browser, impedisci il caricamento di fastclick.js e poi ricarica lo storefront.

Se i pulsanti del banner diventano cliccabili dopo aver disattivato lo script, la causa principale è confermata.

Questo è il passaggio chiave di convalida:

• Con fastclick.js attivo → i pulsanti del banner non rispondono
• Con fastclick.js disattivato → i pulsanti del banner rispondono correttamente

Passaggio 4. Scegli il metodo di risoluzione

Ci sono due approcci validi.

Opzione A. Rimuovi fastclick.js

È l'approccio preferito quando lo script non è più necessario al tema o ad altre funzionalità dello storefront.

Poiché FastClick è stato creato per risolvere il ritardo del tocco sui browser mobile più vecchi, spesso non offre alcun beneficio pratico negli ambienti mobile moderni e può invece creare conflitti di eventi. ([GitHub][1])

Usa questa opzione se:

• lo script è legacy
• il tema non ne dipende
• i test confermano l'assenza di regressioni dopo la rimozione

Opzione B. Mantieni fastclick.js e aggiungi una correzione di compatibilità

Se lo script deve rimanere nel tema, aggiungi il seguente snippet in modo che il componente Pandectes venga contrassegnato con la classe needsclick:

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

Questa modifica indica a FastClick di non interferire con il componente Pandectes e permette alle azioni del banner di ricevere correttamente gli eventi di clic.

Passaggio 5. Inserisci lo snippet nel tema

Aggiungi lo snippet al tema in modo che si carichi nel body dello storefront, in genere prima del tag di chiusura </body>.

Dopo aver salvato la modifica:

1. apri lo storefront su un iPhone
2. carica la pagina in cui compare il banner
3. testa Accept, Deny e la chiusura " X "
4. conferma che i controlli ora sono interattivi

Passaggio 6. Ripeti il test sui browser mobile

Dopo aver applicato la correzione, verifica il comportamento su:

• Safari su iPhone
• Chrome su iPhone

Poiché i browser mobile in genere condividono lo stesso comportamento del motore nelle normali condizioni dello storefront, confermare la correzione su entrambi i browser aiuta a convalidare che il problema di interazione sia risolto in modo coerente.

Note tecniche

• Si tratta di un problema di interazione frontend, non di logica del consenso.
• Il banner può essere visualizzato correttamente anche quando la gestione dei clic è bloccata.
• Se anche altri script modificano la gestione di tocco o clic, potrebbe essere comunque necessaria un'ulteriore verifica.
• Quando possibile, evita le librerie legacy di ottimizzazione del tocco sugli storefront moderni, a meno che non ci sia una dipendenza specifica e verificata.

Riepilogo

Se il banner dei cookie di Pandectes è visibile su mobile ma i suoi pulsanti non sono cliccabili, controlla prima di tutto i conflitti JavaScript a livello di tema.

Nel caso confermato, fastclick.js bloccava l'interazione con il web component pandectes-cmp. Il problema è stato risolto aggiungendo la classe needsclick al componente tramite un piccolo snippet di compatibilità, mantenendo lo script originale al suo posto.

Aggiornato il: 20/10/2026