未调用 Shopware 插件 javascript 事件

Question

我想在我的 Shopware 插件中包含一个自定义 JavaScript 文件。

我用“alert()”尝试过它，它有效，所以我认为我正确地实现了它。

'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);
        } 

但现在我想像 Shopware 推荐的那样去做。

我的模板：

{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}

我的 JavaScript 文件：

    ;(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");

但从未调用过 HTML 选择上的事件。即使我尝试将颜色 css 设置为红色，它也不会成功。你有没有在你的插件模板上做过自定义的 javascript 事件？那请举个例子。

Answer 1

试试下面的代码：

    '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);
    }

添加新的js文件：

/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');

模板：

    {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}

您还可以添加默认值并从元素 data- 中获取 eventName 和其他内容。

    ** 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));
    },