jQuery einbinden

Shopware 5 Programmierung
12

@christiantrade ich gebe dir teileweise recht. Ich habe mich gestern hier ausgekotzt und möchte nun auch produktiv etwas beitragen. Im übrigen bin ich jedem dankbar der hier Beiträge schreibt. Davon habe ich selbst schon hundert mal profitiert. Meine Wut richtete sich keines wegs an die freiwilligen Helfer hier, sondern an die Art und Weise, wie der Zugriff auf JQuery immer weiter eingeschränkt wird. Und doch, ich stehe immer noch zu meiner Aussage - das Konzept (asyncReady) funktioneriert nicht in FF. Bzw. es ist sogar schlimmer - es funktionert in etwa 40% der Ausführungen, sodass man das Problem, unter Umständen nicht einmal erkennt. Zum Problem:

Jquery wird asynchron geladen:

irgendwann später versucht man darauf zu reagieren wenn der Script geladen wurde:

document.getElementById('main-script').addEventListener('load', function() {...

So. Was kann jetzt schief gehen? Zumindest im FF kommt es in mehr als der Hälfte der Fälle vor, dass bevor der “load”-Listener erstellt wird, der asynchrone Script bereits geladen ist. Und dann macht der Listener entsprechend nichts!

Es war verdammt schwehr es herauszufinden (daher die Emotionen oben ). Wir haben uns nämlich, wie du, “Hello World”-Beispiele gebaut und die haben alle samt funktioniert! Jedes mal! In einem richtigen Shop hat man aber viele Plugins die an diesen Stellen eingreifen, so dass der “Abstand” zwischen der beiden Codezeilen oben groß wird. Für FF ist der “Abstand” scheinbar groß genug den Script “zu schnell” zu laden, noch bevor der Listener überhaupt aktiv ist. Wir haben viel ausprobiert und sind auf eine Lösung gekommen, mit de wir leben können. Unsere Lösung ist mit “setTimeout” auf Jquery zu warten:

      var tmrJQIterations = 0;
      function waitForJQ() {
      	tmrJQIterations++;
      	if (window["$"]) {
      		console.log("jQuery available :-)");
      		console.log("main-script: " + $("#main-script").attr("src"));
      	} else {
      		console.log("waiting for jQuery :-|");
            if (tmrJQIterations < 100) {
                setTimeout(waitForJQ, 100);
            } else {
            	console.log("no jQuery found :-(")
            }
      	}
      }
      setTimeout(waitForJQ, 1);

Ich hoffe das hilft auch Anderen.