如何在custom.js中引用PrestaShop对象并监听其事件？

嘿，我完全懂你现在的应急需求——没法用Webpack构建，只能先在custom.js里临时加事件监听器，虽然知道这不是最佳实践，但先把问题解决了再说对吧？

其实PrestaShop的prestashop对象是全局挂载在window上的，只要你的custom.js在PrestaShop核心JS（比如theme.js）之后加载，就能直接调用它的事件监听方法。下面是具体的实现步骤：

1. 确保custom.js的加载顺序 #

首先要保证你的custom.js是在PrestaShop的核心JavaScript文件之后加载的。通常在PrestaShop主题的footer.tpl（或类似底部模板文件）里，把custom.js的引入标签放在核心JS的后面即可，比如：

{# 在footer.tpl中 #}
<script src="{$urls.theme_js}theme.js"></script>
<script src="{$urls.theme_js}custom.js"></script>

如果用了defer属性，也要确保顺序正确——defer会按标签顺序加载执行。

2. 编写事件监听代码 #

在custom.js里，你可以直接通过全局的prestashop对象调用on()方法绑定事件。为了稳妥，建议包裹在DOMContentLoaded事件里，确保页面DOM和核心JS都初始化完成：

// custom.js 中的完整代码
document.addEventListener('DOMContentLoaded', function() {
    // 监听 updatedProduct 事件
    prestashop.on('updatedProduct', function(event) {
        console.log('产品数据已更新:', event);
        // 这里写你的业务逻辑，比如更新购物车UI、重新计算价格等
    });

    // 监听 clickQuickView 事件
    prestashop.on('clickQuickView', function(event) {
        console.log('触发了快速查看:', event);
        // 快速查看弹窗的自定义逻辑，比如修改弹窗样式、加载额外数据等
    });

    // 监听 updateProductList 事件
    prestashop.on('updateProductList', function(event) {
        console.log('产品列表已更新:', event);
        // 产品列表更新后的逻辑，比如重新绑定筛选按钮事件、刷新懒加载等
    });
});

3. 验证与调试 #

如果绑定后没生效，可以按以下步骤排查：

• 打开浏览器控制台，输入prestashop，如果能输出对象，说明全局对象已存在；如果提示undefined，检查核心JS是否加载正常，以及custom.js的加载顺序。
• 在事件回调里加console.log，触发对应操作（比如更新产品、点击快速查看），看控制台是否有输出，确认事件是否正常触发。

注意事项 #

• 这只是临时方案，后续还是建议迁移到Webpack构建流程中，避免全局对象污染和加载顺序问题。
• 尽量保持custom.js中的代码简洁，只写必要的应急逻辑，避免后续维护困难。

内容的提问来源于stack exchange，提问作者Jonas Mærsk