Selector de monedas de WooCommerce atascado en la carga tras optimizar JS

Un selector de monedas de WooCommerce atascado en la carga, con tres puntos animados que nunca se convierten en un menú desplegable, casi nunca se debe a un servidor lento. El selector lo construye JavaScript en el navegador del visitante, y un plugin de optimización de velocidad que minifica, combina, difiere o retrasa scripts ha cambiado cuándo o en qué orden se ejecuta ese JavaScript. La misma causa aparece como un menú desplegable que no hace nada al hacer clic, precios ocultos tras un spinner hasta que el visitante mueve el ratón, o un selector que funciona para ti y falla para todos los demás. A continuación verás cómo arranca FOX en el navegador, cómo confirmar que el optimizador es la causa y qué excluir.

Lo que necesita el selector para arrancar

FOX imprime tres cosas en la página, y las tres tienen que ejecutarse, en este orden:

1. Un pequeño script en línea con los datos del visitante: woocs_current_currency, woocs_default_currency, woocs_array_of_get, woocs_ajaxurl y algunas variables más, todas ellas con el prefijo woocs_. WordPress lo imprime justo antes del archivo principal.
2. El archivo principal, /wp-content/plugins/woocommerce-currency-switcher/js/front.js, que necesita jQuery. Define woocs_redirect(), la función a la que llama cada menú desplegable cuando se elige una moneda. Los diseños de menú desplegable (ddslick, Chosen, wSelect, Style #1–#3) añaden sus propios scripts desde la carpeta del plugin.
3. Para los selectores creados en la pestaña Diseñador (Designer) ([woocs sd=1] y similares), un marcador con los tres puntos. El script js/sd/front.js sustituye los puntos por el menú desplegable real cuando el navegador dispara su evento load, una sola vez, para los marcadores presentes en ese momento.

Cuando Estoy usando un complemento de caché en mi sitio (I am using cache plugin on my site) está en Sí (Yes), front.js también envía una solicitud AJAX (woocs_get_products_price_html) una vez cargada la página y redibuja los precios en la moneda del visitante. Con Precargador de precios (Prices preloader) activado, los precios permanecen ocultos hasta que llega esa respuesta.

Cada función de optimización rompe un eslabón distinto de esa cadena:

Confirma que el optimizador es la causa

Abre la página en una ventana privada, sin haber iniciado sesión. La mayoría de los optimizadores sirven sus archivos procesados solo a los visitantes y se saltan a los administradores con sesión iniciada, por eso el selector puede funcionarte perfectamente a ti. Después abre la consola del navegador (F12, pestaña Consola (Console)), recarga y pega:

console.log(typeof woocs_current_currency, typeof woocs_redirect, typeof jQuery);

Una página que funciona imprime object function function. Cualquier undefined significa que esa parte de FOX aún no se ha ejecutado. Los errores en rojo que nombran variables woocs_ o un archivo combinado (nombres como min/, cache/, autoptimize_) apuntan en la misma dirección. Como comprobación final, desactiva solo las funciones de JavaScript del optimizador (minificar, combinar, diferir, retrasar), vacía su caché y recarga en la ventana privada. Si el selector funciona ahora, vuelve a activar las funciones con las exclusiones de abajo en lugar de dejarlas desactivadas.

Excluye FOX de diferir, retrasar y combinar

Cada optimizador tiene un campo de exclusión para cada una de estas funciones, y casi todos aceptan una parte de la ruta de un archivo o una palabra clave que aparezca en un script en línea. Añade estas cuatro líneas a cada función de JavaScript que uses:

woocommerce-currency-switcher
woocs
jquery.min.js
jquery-migrate

• woocommerce-currency-switcher es la carpeta del plugin: cubre front.js, los diseños de menú desplegable y los scripts del Diseñador.
• woocs coincide con el bloque en línea, porque todas las variables que contiene empiezan por woocs_. Excluir solo front.js no ayuda si el bloque en línea sigue retrasado.
• jQuery y jQuery Migrate, porque FOX funciona sobre jQuery. Si jQuery se retrasa y FOX no, FOX arranca primero y se detiene en jQuery is not defined.

Dónde están los campos en los plugins más habituales:

Tras guardar, vacía la caché del optimizador y la caché de páginas: las páginas generadas antes del cambio siguen haciendo referencia a los archivos combinados antiguos. Después repite la comprobación de la consola en una ventana privada. Si el tema o un panel de alojamiento tiene su propio interruptor de "optimizar JavaScript", necesita las mismas exclusiones.

Precios ocultos tras un spinner hasta que el visitante interactúa

En una tienda con caché, la página llega con los precios de quien se almacenó primero en caché, y FOX los corrige en el navegador con el redibujado AJAX descrito arriba. Si el optimizador retrasa los scripts hasta la primera interacción del usuario, el redibujado empieza solo entonces, y con Precargador de precios (Prices preloader) activado los precios siguen ocultos hasta que el visitante se desplaza o hace clic. Las exclusiones anteriores lo solucionan. Mientras pruebas, también puedes desactivar Precargador de precios (Prices preloader) en la pestaña Opciones (Options): los precios se ven entonces de inmediato, en la moneda almacenada en caché hasta que se ejecuta el redibujado.

Comprueba si el redibujado es siquiera necesario. Estoy usando un complemento de caché en mi sitio (I am using cache plugin on my site) solo debe estar en Sí (Yes) si las páginas de la tienda proceden realmente de una caché de páginas; sin ella, FOX ya imprime los precios correctos en el servidor. Por qué existe el redibujado se explica en por qué un selector de monedas y una caché de páginas chocan.

Los scripts retrasados también pueden cambiar la moneda del carrito. Con Almacenamiento de moneda (Currency storage) establecido en Transitorio (Transient) y la opción de caché activada, front.js da a cada navegador su propia clave y la añade a las solicitudes de carrito, finalizar compra y pago, incluidas las llamadas fetch() del bloque de Finalizar compra, la Store API y los botones de PayPal. Las solicitudes enviadas antes de que se ejecute front.js salen sin la clave y se resuelven por dirección IP, lo que puede darles una moneda distinta. Una razón más para no retrasar front.js.

Estilos del selector rotos para los visitantes sin sesión iniciada

Si el menú desplegable se ve bien cuando has iniciado sesión y roto para los visitantes (tamaño incorrecto, sin banderas, la lista abierta debajo de otros elementos), el CSS se combinó o se eliminó en parte. Las funciones llamadas "eliminar CSS no utilizado" o "CSS crítico" analizan el HTML que envía el servidor, y el marcado del menú desplegable todavía no está en él: los diseños lo construyen con JavaScript tras la carga. Excluye la carpeta del plugin woocommerce-currency-switcher de la combinación de CSS y de la eliminación de CSS no utilizado, y después vacía las cachés. Un breve destello del texto FOX v.2.5.5 donde está el selector es el mismo problema en una forma más leve: la hoja de estilos del plugin, que oculta ese texto, se carga tarde.

Si prefieres un selector sin ningún diseño, elige Menú desplegable sin estilo (Not styled drop-down) en la pestaña Divisas (Currencies). Es un select simple que toma los estilos del tema, pero sigue necesitando front.js para cambiar la moneda.

Oculta los puntos de carga solo después de corregir la causa

Los puntos son el elemento .woocs-lds-ellipsis dentro de un marcador del Diseñador. Se pueden ocultar con CSS en Apariencia → Personalizar → CSS adicional (Appearance → Customize → Additional CSS):

/* FOX: hide the loading animation of Designer switchers */
.woocs-lds-ellipsis {
    display: none !important;
}

Esto elimina la animación, no el problema. Si el script sigue sin ejecutarse, el visitante verá ahora un espacio vacío en lugar de puntos. Úsalo para ocultar el breve momento previo al evento load en una página lenta, una vez comprobado que el selector aparece por sí solo.

Si sigue sin funcionar

• Errores de otros scripts. En un archivo combinado, un error lanzado por otro plugin detiene el código que le sigue, incluido FOX. Corrige primero los errores que nombran un archivo combinado; la consola muestra el archivo y la línea.
• Selectores en menús que se cargan más tarde. Los selectores del Diseñador se construyen una sola vez, en load. Un menú móvil o una ventana emergente cuyo contenido inserta el tema después de ese momento conserva sus puntos. Usa un selector que esté en la página desde el principio, o un selector [woocs] con el diseño Menú desplegable sin estilo (Not styled drop-down): es un select simple y cambia la moneda incluso cuando se inserta más tarde.
• La caché del navegador. Prueba en una ventana privada nueva, o restablece la caché de páginas en el navegador, después de cada cambio.

Si la comprobación de la consola sigue mostrando undefined con todas las exclusiones aplicadas y las cachés vaciadas, abre un tema en el foro de soporte de FOX con el enlace de la página, el nombre del plugin de optimización y los errores de la consola, y lo revisaremos.