Einkaufswelt mit eigenem Javascript verschönern. Elemente werden nicht angezeigt.

Shopware 5 Programmierung
1

Hallo Community! Ich bin gerade dabei die Startseite unseres neuen Shops mit Einkaufswelten zu erstellen und zu verschönern. Dabei möchte ich zum Beispiel ein Element die Blog Artikel mit einer Javascript Slideshow (Flexslider) etwas verbessern. Ich habe also das Blog-Artikel Element eingebunden.

Nun würde ich gerne die einzelnen Blog-Einträge mit dem Flexslider einblenden. Grundsätzlich sollte das ja kein Problem sein, denn ich kann ja das Template für die Blog-Einträge anpassen, so dass es mir die richtige Syntax für den Slider liefert. Dann die CSS und die Javascript Datei des Flexsliders in meine Theme.php einbinden und die Slideshow dann noch initiieren. Das klappt grundsätzlich nur eben nicht in der Einkaufswelt: meine Elemente werden einfach nicht eingeblendet und bleiben verschwunden.

Wenn ich meinen “Blog-Artikel-Slidesow-Code” testhalber quick and dirty an eine andere Stelle im Template reinkopiere (also ausserhalb der Einkaufswelt) klappt es mit der Anzeige. Es muss das also einen Konflikt zwischen Einkaufswelt und Slider geben. In meiner Console sehe ich allerdings nix - es ist wohl eher ein “logischer Konflikt” und kein JS-Error.

Meine vermutung ist also, dass dies an der dynamischen Einblendung der Elemente der Einkaufswelt liegt. Diese wird ja eben auch per Javascript reingeladen und man sieht zunächst nur dieses Ladesymbol. Kann ich dem System irgendwo mitteilen, dass die Einkaufswelt die Elemente von meinem Script mit einbezieht bzw. ignoriert?

Ich hoffe ich habe da mich einigermaßen verständlich ausgedrückt und jemand kann mir helfen! Das wäre super!

 

2

Richtige Vermutung. Liegt an der dynamischen Einbindung der Einkaufswelten.

Du musst den Slider initialisieren nachdem die Einkaufswelt geladen wurde, das automatische Initialisieren anhand der HTML-Struktur funktioniert nicht. Dafür gibt es verschiedene JavaScript-Events die geworfen werden, am sinnvollsten ist wohl dieses:

$.subscribe('plugin/swEmotionLoader/onLoadEmotionFinished', function() {
   //wenn die einkaufswelt komplett geladen ist
   //hier den slider initialisieren
});

Das fügst du in die JavaScript-Datei ein die du über die Theme.php einbindest, dann sollte der Slider funktionieren 

Doku zum Event Observer: jQuery plugins and the StateManager

Wenn du wissen willst was es so an Events gibt am besten die jeweiligen jQuery-Plugins im Responsive-Template nach $.publish durchsuchen

3 „Gefällt mir“
3

Hey t2oh4e! Danke für die ausführliche Erklärung und den Link zur Doku! Das war die Lösung! Ich bin begeistert - das hilft mir richtig! Vielen Dank!!!