Ajax操作后重新加载Flowbox评论JavaScript函数的问题

问题根源 #

初始代码在页面加载时一次性生成所有产品的初始化脚本，但JetFilter分页通过Ajax加载新产品时，这些新产品的容器div不在初始DOM中，导致无法触发初始化；而监听全局DOM变化会引发无限循环，监听所有Ajax请求则会频繁触发不必要的加载。

解决方案 #

重构PHP和JS代码，动态处理当前页面的产品容器，并仅在JetFilter Ajax完成时触发重新初始化：

1. 修改PHP函数

替换原有的insert_product_review_scripts函数，输出通用的初始化逻辑而非硬编码所有产品：

//Reviews op Categorie
function insert_product_review_scripts() {
    if (!is_product_category()) {
        return;
    }

    echo "<script>
        const flowboxConfig = {
            key: 'your-flowbox-key', // 替换为你的Flowbox密钥
            locale: 'nl-NL'
        };

        function loadProductReviews() {
            // 遍历页面中所有Flowbox评论容器
            document.querySelectorAll('[id^=\"flowbox-stars-widget-\"]').forEach(container => {
                // 跳过已初始化的容器，避免重复调用
                if (!container.dataset.flowboxInitialized) {
                    const productId = container.id.replace('flowbox-stars-widget-', '');
                    window.flowboxReviews('init', {
                        container: '#' + container.id,
                        key: flowboxConfig.key,
                        productId: productId,
                        locale: flowboxConfig.locale
                    });
                    container.dataset.flowboxInitialized = 'true';
                }
            });
        }

        // 页面初始加载时执行
        window.addEventListener('load', loadProductReviews);

        // 监听JetFilter Ajax完成事件，分页/筛选后重新初始化
        document.addEventListener('jet-filter/ajax/complete', function() {
            // 延迟100ms确保新DOM渲染完成
            setTimeout(loadProductReviews, 100);
        });
    </script>";
}
add_action('wp_footer', 'insert_product_review_scripts');

2. 关键优化点

• 动态容器检测：JS通过querySelectorAll查找当前页面中所有Flowbox容器，不管是初始加载还是Ajax加载的产品都能覆盖。
• 避免重复初始化：给已处理的容器添加data-flowbox-initialized属性，防止多次调用Flowbox接口。
• 精准事件监听：使用JetFilter官方提供的jet-filter/ajax/complete事件，仅在分页/筛选Ajax完成时触发初始化，避免不必要的执行。

注意事项 #

• 务必将your-flowbox-key替换为实际的Flowbox API密钥。
• 确保产品列表中的div保持id="flowbox-stars-widget-[product-id]"的格式，无拼写错误。
• 若JetFilter事件名称有更新，可参考JetFilter官方文档调整事件监听逻辑。

内容的提问来源于stack exchange，提问作者Christoph da Silva