Shopware 6：如何通过JavaScript在Storefront显示自定义错误提示

Shopware 6的Storefront内置了FlashMessageService服务，专门用来处理前端提示消息，包括错误提示。你可以直接在自定义插件中注入并使用这个服务，无需手动编写弹窗逻辑。

完整代码示例 #

import Plugin from 'src/plugin-system/plugin.class';

export default class Product extends Plugin {
    // 注入FlashMessageService服务
    static get inject() {
        return ['flashMessageService'];
    }

    init() {
        super.init();
        // 示例：在初始化时显示错误提示，可根据业务逻辑放在需要触发的位置
        this.showErrorNotification('操作失败，请稍后重试');
    }

    /**
     * 显示错误提示的方法
     * @param {string} message 错误提示内容
     */
    showErrorNotification(message) {
        this.flashMessageService.add({
            type: 'error', // 提示类型：error、warning、success、info
            text: message,
            autoClose: true, // 是否自动关闭，默认true
            position: 'top-right' // 提示位置，可选top-right/top-left/bottom-right/bottom-left
        });
    }
}

关键说明 #

• 依赖注入：通过static get inject()声明需要注入的服务，Shopware会自动将FlashMessageService实例赋值给this.flashMessageService。
• 提示类型：除了error，还支持success、warning、info三种类型，对应不同的样式。
• 自定义配置：可以通过autoClose控制是否自动关闭，position设置提示的显示位置，满足不同场景需求。

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