Shopware Plugin javascript event not called

Question

I want to include a custom JavaScript file into my Shopware Plugin.

I tryed it with "alert()" and it worked so I think I implemented it correctly.

'Theme_Compiler_Collect_Plugin_JavaScript' => 'onCollectJavaScriptFiles' 

        /**
         * @return ArrayCollection
         */
        public function onCollectJavaScriptFiles()
        {
            $jsFiles = array(
                $this->pluginDirectory . '/Resources/views/frontend/_public/src/js/predefined-basket.js'
            );
            return new ArrayCollection($jsFiles);
        } 

But now I wanted to do it like Shopware recommended it.

My template:

{block name='frontend_checkout_ajax_cart_predefined_basket'}
            <div class="field--select select-field predefined-basket-container" style="margin-top: 10px;">
                <select class="normal" id="predefined-basket-select" >
                    <option selected="selected">Vordefinierte Warenkörbe...</option>
                    {foreach $sPredefinedBaskets as $basket}
                        <option value="{$basket.id}">{$basket.name}</option>
                    {/foreach}
                </select>
            </div>
        {/block}

My JavaScript file:

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

    $.plugin('predefinedBasket', {
        defaults: {

        },
        init: function (){
            var me = this;
          //Für data attributes im html
          me.applyDataAttributes();
          me.registerEvents();
        },
        registerEvents: function () {
          var me = this;
          me._on(me.$el, 'change', $.proxy(me.onSelectChange, me))
        },
        onSelectChange: function(event) {
            var me = this,
                path = crsfConfig.basePath,
                optionSelected = $("option:selected", this),
                valueSelected = this.value;
            alert("BLSBLS");
            console.log("me", me);
            console.log("path", path);
            console.log("Selected Option", optionSelected);
            console.log("Selected Value", valueSelected);

        },
        destroy: function () {
            var me = this;
            me.off(me.eventSuffix);
            me._destroy();
        }
    });
})(jQuery, window);

$('#predefined-basket-select').predefinedBasket();
$('#predefined-basket-select').css("color", "red !important");

But the Event on the HTML select ist never called. Even if I try to set the color css on red it dont success. Did you ever made an custom javascript event on your plugin template ? Then please give me an example.

Answer 1

try code below:

    'Theme_Compiler_Collect_Plugin_JavaScript' => 'onCollectJavaScriptFiles' 

    /**
     * @return ArrayCollection
     */
    public function onCollectJavaScriptFiles()
    {
        $jsFiles = array(
            $this->pluginDirectory . '/Resources/views/frontend/_public/src/js/predefined-basket.js',                
            $this->pluginDirectory . '/Resources/views/frontend/_public/src/js/predefined-basket-subscribe.js'
        );
        return new ArrayCollection($jsFiles);
    }

Add new js file:

/Resources/views/frontend/_public/src/js/predefined-basket-subscribe.js

//Case 1: there you can see additional possibilities
StateManager.addPlugin('*[data-predefined-basket="true"]', 'predefinedBasket');
//Case 2
//StateManager.addPlugin('#predefined-basket-select', 'predefinedBasket');

Template:

    {block name='frontend_checkout_ajax_cart_predefined_basket'}
        <div class="field--select select-field predefined-basket-container" style="margin-top: 10px;">
            <select 
            <!--Case 1: there you can see additional possibilities-->
            data-predefined-basket="true" 
            data-eventName="change"
            <!--finish-->
            class="normal" id="predefined-basket-select" >
                <option selected="selected">Vordefinierte Warenkörbe...</option>
                {foreach $sPredefinedBaskets as $basket}
                    <option value="{$basket.id}">{$basket.name}</option>
                {/foreach}
            </select>
        </div>
    {/block}

Also you can add defaults and got eventName and other stuff from element data- .

    ** Your default options */
    defaults: {
        /**
         * Event name that the plugin listens to.
         *
         * @type {String}
         */
        'eventName': 'click'
    },

    init: function (){
        var me = this;
      //There you got your data-attributes
      me.applyDataAttributes();
      //All your attributes available there
      console.log(me.opts);
      me.registerEvents();
    },

    registerEvents: function () {
      var me = this;
      //Case 1: there you can see additional possibilities
      me._on(me.$el, me.opts.eventName, $.proxy(me.onSelectChange, me));
      //Case 2:
      //me._on(me.$el, 'change', $.proxy(me.onSelectChange, me));
    },