eigenes JS einbinden - Code Element funktioniert - über theme.php nicht mehr???

Shopware 5 Programmierung
1

Hallo, ich möchte ein recht einfaches JS einbinden, um in den Einkaufswelten etwas zu animieren. Setze ich den Code in ein Einkaufswelten „Code Element“, funktioniert alles wie gewünscht. Problem daran ist aber, dass dann auch eine leere Zeile in den Einkaufswelten bestehen bleibt. Daher wollte ich den Code entsprechend der Anleitung in der theme.php integrieren und habe dies auch mit der Funktion asynchron gemacht. Schaue ich mir die js-Datei an, finde ich auch meinen Code ganz am Ende der Datei. ABER es passiert überhaupt nichts mehr auf der Seite.

Jemand ne spontane Idee woran das liegen kann? das hier die js-Datei (show_on_scroll.js).

document.asyncReady(function() {
// Detect request animation frame
var scroll = window.requestAnimationFrame ||
             // IE Fallback
             function(callback){ window.setTimeout(callback, 1000/60)};
var elementsToShow = document.querySelectorAll('.show-on-scroll'); 

function loop() {

    Array.prototype.forEach.call(elementsToShow, function(element){
      if (isElementInViewport(element)) {
        element.classList.add('is-visible');
      } else {
        element.classList.remove('is-visible');
      }
    });

    scroll(loop);
}

// Call the loop for the first time
loop();

// Helper function from: http://stackoverflow.com/a/7557433/274826
function isElementInViewport(el) {
  // special bonus for those using jQuery
  if (typeof jQuery === "function" && el instanceof jQuery) {
    el = el[0];
  }
  var rect = el.getBoundingClientRect();
  return (
    (rect.top <= 0
      && rect.bottom >= 0)
    ||
    (rect.bottom >= (window.innerHeight || document.documentElement.clientHeight) &&
      rect.top <= (window.innerHeight || document.documentElement.clientHeight))
    ||
    (rect.top >= 0 &&
      rect.bottom <= (window.innerHeight || document.documentElement.clientHeight))
  );
}

});

 

hier noch die theme.php:

protected $javascript = [
    'src/js/show_on_scroll.js'
];

Im Prinzip werden „nur“ CSS Klassen verändert, wenn man scrollt, weshalb die Seite etwas Dynamik bekommt. Stehe mittlerweile echt auf dem Schlauch, warum das im Code-Element funktioniert und asynchron eingebunden nicht mehr.

DANKE schonmal vorab.