PrestaShop 8如何实现加入购物车确认弹窗自动延时隐藏

方法一：添加自定义JavaScript代码 #

这是最稳妥的方式，无需修改核心文件，适配大多数主题：

1. 进入PrestaShop后台，依次点击「设计」>「主题」>「自定义代码」，在「页脚代码」区域添加以下脚本；或者直接在主题的assets/js/custom.js文件中插入代码（没有该文件可新建）。

document.addEventListener('DOMContentLoaded', () => {
    // 适配不同主题的弹窗选择器，可通过F12开发者工具查看实际类名
    const cartModal = document.querySelector('.cart-modal, .blockcart-modal, .modal');
    
    if (!cartModal) return;

    // 监听弹窗显示状态变化
    const observer = new MutationObserver(mutations => {
        mutations.forEach(mutation => {
            if (mutation.attributeName === 'style' && cartModal.style.display !== 'none') {
                // 3秒后自动关闭弹窗，可修改毫秒数调整延迟时间
                setTimeout(() => {
                    const closeBtn = cartModal.querySelector('.close, .modal-close, .btn-close');
                    closeBtn ? closeBtn.click() : cartModal.style.display = 'none';
                    
                    // 移除背景遮罩（如果存在）
                    const backdrop = document.querySelector('.modal-backdrop');
                    backdrop && backdrop.remove();
                }, 3000);
            }
        });
    });

    observer.observe(cartModal, { attributes: true });
});

2. 保存后，前往「高级参数」>「性能」>「清除缓存」，测试加入购物车操作，弹窗会在设定时间后自动隐藏。

方法二：修改BlockCart模块模板（针对默认模块弹窗） #

如果你的站点使用默认的BlockCart模块弹窗，可通过修改模板实现：

1. 将modules/blockcart/views/templates/front/modal.tpl复制到主题的模块目录themes/你的主题名/modules/blockcart/views/templates/front/（目录不存在则手动创建）。
2. 在该模板文件的末尾添加以下代码：

<script>
    setTimeout(() => {
        const modal = document.getElementById('blockcart-modal');
        if (modal) {
            modal.classList.remove('show');
            document.querySelector('.modal-backdrop')?.remove();
        }
    }, 3000);
</script>

3. 清除缓存后测试效果即可。

注意事项 #

• 不同主题的弹窗类名/ID可能有差异，可通过浏览器开发者工具（F12）定位弹窗元素，调整代码中的选择器。
• 延迟时间3000代表3秒，可根据需求修改为2000（2秒）、5000（5秒）等数值。
• 优先使用方法一，避免修改模块文件导致后续模块更新时丢失自定义内容。

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