WooCommerce Währungsumrechner hängt beim Laden nach JS-Optimierung

Wenn ein WooCommerce Währungsumrechner beim Laden hängen bleibt und drei animierte Punkte nie zu einem Dropdown werden, liegt es fast nie an einem langsamen Server. Der Umrechner wird per JavaScript im Browser des Besuchers aufgebaut, und ein Plugin zur Geschwindigkeitsoptimierung, das Skripte minimiert, zusammenführt, verzögert oder aufschiebt, hat verändert, wann oder in welcher Reihenfolge dieses JavaScript läuft. Dieselbe Ursache zeigt sich als Dropdown, das beim Klick nichts tut, als Preise, die hinter einem Spinner verborgen bleiben, bis der Besucher die Maus bewegt, oder als Umrechner, der bei Ihnen funktioniert und bei allen anderen nicht. Nachfolgend lesen Sie, wie FOX im Browser startet, wie Sie bestätigen, dass der Optimierer die Ursache ist, und was Sie ausschließen müssen.

Was der Umrechner zum Starten braucht

FOX gibt drei Dinge in die Seite aus, und alle müssen in dieser Reihenfolge laufen:

1. Ein kleines Inline-Skript mit den Daten des Besuchers: woocs_current_currency, woocs_default_currency, woocs_array_of_get, woocs_ajaxurl und einige weitere Variablen, die alle mit woocs_ beginnen. WordPress gibt es unmittelbar vor der Hauptdatei aus.
2. Die Hauptdatei /wp-content/plugins/woocommerce-currency-switcher/js/front.js, die jQuery benötigt. Sie definiert woocs_redirect(), die Funktion, die jedes Dropdown aufruft, wenn eine Währung gewählt wird. Die Dropdown-Designs (ddslick, Chosen, wSelect, Style #1–#3) laden ihre eigenen Skripte aus dem Plugin-Ordner.
3. Bei Umrechnern, die im Tab Designer erstellt wurden ([woocs sd=1] und ähnlich), ein Platzhalter mit den drei Punkten. Das Skript js/sd/front.js ersetzt die Punkte durch das echte Dropdown, wenn der Browser sein load-Ereignis auslöst, einmalig und für die Platzhalter, die in diesem Moment vorhanden sind.

Ist Ich verwende ein Cache-Plugin auf meiner Website (I am using cache plugin on my site) auf Ja (Yes) gesetzt, sendet front.js nach dem Laden der Seite außerdem eine AJAX-Anfrage (woocs_get_products_price_html) und zeichnet die Preise in der Währung des Besuchers neu. Bei aktiviertem Preise-Preloader (Prices preloader) bleiben die Preise verborgen, bis diese Antwort eintrifft.

Jede Optimierungsfunktion unterbricht ein anderes Glied dieser Kette:

Bestätigen, dass der Optimierer die Ursache ist

Öffnen Sie die Seite in einem privaten Fenster, abgemeldet. Die meisten Optimierer liefern ihre verarbeiteten Dateien nur an Besucher aus und überspringen angemeldete Administratoren – deshalb kann der Umrechner bei Ihnen einwandfrei funktionieren. Öffnen Sie dann die Browser-Konsole (F12, Tab Konsole (Console)), laden Sie neu und fügen Sie ein:

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

Eine funktionierende Seite gibt object function function aus. Jedes undefined bedeutet, dass dieser Teil von FOX noch nicht gelaufen ist. Rote Fehler, die woocs_-Variablen oder eine zusammengeführte Datei nennen (Namen wie min/, cache/, autoptimize_), deuten in dieselbe Richtung. Schalten Sie zur abschließenden Kontrolle nur die JavaScript-Funktionen des Optimierers aus (Minimieren, Zusammenführen, Aufschieben, Verzögern), leeren Sie seinen Cache und laden Sie im privaten Fenster neu. Funktioniert der Umrechner jetzt, aktivieren Sie die Funktionen mit den folgenden Ausschlüssen wieder, statt sie ausgeschaltet zu lassen.

FOX vom Aufschieben, Verzögern und Zusammenführen ausschließen

Jeder Optimierer hat für jede dieser Funktionen ein Ausschlussfeld, und fast alle akzeptieren einen Teil eines Dateipfads oder ein Stichwort, das in einem Inline-Skript vorkommt. Tragen Sie diese vier Zeilen bei jeder JavaScript-Funktion ein, die Sie verwenden:

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

• woocommerce-currency-switcher ist der Plugin-Ordner: Er deckt front.js, die Dropdown-Designs und die Designer-Skripte ab.
• woocs trifft den Inline-Block, denn jede Variable darin beginnt mit woocs_. Nur front.js auszuschließen hilft nicht, wenn der Inline-Block weiterhin verzögert wird.
• jQuery und jQuery Migrate, weil FOX auf jQuery läuft. Wird jQuery verzögert und FOX nicht, startet FOX zuerst und bleibt bei jQuery is not defined stehen.

Wo die Felder in den gängigen Plugins zu finden sind:

Leeren Sie nach dem Speichern den Cache des Optimierers und den Seiten-Cache: Vor der Änderung erzeugte Seiten verweisen noch auf die alten zusammengeführten Dateien. Wiederholen Sie dann die Konsolenprüfung in einem privaten Fenster. Hat das Theme oder ein Hosting-Panel einen eigenen Schalter „JavaScript optimieren“, braucht er dieselben Ausschlüsse.

Preise hinter einem Spinner, bis der Besucher interagiert

In einem gecachten Shop kommt die Seite mit den Preisen dessen an, der zuerst gecacht wurde, und FOX korrigiert sie im Browser mit dem oben beschriebenen AJAX-Neuzeichnen. Verzögert der Optimierer Skripte bis zur ersten Nutzerinteraktion, startet das Neuzeichnen erst dann, und bei aktivem Preise-Preloader (Prices preloader) bleiben die Preise verborgen, bis der Besucher scrollt oder klickt. Die obigen Ausschlüsse beheben das. Während Sie testen, können Sie den Preise-Preloader (Prices preloader) im Tab Optionen (Options) auch ausschalten: Die Preise sind dann sofort sichtbar, in der gecachten Währung, bis das Neuzeichnen läuft.

Prüfen Sie, ob das Neuzeichnen überhaupt nötig ist. Ich verwende ein Cache-Plugin auf meiner Website (I am using cache plugin on my site) sollte nur dann Ja (Yes) sein, wenn die Shop-Seiten tatsächlich aus einem Seiten-Cache kommen; ohne einen gibt FOX die richtigen Preise bereits auf dem Server aus. Warum das Neuzeichnen existiert, erklärt Warum sich ein Währungsumschalter und ein Seiten-Cache gegenseitig stören.

Verzögerte Skripte können auch die Währung des Warenkorbs verändern. Ist Währungsspeicher (Currency storage) auf Transient gesetzt und die Cache-Option aktiv, gibt front.js jedem Browser einen eigenen Schlüssel und fügt ihn Warenkorb-, Checkout- und Zahlungsanfragen hinzu, einschließlich der fetch()-Aufrufe des Checkout-Blocks, der Store API und der PayPal-Schaltflächen. Anfragen, die vor dem Lauf von front.js gesendet werden, gehen ohne den Schlüssel hinaus und werden stattdessen über die IP-Adresse aufgelöst, was ihnen eine andere Währung geben kann. Ein weiterer Grund, front.js nicht zu verzögern.

Kaputte Umrechner-Stile für abgemeldete Besucher

Sieht das Dropdown angemeldet richtig aus und für Besucher kaputt (falsche Größe, keine Flaggen, die Liste offen unter anderen Elementen), wurde das CSS zusammengeführt oder teilweise entfernt. Funktionen namens „ungenutztes CSS entfernen“ oder „Critical CSS“ analysieren das HTML, das der Server sendet, und das Dropdown-Markup steht darin noch nicht: Die Designs bauen es nach dem Laden mit JavaScript auf. Schließen Sie den Plugin-Ordner woocommerce-currency-switcher vom Zusammenführen des CSS und vom Entfernen ungenutzten CSS aus und leeren Sie dann die Caches. Ein kurzes Aufblitzen des Textes FOX v.2.5.5 an der Stelle des Umrechners ist dasselbe Problem in milderer Form: Das Stylesheet des Plugins, das diesen Text ausblendet, wird zu spät geladen.

Wenn Sie einen Umrechner ganz ohne Design bevorzugen, wählen Sie im Tab Währungen (Currencies) Nicht gestyltes Dropdown (Not styled drop-down). Es ist ein einfaches Select-Element, das die Stile des Themes übernimmt, braucht aber trotzdem front.js, um die Währung zu wechseln.

Die Lade-Punkte erst nach der Behebung der Ursache ausblenden

Die Punkte sind das Element .woocs-lds-ellipsis in einem Designer-Platzhalter. Sie lassen sich mit CSS unter Design → Customizer → Zusätzliches CSS (Appearance → Customize → Additional CSS) ausblenden:

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

Das entfernt die Animation, nicht das Problem. Läuft das Skript weiterhin nicht, sieht der Besucher nun eine leere Fläche statt der Punkte. Nutzen Sie es, um den kurzen Moment vor dem load-Ereignis auf einer langsamen Seite zu verbergen, nachdem bestätigt ist, dass der Umrechner von selbst erscheint.

Wenn es weiterhin nicht funktioniert

• Fehler anderer Skripte. In einer zusammengeführten Datei stoppt ein Fehler, den ein anderes Plugin auslöst, den Code danach, auch FOX. Beheben Sie zuerst die Fehler, die eine zusammengeführte Datei nennen; die Konsole zeigt Datei und Zeile.
• Umrechner in später geladenen Menüs. Designer-Umrechner werden einmal beim load-Ereignis aufgebaut. Ein mobiles Menü oder Popup, dessen Inhalt das Theme danach einfügt, behält seine Punkte. Verwenden Sie einen Umrechner, der von Anfang an in der Seite steht, oder einen [woocs]-Umrechner mit dem Design Nicht gestyltes Dropdown (Not styled drop-down): Er ist ein einfaches Select-Element und wechselt die Währung auch dann, wenn er später eingefügt wird.
• Der Browser-Cache. Testen Sie nach jeder Änderung in einem frischen privaten Fenster oder setzen Sie den Seiten-Cache im Browser zurück.

Zeigt die Konsolenprüfung trotz aller Ausschlüsse und geleerter Caches weiterhin undefined, eröffnen Sie ein Thema im FOX-Support-Forum mit dem Link zur Seite, dem Namen des Optimierungs-Plugins und den Konsolenfehlern, und wir sehen es uns an.