Einkaufswelten -> Code-Element -> JavaScript -> EventListener

Shopware 5 Allgemein
1

Hallo,

ich möchte eine Seite mit einer interaktiven Produktbeschreibung erstellen. In meiner Testumgebung läuft es.

Um es in Shopware einzubauen, habe ich die Styles in eine Less-Datei gepackt, den HTML- und JavaScript-Code in das Code-Element einer Einkaufswelt.

Leider funktionieren die EventListener nicht ( .addEventListener). Woran liegt das? Was habe ich übersehen?

2

wann wird denn dein EventListener eingeführt? Hinweis:

document.asyncReady(function(){} )

Zeig mal etwas Code.

3

Hier etwas Code:

_document_.getElementById( **"stnyClose01"** ).addEventListener( **"click"** ,_stnyClose01_); _document_.getElementById( **"stnyClose01"** ).addEventListener( **"mouseover"** ,_stnyCloseFill01_); _document_.getElementById( **"stnyClose01"** ).addEventListener( **"mouseout"** ,_stnyCloseUnFill01_); **function** _stnyClose01_() {_document_.getElementById( **"stny-Div-For-Main"** ). **style**. **visibility** = **"hidden"** ;} **function** _stnyCloseFill01_() {_document_.getElementById( **"stnyCloseCr01"** ). **style**. **animation** = **"stnyAniCloseMOver 1s forwards"** ;} **function** _stnyCloseUnFill01_() {_document_.getElementById( **"stnyCloseCr01"** ). **style**. **animation** = **"stnyAniCloseMOut 1s forwards"** ;}
4

Ich habe den Code unter public -> src ->  js eingetragen.

 document.asyncReady( **function** () { console.log( **"Hello World 01"** ); document.getElementById( **"stnyProduktBeschreibung"** ).addEventListener( **"click"** , **function** () { console.log( **"Hello World 02"** ); document.getElementById( **"stnyProduktBeschreibung"** ).innerHTML = **"Yepp!"** ; console.log( **"Hello World 03"** ); }) });

Der erste console.log-Befehl „Hello World 01“ wird ausgeführt. Danach heißt es nur noch  „document.getElementById(…) is null“.

Im Code-Element der Einkaufswelt steht lediglich:    

        Produktbeschreibung

5

 

6

Ich tipper darauf, dass deine EKW mit Ajax geladen wird und zu diesem Zeilpunkt noch nicht im DOM bereit steht.

1 „Gefällt mir“
7

Dankk’ Dir. Jetzt läuft es.

  • In Shopware müssen die Schleifen ein Leerzeichen zwischen dem Kleinerzeichen und dem „x“ haben. So geht es nicht: for (i=0; i<x.lenght i>

- ich hatte ein paar größere SVG-Definitionen ans Ende des Codes abgelegt. Beim Abspeichern des Code-Elements wurde das alles mit übernommen.
Nur wenn ich die Einkaufwelt abgespeichert hatte, wurde der Code irgendwo abgeschnitten. Die HTML-Tags war nicht mehr komplett und es lief nicht mehr viel.
Die Anzahl der Zeilen im Code-Element scheint begrenzt zu sein.

- den Javascript-Code muss im Code-Element untergebracht sein. Sonst vergisst Shopware, dass die Funktionen bereits definiert wurden.

8

leider sieht es im Editor ganz anders aus als hinterher im Post.

Ich versuche es noch einmal: Es muss heißen:

for (i=0; i “smaller than” x.length; i++) {…}

und vor dem x muss ein Leerzeichen sein.