JavaScript läuft nicht zuverlässig

Shopware 5 Programmierung
1

Untenstehender vereinfachter Code soll bei einem Klick auf myAction das entsprechende data-target togglen. Das Template wurde einmal in der index.tpl und einmal in einem Code Element in der EInkaufswelt included. Jedoch habe ich hier das Problem das sich das JavaScript manchmal dazu entscheidet korrekt zu funktionieren und mal wieder nicht. Meißt werden die Klassen nicht wie gewünscht getogglet. Das Theme wird vor Plugins injiziert und vom Responsive Theme abgeleitet.

Überseh ich hier etwas, oder hat jemand eine Idee woran das liegen könnte?

Template:

                Some text
            
        
        
            
                Sometext
            
        
        
            
                Sometext
            
        
    

    
        
            Some content

 

JavaScript:

$(function() {
    function myFunction(elements) {
        $.each(elements, function(i, el){
            var ele = $(el);
            ele.find('.myAction[data-target]').click(function() {
                $(this).toggleClass('is--active');
                ele.find('.myContents').toggleClass('is--open');
                ele.find($(this).attr('data-target')).toggleClass('is--active');
            });
        });
    }

    myFunction($('.myContainer'));
    $.subscribe("plugin/swEmotionLoader/onLoadEmotionFinished", function(me) {
        myFunction($('.myContainer'));
    });
});

 

2

Wie bindest du dein JavaScript ein? Wird es in der Theme.php inkludiert (wie hier beschrieben: Using CSS and JavaScript in themes)

Wenn ja: Dann sollte es keine Probleme geben, ansonsten gibt es eine RaceCondition. Das Javascript von Shopware wird asynchron geladen. Da könnte es passieren, dass dein Skript ausgeführt wird, bevor das von Shopware geladen wurde.

Viele Grüße

1 „Gefällt mir“
3

Schonmal danke für die Antwort!

Ja, das JS wird über die Theme.php inkludiert.

4

Kannst du mal prüfen, ob dein Event-Callback von plugin/swEmotionLoader/onLoadEmotionFinished überhaupt aufgerufen wird?

Einfach mal vor myFunction($(’.myContainer’)); innerhalb der Callback-Funktion ein console.log(“funktioniert”); und prüfen, ob “funktioniert” in der Browser-Konsole steht.

Viele Grüße

5

Also es wird komplett geladen, ein Klick wird ebenfalls erkannt. Jedoch die Klassen werden nicht getogglet.

6

Kannst du mal prüfen, wie oft die Funktion „myFunction“ aufgerufen wird?

Wenn diese 2x aufgerufen wird, dann werden ja auch zwei Event-Listener an die Elemente gehängt. D.h. bei einem Klick, wird die Klasse gesetzt und sofort wieder entfernt. Verstehst du was ich meine?

Viele Grüße

1 „Gefällt mir“
7

Jep verstehe. War auch der Fall! Die Klassen wurden (zumindest im EKW-Element) direkt wieder entfernt.

Beim Laden erhält nun “myContainer” die Klasse “.is–loaded” und der Funktionsaufruf findet via

myFunction($('.myContainer:not(.is--loaded)'));

statt. Ausser du hast noch eine bessere/schönere Idee das umzusetzen :slight_smile: Zumindest funktioniert das ganze einmal!

Schonmal Herzlichen Dank!

8

Ausser du hast noch eine bessere/schönere Idee das umzusetzen  :)

Ja, den offiziellen Weg ein Shopware JS-Plugin zu entwickeln :) jQuery plugins and the StateManager

Dort nimmt dir sowas der StateManager ab und es kann nicht passieren, dass das Plugin 2x für das gleiche Element initialisiert wird.

Viele Grüße

1 „Gefällt mir“