jquery in Einkaufswelten einbinden

Liebes Forum :slight_smile: :slight_smile: ich habe das folgende Skript per Theme in die Einkaufswelten eingebunden. Das habe ich im Theme gemacht: jQuery(document).ready(function($) { $('.thumbs img').hover(function() { var $src = $(this).attr('data-full-src'); var $srcset = $(this).attr('data-full-srcset'); var $alt = $(this).attr('alt'); var $href= $(this).attr('data-url'); $('#photo-full').attr('src', $src); $('#photo-full').attr('srcset', $srcset); $('#photo-full').attr('alt', $alt); $('#photo-link').attr('href', $href); }); }); Das Skript tauscht per Mausover bzw. per Klick ein Bild aus. Ich habe es auf einer ganz normalen html-Seite getestet und es funktioniert prinzipiell. Und es ist in shopware auch vorhanden (source in chrome). Aber in den Einkaufswelten läuft es einfach nicht. jquery ist doch standardmässig vorhanden? Was könnte ich falsch gemacht haben? Liebe Grüße Kerstin

Hallo! Die Einkaufswelten werden per Ajax geladen und sind damit nicht von Anfang an verfügbar. Deshalb greift Dein Hover-Binding ins leere. Verwende statt ('.thumbs img').hover(function() { beispielsweise (‚body‘).on(‚mouseenter‘,’.thumbs img’,function() { Viel Erfolg!

1 „Gefällt mir“

Ganz vielen Dank!!! Du bist wirklich ein Held. :slight_smile: :slight_smile: Einfach deine Codezeile eingesetzt und es geht :slight_smile: :slight_smile: :slight_smile: Vorher hab ich rumprobiert und rumprobiert… Du hast mir wirklich sehr geholfen. Das Problem ist gelöst - aber ich würds gerne noch etwas genauer verstehen (eine ungefähre Vorstellung habe ich). Was ist denn hier der Unterschied zwischen den beiden Varianten. Bzw. warum geht deine und meine nicht? Liebe Grüße Kerstin

Die erste Variante registriert einen Listener auf jedes Element das durch den Selektor $(’.thumbs img’) gefunden wird sobald die Seite fertig geladen ist. Zu dem Zeitpunkt gibt es aber die Einkaufswelten und damit auch deine Thumbs noch nicht, der Selektor findet also nichts und registriert auch keinen hover-Listener. Die zweite Variante registriert einen Listener auf das body Element. Der prüft dann bei jedem mouseenter Event das irgendwo innerhalb vom body getriggert wird ob das Element dem übergebenen Selektor entspricht.

Hey zusammen, wollte noch mal einen kleine Ergänzung zu @t2oh4e Erklärung hinzufügen. Es handelt sich hierbei um Delegates. [quote]Attach a handler to one or more events for all elements that match the selector, now or in the future, based on a specific set of root elements.[/quote] Hier noch ein Link, falls du ein wenig tiefer in die Materie einsteigen willst: http://learn.jquery.com/events/event-delegation/ Sowie ihr der passende Link in der jQuery API: http://api.jquery.com/on/ Hier ist vor allem der Punkt “Direct and delegated events” interessant. Viele Grüße, Stephan Pohl :shopware:

vielen Dank für die Infos. Jetzt ist es mir klarer. :slight_smile: