Los botones del banner en móvil no responden: solución de problemas

Resumen

En algunas tiendas, el banner de cookies de Pandectes puede aparecer correctamente en dispositivos iPhone, pero las acciones del banner no son interactivas. En este escenario, los visitantes ven el banner, pero al tocar Accept, Deny o el botón de cierre "X" no se produce ninguna respuesta.

En el caso investigado, el problema no lo causaba la configuración del banner en sí. Lo causó un conflicto de JavaScript con fastclick.js, una biblioteca antigua utilizada históricamente para eliminar el retraso al tocar en los navegadores móviles. Los navegadores móviles modernos generalmente ya no necesitan este comportamiento, y mantener FastClick en el tema puede provocar problemas en la gestión de eventos.

Por qué ocurre

El banner actual de Pandectes se renderiza como un componente web (pandectes-cmp). En la tienda afectada, fastclick.js interceptaba el comportamiento táctil y de clic de tal manera que impedía que las interacciones llegaran a los controles del banner.

Este tipo de problema es especialmente visible en dispositivos iPhone porque tanto Safari como Chrome en iOS utilizan el mismo motor de navegador subyacente en los entornos iOS estándar, por lo que el mismo problema de interacción puede aparecer en ambos navegadores.

Paso 1. Confirma el síntoma en iPhone

Verifica el problema en un dispositivo iPhone real.

Comportamiento esperado en este caso:

• El banner es visible
• Los botones se muestran con normalidad
• Al tocar Accept, Deny o el cierre "X" no ocurre nada

Este paso es importante porque es posible que el problema no se reproduzca en dispositivos Android.

Paso 2. Inspecciona los conflictos de JavaScript a nivel de tema

Revisa cualquier JavaScript personalizado o proporcionado por el tema que modifique:

• eventos táctiles
• eventos de clic
• gestión de gestos móviles
• comportamiento de toque sintético

En el caso confirmado, el script en conflicto era:

fastclick.js

Si la tienda utiliza bibliotecas antiguas de interacción móvil, deben revisarse primero.

Paso 3. Desactiva temporalmente fastclick.js

Con las herramientas de desarrollo del navegador, impide que fastclick.js se cargue y luego recarga la tienda.

Si los botones del banner pasan a responder al desactivar el script, se confirma la causa raíz.

Este es el paso clave de validación:

• Con fastclick.js activado → los botones del banner no responden
• Con fastclick.js desactivado → los botones del banner responden correctamente

Paso 4. Elige el método de resolución

Hay dos enfoques válidos.

Opción A. Eliminar fastclick.js

Este es el enfoque preferido cuando el script ya no es necesario para el tema ni para otras funcionalidades de la tienda.

Como FastClick se creó para resolver el retraso al tocar en navegadores móviles antiguos, a menudo no aporta ningún beneficio práctico en los entornos móviles modernos y, en cambio, puede crear conflictos de eventos. ([GitHub][1])

Usa esta opción si:

• el script es antiguo (legacy)
• el tema no depende de él
• las pruebas confirman que no hay regresiones tras eliminarlo

Opción B. Mantener fastclick.js y añadir una corrección de compatibilidad

Si el script debe permanecer en el tema, añade el siguiente fragmento para que el componente de Pandectes se marque con la clase needsclick:

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

Este ajuste le indica a FastClick que no interfiera con el componente de Pandectes y permite que las acciones del banner reciban correctamente los eventos de clic.

Paso 5. Coloca el fragmento en el tema

Añade el fragmento al tema para que se cargue en el body de la tienda, normalmente antes de la etiqueta de cierre </body>.

Después de guardar el cambio:

1. abre la tienda en un iPhone
2. carga la página donde aparece el banner
3. prueba Accept, Deny y el cierre " X "
4. confirma que los controles ahora son interactivos

Paso 6. Vuelve a probar en distintos navegadores móviles

Después de aplicar la corrección, verifica el comportamiento en:

• Safari en iPhone
• Chrome en iPhone

Como los navegadores móviles suelen compartir el mismo comportamiento de motor en condiciones normales de tienda, confirmar la corrección en ambos navegadores ayuda a validar que el problema de interacción se ha resuelto de forma consistente.

Notas técnicas

• Se trata de un problema de interacción del frontend, no de la lógica de consentimiento.
• El banner puede renderizarse correctamente incluso cuando la gestión de clics está bloqueada.
• Si otros scripts también modifican la gestión táctil o de clics, puede seguir siendo necesaria una revisión adicional.
• Cuando sea posible, evita las bibliotecas antiguas de optimización de toques en tiendas modernas, a menos que exista una dependencia específica y verificada.

Resumen

Si el banner de cookies de Pandectes es visible en móvil pero sus botones no se pueden pulsar, comprueba primero si hay conflictos de JavaScript a nivel de tema.

En el caso confirmado, fastclick.js bloqueaba la interacción con el componente web pandectes-cmp. El problema se resolvió añadiendo la clase needsclick al componente mediante un pequeño fragmento de compatibilidad, manteniendo el script original en su lugar.

Actualizado el: 19/10/2026