Nach Variantenwechsel in der Detailansicht verschwindet meine JQuery-Erweiterung

Shopware 5 Programmierung
1

Hallo,

mein Problem ist dass meine “onClick-Funktion” nach einem Variantenwechsel einfach verschwindet. Wieso? Ansonten wenn ich die Seite ganz normal lade (oder neu lade), wird alles richtig eingebunden und funktioniert auch. So bald ich auf eine Variante klicke, dann kommt der standard AJAX-Reload von Shopware und meine “onClick-Funktion” ist einfach weg. Es kommt auch kein JS-Fehler.

Hier ist mein Code:

{extends file="parent:frontend/index/index.tpl"}

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

{block name="frontend_index_header_javascript_jquery" append}
    
        $('body').myPlugin();
    
{/block}

und dann meine "myJquery.js"

;(function($) {
    'use strict';

    $.plugin('myPlugin', {
        defaults: {
            preventDefault: true,
            closeOnBody: false
        },

        init: function() {
            jQuery('#test').on('click', function(){
                .....
            });
        },
    });
})(jQuery);

 

2

Hi Mario,

ja, das Problem ist vermutlich, dass beim AJAX Reload eben nicht die ganze Seite ersetzt wird, sondern nur ein Teil des DOMs und dann wird dein Event nicht mehr greifen, weil das JS nicht neu ausgewertet wird.

Ich würde dir raten, bau den Aufruf deines Plugins mit in deine JS-Datei. Die JS-Datei am besten über die Events bei Plugins oder über die Theme.php in die Themegenerierung mit rein geben, dann hast du es sauber, keine inline scripts und eine minifizierte JS-Datei. ;) 

Und dann die eigentliche Lösung: Im jQuery plugin mit delegated events arbeiten, dann ist egal, was andere Scripts mit dem DOM machen… :wink:

Beispiel für delegeted events:

$('body').delegate('*[data-modal-close="true"]', 'click.modal', $.proxy(me.closeModal, me));

Wäre in deinem Fall sowas in der Richtung:

init: function(){

var me = this;

$('body').delegate('#test', 'click', $.proxy(me.clickHandler, me));

}, clickHandler: function(){

...

}

 

Reicht dir die Erklärung soweit, kommst du damit weiter?

 

Liebe Grüße

Philipp

3

Hi Philipp,

ja, es funktioniert!

Mit ‘delegate’ klappt es wunderbar.

$('body').delegate('#test', 'click', $.proxy(me.clickHandler, me));

Vielen Dank!