Probleme mit Javascript und dem Binding

Shopware 5 Programmierung
1

Hallo Community,

ich habe das Problem das ich es nicht hinbekomme sauber eine JS datei einzubinden. Zwar bekomme ich mein JS geladen, wenn ich es im Block 

{block name="frontend_index_header_javascript_jquery_lib" append}
     
{/block}

lade. Allerdings verliere ich jedesmal das Binding auf mein Element, wen ich auf der Detailseite eine andere Größe meines Artikels aussuche. Was mach ich falsch? Wie binde ich mein JS-Datei richtig an?

2

@insane85 schrieb:

Hallo Community,

ich habe das Problem das ich es nicht hinbekomme sauber eine JS datei einzubinden. Zwar bekomme ich mein JS geladen, wenn ich es im Block 

{block name=„frontend_index_header_javascript_jquery_lib“ append}

{/block}

lade. Allerdings verliere ich jedesmal das Binding auf mein Element, wen ich auf der Detailseite eine andere Größe meines Artikels aussuche. Was mach ich falsch? Wie binde ich mein JS-Datei richtig an?

Hallo,

ich würde dir empfehlen, JavaScript - Dateien nicht direkt in Template - Dateien einzubinden, da dies über die Zeit deinen Shop verlangsamen wird, da die Datei ja nicht minifiziert wird. Am besten bindest du Sie einfach in dein Theme ein, dann wird sich auch mit minifiziert: Shopware 5 Theme Startup Guide .

Zum Thema deines JavaScript - Codes: der Variantenwechsel findet über Ajax statt, du müsstest also deinen Code noch einmal initalisieren, wenn das Ajax - Event geladen wird.

Beste Grüße

Sebastian

3

Zum Thema deines JavaScript - Codes: der Variantenwechsel findet über Ajax statt, du müsstest also deinen Code noch einmal initalisieren, wenn das Ajax - Event geladen wird.

Kann mir jemand sagen, wie ich etwas an dieses Ajax-Event binde? Sprich: Ich möchte eine js-Funktion aufrufen, nachdem eine andere Variante ausgewählt und geladen wurde.

4 
$.subscribe('plugin/swAjaxVariant/onRequestData', function () {
//do something
})

Weitere Dokumentation dazu findest du hier: jQuery plugins and the StateManager

Welches Event das richtige ist findet man am einfachsten heraus indem man die jQuery Plugins im Responsive Theme danach durchsucht. In diesem Fall brauchst du das aus meinem Code-Snippet hier.

2 „Gefällt mir“
5

Super! Vielen Dank!

6 
 $.publish('plugin/swAjaxVariant/onRequestData', [me, response, values, stateObj.location]);

 

So sieht die Zeile bei mir aus… wo genau muss ich meine Funktion anhängen? Einfach zwischen Komma und eckiger Klammer?

7

Wieso nimmst du nicht das hier?
Da kannst du deine Funktion  einfach bei „//do something“ einfügen.

@t2oh4e schrieb:

$.subscribe(‚plugin/swAjaxVariant/onRequestData‘, function () {
//do something
})

8

@ThoZeis schrieb:

$.publish(‚plugin/swAjaxVariant/onRequestData‘, [me, response, values, stateObj.location]);

 

So sieht die Zeile bei mir aus… wo genau muss ich meine Funktion anhängen? Einfach zwischen Komma und eckiger Klammer?

Hallo,

du solltest dich glaube ich erst einmal mit der Materie auseinandersetzen, bevor du irgendetwas kaputt machst: jQuery plugins and the StateManager .

Mit $.publish würdest du ja das Event komplett neu setzen bzw. überschreiben. Du dagegen willst ja aber nur eine Aktion danach ausführen. Somit musst du, wie es bereits hier erwähnt wurde, folgendes dazu nutzen:

$.subscribe('plugin/swAjaxVariant/onRequestData', function () {
     //do something
})

Beste Grüße

Sebastian

9

@sschreier‍

Vielen Dank für die Antwort. Ich lerne noch…
Ich stehe gerade ein wenig auf dem Schlauch… wo genau muss ich die Codezeile einfügen?

10

@ThoZeis schrieb:

@sschreier‍

Vielen Dank für die Antwort. Ich lerne noch…
Ich stehe gerade ein wenig auf dem Schlauch… wo genau muss ich die Codezeile einfügen?

Hallo,

da es sich um JavaScript / jQuery handelt, in eine eigene JavaScript - Datei. Ausführliche Dokumentation von Shopware dazu: Using CSS and JavaScript in themes & jQuery plugins and the StateManager .

Beste Grüße

Sebastian