Modal laden und erweitern

Shopware 5 Programmierung
1

Hi, ich suche die Möglichkeit beim normalen Modalaufruf via html/data eine Variable mitzugeben die dann beim fertigen laden der Modalbox an eine Funktion weiterzureichen. Speziell will ich einen Anchornamen mitgeben wo dann das Modalfenster hinscrollen soll. Bisher die Funktion des Scrollens:

function scrollToAnchor(anchorName){
    $(".js--modal .content").scrollTop( $("[name*='"+anchorName+"']").offset().top );
};

Die Modalbox aufrufen. kp wie ich hier eine Variable mitgebe?:

Versandkosten

Danke und Gruss.

2

Hallo,

 

ich habe das anhand eines data Attributes umgesetzt. Kannst theoretisch auch globale Variablen definieren, wobei ich mir aber nicht sicher bin, ob das dann in der selben JavaScript VM läuft.

var modalBoxRef = null;

$.subscribe(
    'plugin/swModal/onOpenAjax',
    function (eventArgs, $plugin) {
        if (modalBoxRef !== null && modalBoxRef.modalBoxHashTag !== '') {
            // $plugin._$modalBox.find('.content').first().scrollTop($(modalBoxRef.modalBoxHashTag).offset().top);
            window.setTimeout(
                function () {
                    console.log('modalBoxRef.modalBoxHashTag', modalBoxRef.modalBoxHashTag);
                    console.log('modalBoxRef.opts.animationSpeed', modalBoxRef.opts.animationSpeed);
                    console.log('offset top Wert', $(modalBoxRef.modalBoxHashTag).offset().top);
                    $plugin._$content.scrollTop(
                        $(modalBoxRef.modalBoxHashTag).offset().top - $plugin._$content.offset().top
                    );
                },
                modalBoxRef.opts.animationSpeed + 250
            );
        }
    }
);

$.overridePlugin('swModalbox', {
    onClick: function (event) {
        event.preventDefault();

        var me = this,
            target = me.$target.length === 1 && me.$target || $(event.currentTarget),
            url;
        me.modalBoxHashTag = '';

        if (target.children('img').length > 0) {
            url = target.attr('href');
            me.modalBoxHashTag = target.attr('data-hashtag');

            modalBoxRef = me;
        }

        $.modal.open(me.opts.content || (me.opts.mode !== 'local' ? target.attr('href') : target), me.opts);
        me._isOpened = true;

        $.publish('plugin/swModalbox/onClick', [me, event]);
    }
});

Das oben gezeigte Beispiel überschreibt das modal jQuery Plugin und muss dementsprechend in deine Theme.php eingebunden werden als zusätzliches JavaScript. Oder im Template in der index.tpl unter dem footer JavaScript block. Letzteres funktioniert nur, wenn Du im Theme kein asynchrones Laden von JavaScript eingestellt hast.

 

 

MFG

 

derwunner

1 „Gefällt mir“