Sélecteur de devises WooCommerce bloqué en chargement après l'optimisation JS

Un sélecteur de devises WooCommerce bloqué en chargement, avec trois points animés qui ne se transforment jamais en liste déroulante, n'est presque jamais dû à un serveur lent. Le sélecteur est construit par du JavaScript dans le navigateur du visiteur, et un plugin d'optimisation de la vitesse qui minifie, combine, diffère ou retarde les scripts a modifié le moment ou l'ordre d'exécution de ce JavaScript. La même cause se manifeste par une liste déroulante qui ne réagit pas au clic, des prix cachés derrière un indicateur de chargement jusqu'à ce que le visiteur bouge la souris, ou un sélecteur qui fonctionne pour vous et plante pour tous les autres. Voici comment FOX démarre dans le navigateur, comment confirmer que l'optimiseur est en cause, et quoi exclure.

Ce dont le sélecteur a besoin pour démarrer

FOX imprime trois éléments dans la page, et tous doivent s'exécuter, dans cet ordre :

1. Un petit script en ligne contenant les données du visiteur : woocs_current_currency, woocs_default_currency, woocs_array_of_get, woocs_ajaxurl et quelques autres variables, toutes commençant par woocs_. WordPress l'imprime juste avant le fichier principal.
2. Le fichier principal, /wp-content/plugins/woocommerce-currency-switcher/js/front.js, qui a besoin de jQuery. Il définit woocs_redirect(), la fonction qu'appelle chaque liste déroulante lorsqu'une devise est choisie. Les habillages de liste déroulante (ddslick, Chosen, wSelect, Style #1–#3) ajoutent leurs propres scripts depuis le dossier du plugin.
3. Pour les sélecteurs créés dans l'onglet Concepteur (Designer) ([woocs sd=1] et similaires), un espace réservé avec les trois points. Le script js/sd/front.js remplace les points par la vraie liste déroulante lorsque le navigateur déclenche son événement load, une seule fois, pour les espaces réservés présents à ce moment-là.

Lorsque J'utilise un plugin de cache sur mon site (I am using cache plugin on my site) est réglé sur Oui (Yes), front.js envoie aussi une requête AJAX (woocs_get_products_price_html) une fois la page chargée et redessine les prix dans la devise du visiteur. Avec Préchargeur des prix (Prices preloader) activé, les prix restent masqués jusqu'à l'arrivée de cette réponse.

Chaque fonction d'optimisation casse un maillon différent de cette chaîne :

Confirmer que l'optimiseur est en cause

Ouvrez la page dans une fenêtre privée, sans être connecté. La plupart des optimiseurs ne servent leurs fichiers traités qu'aux visiteurs et ignorent les administrateurs connectés, ce qui explique que le sélecteur puisse fonctionner parfaitement pour vous. Ouvrez ensuite la console du navigateur (F12, onglet Console), rechargez la page et collez :

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

Une page qui fonctionne affiche object function function. Tout undefined signifie que cette partie de FOX ne s'est pas encore exécutée. Des erreurs en rouge qui nomment des variables woocs_ ou un fichier combiné (noms comme min/, cache/, autoptimize_) vont dans le même sens. Pour une vérification finale, désactivez uniquement les fonctions JavaScript de l'optimiseur (minifier, combiner, différer, retarder), videz son cache et rechargez dans la fenêtre privée. Si le sélecteur fonctionne alors, réactivez les fonctions avec les exclusions ci-dessous plutôt que de les laisser désactivées.

Exclure FOX du report, du retardement et de la combinaison

Chaque optimiseur dispose d'un champ d'exclusion pour chacune de ces fonctions, et presque tous acceptent une partie de chemin de fichier ou un mot-clé présent dans un script en ligne. Ajoutez ces quatre lignes à chaque fonction JavaScript que vous utilisez :

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

• woocommerce-currency-switcher est le dossier du plugin : il couvre front.js, les habillages de liste déroulante et les scripts du Concepteur.
• woocs correspond au bloc en ligne, car chaque variable qu'il contient commence par woocs_. N'exclure que front.js n'aide pas si le bloc en ligne est toujours retardé.
• jQuery et jQuery Migrate, car FOX fonctionne avec jQuery. Si jQuery est retardé et FOX non, FOX démarre en premier et s'arrête sur jQuery is not defined.

Où se trouvent les champs dans les plugins courants :

Après l'enregistrement, videz le cache de l'optimiseur et le cache de page : les pages construites avant la modification référencent encore les anciens fichiers combinés. Répétez ensuite la vérification dans la console, dans une fenêtre privée. Si le thème ou un panneau d'hébergement possède son propre interrupteur « optimiser le JavaScript », il demande les mêmes exclusions.

Prix cachés derrière un indicateur de chargement jusqu'à l'interaction du visiteur

Sur une boutique mise en cache, la page arrive avec les prix de la première personne mise en cache, et FOX les corrige dans le navigateur grâce au redessin AJAX décrit plus haut. Si l'optimiseur retarde les scripts jusqu'à la première interaction de l'utilisateur, le redessin ne démarre qu'à ce moment-là, et avec Préchargeur des prix (Prices preloader) activé, les prix restent masqués jusqu'à ce que le visiteur fasse défiler la page ou clique. Les exclusions ci-dessus règlent le problème. Pendant vos tests, vous pouvez aussi désactiver Préchargeur des prix (Prices preloader) dans l'onglet Options : les prix sont alors visibles immédiatement, dans la devise en cache, jusqu'à l'exécution du redessin.

Vérifiez que le redessin est bien nécessaire. J'utilise un plugin de cache sur mon site (I am using cache plugin on my site) ne doit être sur Oui (Yes) que si les pages de la boutique proviennent réellement d'un cache de page ; sans cache, FOX imprime déjà les bons prix côté serveur. Pourquoi le redessin existe est expliqué dans pourquoi un sélecteur de devises et un cache de page se battent.

Des scripts retardés peuvent aussi modifier la devise du panier. Avec Stockage de la devise (Currency storage) réglé sur Transient et l'option de cache activée, front.js donne à chaque navigateur sa propre clé et l'ajoute aux requêtes du panier, de la page de paiement et du paiement, y compris les appels fetch() du bloc Paiement, de l'API Store et des boutons PayPal. Les requêtes envoyées avant l'exécution de front.js partent sans la clé et sont résolues par adresse IP, ce qui peut leur donner une autre devise. Une raison de plus de ne pas retarder front.js.

Styles du sélecteur cassés pour les visiteurs non connectés

Si la liste déroulante est correcte lorsque vous êtes connecté et cassée pour les visiteurs (mauvaise taille, pas de drapeaux, liste ouverte sous d'autres éléments), le CSS a été combiné ou partiellement supprimé. Les fonctions appelées « supprimer le CSS inutilisé » ou « CSS critique » analysent le HTML envoyé par le serveur, et le balisage de la liste déroulante n'y figure pas encore : les habillages le construisent avec JavaScript après le chargement. Excluez le dossier du plugin woocommerce-currency-switcher de la combinaison du CSS et de la suppression du CSS inutilisé, puis videz les caches. Un bref éclair du texte FOX v.2.5.5 à l'endroit du sélecteur est le même problème sous une forme plus bénigne : la feuille de style du plugin, qui masque ce texte, se charge tardivement.

Si vous préférez un sélecteur sans aucun habillage, choisissez Liste déroulante sans style (Not styled drop-down) dans l'onglet Devises (Currencies). C'est un simple select qui reprend les styles du thème, mais il a quand même besoin de front.js pour changer la devise.

Ne masquez les points de chargement qu'après avoir corrigé la cause

Les points sont l'élément .woocs-lds-ellipsis à l'intérieur d'un espace réservé du Concepteur. On peut les masquer avec du CSS dans Apparence → Personnaliser → CSS additionnel (Appearance → Customize → Additional CSS) :

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

Cela supprime l'animation, pas le problème. Si le script ne s'exécute toujours pas, le visiteur voit désormais un espace vide au lieu des points. Utilisez-le pour masquer le court instant précédant l'événement load sur une page lente, une fois que vous avez confirmé que le sélecteur apparaît de lui-même.

Si cela ne fonctionne toujours pas

• Erreurs d'autres scripts. Dans un fichier combiné, une erreur levée par un autre plugin arrête le code qui suit, y compris FOX. Corrigez d'abord les erreurs qui nomment un fichier combiné ; la console indique le fichier et la ligne.
• Sélecteurs dans des menus chargés plus tard. Les sélecteurs du Concepteur sont construits une seule fois, au load. Un menu mobile ou une fenêtre contextuelle dont le thème insère le contenu après ce moment garde ses points. Utilisez un sélecteur présent dans la page dès le départ, ou un sélecteur [woocs] avec l'habillage Liste déroulante sans style (Not styled drop-down) : c'est un simple select qui change la devise même lorsqu'il est inséré plus tard.
• Le cache du navigateur. Testez dans une nouvelle fenêtre privée, ou réinitialisez le cache de page dans le navigateur, après chaque modification.

Si la vérification dans la console affiche encore undefined avec toutes les exclusions en place et les caches vidés, ouvrez un sujet sur le forum de support de FOX en indiquant le lien de la page, le nom du plugin d'optimisation et les erreurs de la console, et nous y jetterons un œil.