Wie kann ich Javascript mit Jquery (Modal) aus der Template ausführen?

Shopware 5 Programmierung
1

Hallo!

Ich habe Probleme mit der richtigen methode zum laden von Javascript, das von einem Cookie und einer PHP-Variablen abhängt.

Ich möchte ein Modal laden, wenn kein Cookie gesetzt wurde und bestimmte daten in meinem FrontendSubscriber true zurückgeben.
Wenn diese conditions erfüllt sind, möchte ich Javascript innerhalb von {block name = “frontend_index_header_javascript_jquery_lib”} laden.

{block name="frontend_index_header_javascript_jquery_lib"}
    {$smarty.block.parent}
    
    {if $conditions == true}
         
    {/if}
{/block}

Aber hier kann ich kein Jquery verwenden, das ich verwenden möchte.

$(document).ready(function() {

    $.modal.open('mycontroller/index', {
        mode: 'ajax',
        title: 'my modal',
        sizing: 'content',
        close: false,
        additionalClass: 'modal--geoip'
    });

});

Was kannst du empfehlen?

2

Welche Shopware Version verwendest du?

Du möchtest also wenn der Cookie nicht gesetzt ist, dass sich das Modal dann automatisch öffnet? Das Modal wird sich nicht öffnet, da jQuery zudem Zeitpunkt noch nicht verfügbar ist.

Seit Shopware 5.3 gibt es hier aber auch asyncReady -> Using CSS and JavaScript in themes

Besser wäre es allerdings dein Script als Shopware jQuery Plugin zu bauen. Darüber hinaus kannste dir evtl. auch mal js-cookies anschauen -> GitHub - js-cookie/js-cookie: A simple, lightweight JavaScript API for handling browser cookies

Ein simples sauberes Shopware jQuery Plugin mit dem js-cookie plugin wäre bspw:

/**
 * do anything based on cookie
 */
$.plugin('yourPlugin', {

    defaults: {

        /**
         * The cookie name which will be checked
         * if the cookie is set or not
         *
         * @property cookieName
         * @type {String}
         */
        cookieName: 'cookieName'
    },

    /**
     * Initializes the plugin
     *
     * @public
     * @method init
     */
    init: function() {
        var me = this;

        me.applyDataAttributes();

        me.checkCookie();
    },

    /**
     * Check if a cookie is set
     *
     * @public
     * @method checkCookie
     * @returns {jQuery}
     */
    checkCookie: function() {
        var me = this;

        if (Cookies.get(me.opts.cookieName)) {
            $.modal.open('mycontroller/index', {
                mode: 'ajax',
                title: 'my modal',
                sizing: 'content',
                close: false,
                additionalClass: 'modal--geoip'
            });
        }
    }
});

 

Und danach noch im Statemanager verfügbar machen.

/**
 * Register the Plugin to the Statemanager
 */
StateManager.addPlugin('*', 'yourPlugin');

Kannste theoretisch auch direkt mit ins Plugin nehmen

1 „Gefällt mir“
3

Hallo @christiantrade‍,  danke für die umfangreiche Antwort.
Das hilft mir sehr.
Ich brauche die Möglichkeit die Aktivierung des Modal per Plugin-Config auszuschalten.
Die PHP-Variante: 

$container = Shopware()->Container();

$this->config = $container->get('shopware.plugin.cached_config_reader')->getByPluginName('My-Plugin', $container->get('Shop'));

$activateModal = ( $this->config['activate_modal'] == 1) ? true : false;

Aber wie kann ich die Config-Einstellungen im Javascript-Plugin verwenden?