Shopware插件自定义JavaScript事件未触发问题求助

我来帮你捋捋这个问题——你的JS文件确实成功引入了，但事件绑定和样式设置没生效，核心问题出在DOM加载时机和Shopware前端插件的正确使用规范上。下面给你一套完整的可运行示例：

一、修正JavaScript文件代码 #

重点调整DOM初始化时机、事件绑定逻辑，以及符合Shopware的插件规范：

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

    $.plugin('predefinedBasket', {
        defaults: {
            // 可自定义配置项，比如请求路径前缀等
            basePath: window.csrfConfig?.basePath || ''
        },

        init: function (){
            var me = this;
            // 加载HTML中的data属性配置
            me.applyDataAttributes();
            // 绑定事件
            me.registerEvents();
            // 初始化时设置样式（替代原JS末尾的无效写法）
            me.$el.css('color', 'red');
        },

        registerEvents: function () {
            var me = this;
            // 用Shopware插件内置的_on方法绑定，自动处理事件命名空间
            me._on(me.$el, 'change', $.proxy(me.onSelectChange, me));
        },

        onSelectChange: function(event) {
            var me = this,
                optionSelected = me.$el.find('option:selected'),
                valueSelected = me.$el.val();

            alert("BLSBLS");
            console.log("插件实例", me);
            console.log("基础路径", me.opts.basePath);
            console.log("选中选项", optionSelected.text());
            console.log("选中值", valueSelected);
        },

        destroy: function () {
            var me = this;
            // 清理事件绑定
            me.off(me.eventSuffix);
            // 调用父类销毁方法
            me._destroy();
        }
    });

    // 方式1：用Shopware官方推荐的PluginManager自动初始化（更适配Shopware生命周期）
    window.PluginManager.register('predefinedBasket', $.plugin('predefinedBasket'), '[data-predefined-basket]');

    // 方式2：如果需要手动控制初始化时机，用jQuery ready事件
    // $(document).ready(function() {
    //     const $select = $('#predefined-basket-select');
    //     if ($select.length) {
    //         $select.predefinedBasket();
    //     }
    // });

})(jQuery, window);

二、调整模板文件 #

给select元素添加自定义data属性，方便PluginManager自动识别初始化：

{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" data-predefined-basket>
            <option selected="selected">Vordefinierte Warenkörbe...</option>
            {foreach $sPredefinedBaskets as $basket}
                <option value="{$basket.id}">{$basket.name}</option>
            {/foreach}
        </select>
    </div>
{/block}

三、补充CSS样式（可选） #

如果需要强制样式生效，推荐直接在插件的CSS文件中定义，比JS设置更可靠：

#predefined-basket-select {
    color: red !important;
}

然后通过Shopware事件引入CSS文件（和JS引入逻辑类似）：

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

记得在插件的services.xml中注册这个事件监听：

<service id="your_plugin.service.frontend" class="YourPlugin\Service\FrontendService">
    <argument type="service" id="kernel"/>
    <tag name="kernel.event_listener" event="Theme_Compiler_Collect_Plugin_JavaScript" method="onCollectJavaScriptFiles"/>
    <tag name="kernel.event_listener" event="Theme_Compiler_Collect_Plugin_Css" method="onCollectCssFiles"/>
</service>

关键问题说明 #

1. DOM加载时机：你之前直接在JS末尾调用初始化，可能执行时select元素还未渲染（比如AJAX购物车是动态加载的），用PluginManager或$(document).ready能确保元素存在后再初始化。
2. 样式设置错误：jQuery的css()方法不支持直接写"red !important"，要么用CSS文件定义，要么用me.$el.css('cssText', 'color: red !important;')。
3. 全局变量访问：确保csrfConfig是全局可访问的，Shopware通常会在页面加载时注入这个全局对象。

内容的提问来源于stack exchange，提问作者devnik