Событие javascript плагина Shopware не вызывается

Я хочу включить собственный файл JavaScript в свой плагин Shopware.

Я попробовал это с помощью «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 в шаблоне плагина? Тогда, пожалуйста, приведите мне пример.


person DevNik    schedule 18.05.2018    source источник


Ответы (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}

Также вы можете добавить значения по умолчанию и получить eventName и другие данные из элемента 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));
    },
person Alexey Palamar    schedule 18.05.2018
comment
Ммм, это тоже не сработало. Я сделал сейчас простой способ. ‹Выберите onchange = onChangePredefinedBasket (этот) класс = нормальный id = предопределенный-выбор корзины› и в файле js: функция onChangePredefinedBasket (корзина) {предупреждение (корзина.value); } Может быть, не оптимально, но работает. - person DevNik; 18.05.2018
comment
@NikDev, если попробовать добавить алерт в init () - алерт не работает? Попробуйте запустить в консоли StateManager.addPlugin('*[data-predefined-basket="true"]', 'predefinedBasket'); или StateManager.addPlugin('#predefined-basket-select', 'predefinedBasket'); и после этого проверьте, работает ли он. - person Alexey Palamar; 20.05.2018