Javascript Plugin Statemanager Hooks funktionieren nicht

Shopware 5 Programmierung
1

Moin Leute,

ich versuche verzweifelt folgendes Problem zu lösen. Ich habe in einer Einkaufswelt Topseller-Artikel angezeigt und zeige dort ebenfalls die Buttons “Vergleichen”, “Auf die Merkliste” und “In den Warenkorb” an. Da der Einkaufswelt jedoch erst per Ajax nachgeladen wird, liegen auf diesen Buttons keine Events. Ein Klick auf die Buttons führt also dazu, dass ich auf eine weiße Seite weitergeleitet werden, auf der der Inhalt steht, der eigentlich per Ajax geladen und angezeigt werden soll. Also habe ich mir gedacht, ich müsste mich ja nur in die entsprechenden JS-Plugins einklinken und alles wäre schön. Leider scheitere ich kläglich. Hier mein Versuch:

	(function ($, window) {
		$.subscribe('plugin/swProductSlider/onRegisterEvents', function () {
			window.StateManager.updatePlugin('.action--note, .link--notepad', 'swAjaxWishlist');
			window.StateManager.addPlugin('*[data-product-compare-add=true]', 'swProductCompareAdd');
		});
		
		$.subscribe('plugin/swProductCompareMenu/onStartCompareFinished', function () {
			window.StateManagerStateManager.updatePlugin('.action--note, .link--notepad', 'swAjaxWishlist');
		});
	})(jQuery, window);

Dabei habe ich bereits versucht das ganze mit (function ($) {})(jQuery); (also ohne window) auszuführen - leider auch ohne Erfolg. Ich habe auch versucht mich in plugin/swProductSlider/onInit zu registrieren, jedoch auch das Hilft nicht. Mit console.log konnte ich zumindest sicherstellen, dass die Hooks auch feuern, jedoch funktionieren offensichtlich meine updatePlugin bzw. addPlugin Befehle nicht (hier habe ich ebenfalls bereits beide ausprobiert, obwohl mir recht sicher bin, dass updatePlugin der richtige Befehl sein müsste).

Eingefügt habe ich diesen Code-Schnipsel übrigens in frontend/index/index.tpl im Block {block name=“frontend_index_header_javascript_jquery_lib”}

Ich hoffe mir kann hier jemand helfen. Ich komme einfach nicht weiter…

2

Ich muss hier leider nochmal einhaken. Ich habe des öfteren versucht das Problem zu lösen, aber es nach wie vor nicht geschafft. Hat niemand eine Idee?

3

Ich komme einfach nicht dahinter - das Plugin setzt ein Click-Event mit jQuerys on-Funktion (jquery.product-compare-add.js:29):

me.$el.on(me.getEventName('click'), '*[data-product-compare-add="true"]', $.proxy(me.onAddArticleCompare, me));

Das bedeutet für mich, dass auch zukünftige Elemente dieses Click-Event bekommen. Leider ist dem aber nicht so. Ich kann doch nicht der einzige sein, der dieses Problem in der Einkaufswelt hat?!

4

Ich will ja wirklich nicht nerven, aber hat hier niemand eine Idee?

5

Du musst dich zusätzlich auf das event ‘plugin/swEmotionLoader/onLoadEmotionFinished’ registrieren und dort die Plugins im StateManager adden/updaten.

Warum genau das, trotz jQuery on so ist kann ich dir allerdings auch nicht sagen :smiley:

6

Erstmal vielen Dank, dass du mir in diesem Thread antwortest. Leider führt auch dein genanntes Event nicht zum gewünschten Ergebnis. Ich habe nun folgenden Code in index/index.tpl im Block frontend_index_header_javascript_jquery_lib eingefügt:

	(function($, window) {
		$.subscribe('plugin/swEmotionLoader/onLoadEmotionFinished', function () {
			window.StateManager.updatePlugin('*[data-product-compare-add=true]', 'swProductCompareAdd');
		});
	})(jQuery, window);

Zusätzlich ein zweites Event zu belegen hilft leider auch nicht:

$.subscribe('plugin/swProductSlider/onRegisterEvents', function () {
	window.StateManager.updatePlugin('*[data-product-compare-add=true]', 'swProductCompareAdd');
});

Ich bin echt ratlos…

7

Mir fällt noch was dazu ein, hatte irgendwie nur die Einkaufswelten auf dem Schirm, aber du schreibst ja, dass es in einem Slider ist:

Dir fehlt noch dieses Event: 

 plugin/swProductSlider/onLoadItemsSuccess

Das aus meinem vorherigen Post wird getriggert sobald die Einkaufswelt geladen ist, das hier wird bei jedem Ajax-Produkt-Slider im Shop getriggert wenn neue Einträge geladen wurden.

8

Leider keine Änderung. Brauche ich diese Events denn zusätzlich, oder reicht einer von diesen?

Es ist außerdem so, dass auch das direkte Einfügen in die Entwicklungskonsole von Firefox keine Änderung bringt. Ich habe in die Konsole

window.StateManager.updatePlugin('*[data-product-compare-add=true]', 'swProductCompareAdd');

eingetragen, aber dennoch wird kein Ajax-Events ausgelöst, wenn ich den Link anklicke…

9

Wenn es ein Produktslider ist sollte das letzte Event reichen (glaub ich…).

Ist dein Identifier richtig? ‘*[data-product-compare-add=true]’

Shopware verwendet ‘*[data-compare-ajax=“true”]’

Ansonsten würde mir nur noch addPlugin statt updatePlugin einfallen, bin mir gerade nicht sicher was genau das update macht.

10 
Vergleichen

Das ist mein Button. Also ist der Selektor richtig. addPlugin funktioniert leider auch nicht. Weder in der Konsole, noch im Code.

Durch ein console.log konnte ich aber zumindest sicherstellen, dass das Event auch feuert. Es wird also der addPlugin-Befehl ausgeführt…

11

Shopware verwendet ‚*[data-compare-ajax=„true“]‘

Das war genau der richtige Hinweis. In der product_slider.tpl habe ich nun das div-Element 

um


data-compare-ajax="true"

erweitert und folgenden JS-Code eingefügt:


$.subscribe('plugin/swProductSlider/onLoadItemsSuccess', function () {
	window.StateManager.updatePlugin('*[data-compare-ajax=true]', 'swProductCompareAdd');
});

Nun funktioniert es.

Vielen vielen Dank!!!
1 „Gefällt mir“