WooCommerce Ajax加载更多按钮在Ajax筛选后无响应求解决

核心问题分析 #

1. 事件绑定失效：原JS代码直接给初始DOM元素绑定click事件，但Ajax筛选后Load More按钮是重新生成的新DOM，原有事件绑定不会生效。
2. 查询参数未更新：本地化变量wp_js_vars里保存的是页面加载时的初始查询条件，筛选后的新查询参数没有同步更新，导致Load More请求还是用旧条件加载产品。
3. 主查询干扰：PHP中使用query_posts会修改全局$wp_query，可能和筛选插件的查询逻辑冲突。

具体修复方案 #

1. 改用事件委托绑定点击事件

修改load_more.js，把直接绑定改为委托到文档根节点，确保动态生成的按钮也能触发事件：

(function($) {
    "use strict";
    $(function() {
        // 改用事件委托，支持动态生成的按钮
        $(document).on('click', '#pp_loadmore_products', function(){
            var button = $(this),
                data = {
                    'action': 'loadmore',
                    'query': wp_js_vars.posts,
                    'page' : wp_js_vars.current_page
                };

            $.ajax({
                url : wp_js_vars.ajaxurl,
                data : data,
                related_products : 'no',
                type : 'POST',
                beforeSend : function ( xhr ) {
                    button.addClass('loading');
                    button.text('LOADING ...');
                },
                success : function( data ){
                    if( data ) {
                        $('#container_products_more .products_archive_grid').append( data );
                        button.removeClass('loading');
                        button.text( 'LOAD MORE' );
                        wp_js_vars.current_page++;

                        if ( wp_js_vars.current_page == wp_js_vars.max_page )
                            button.remove();
                    } else {
                        button.remove();
                    }
                }
            });
        });
    });
}(jQuery));

2. 同步筛选后的查询参数

在Ajax筛选完成后，需要更新wp_js_vars里的查询数据。添加以下代码到主题的JS文件或修改load_more.js：

// 监听筛选完成事件，更新查询参数
$(document).on('woocommerce_ajax_product_filtered', function() {
    $.ajax({
        url: wp_js_vars.ajaxurl,
        data: {
            action: 'get_filtered_query_vars'
        },
        type: 'POST',
        success: function(response) {
            if (response.success) {
                wp_js_vars.posts = response.data.posts;
                wp_js_vars.current_page = response.data.current_page;
                wp_js_vars.max_page = response.data.max_page;
            }
        }
    });
});

同时在PHP中添加对应的Ajax处理函数：

add_action('wp_ajax_get_filtered_query_vars', 'pp_get_filtered_query_vars');
add_action('wp_ajax_nopriv_get_filtered_query_vars', 'pp_get_filtered_query_vars');
function pp_get_filtered_query_vars() {
    global $wp_query;
    wp_send_json_success(array(
        'posts' => json_encode($wp_query->query_vars),
        'current_page' => get_query_var('paged') ? get_query_var('paged') : 1,
        'max_page' => $wp_query->max_num_pages
    ));
}

3. 替换query_posts为WP_Query

修改PHP中的Load More处理函数，避免干扰全局查询：

function pp_loadmore_ajax_handler(){
    $args = json_decode( stripslashes( $_POST['query'] ), true );
    $args['paged'] = $_POST['page'] + 1;
    $args['post_status'] = 'publish';

    // 用WP_Query代替query_posts，避免干扰全局查询
    $products_query = new WP_Query($args);

    if( $products_query->have_posts() ) :
        while( $products_query->have_posts() ): $products_query->the_post();
            wc_get_template_part( 'content', 'product' );
        endwhile;
        wp_reset_postdata(); // 重置post数据
    endif;
    die;
}

4. 确保Load More按钮使用筛选后的查询

修改pp_woocommerce_products_load_more函数，确保使用当前的查询对象（筛选后的）：

function pp_woocommerce_products_load_more(){
    global $wp_query;
    echo '<div id="container_products_more">';
        woocommerce_product_loop_start();
        woocommerce_product_loop_end();
        if (  $wp_query->max_num_pages > 1 ) {
            echo '<div id="pp_loadmore_products" class="button">LOAD MORE</div>';
        }
    echo '</div>';
}

额外注意事项 #

• 确认你的筛选插件在完成筛选后会更新全局$wp_query，或者提供了获取筛选后查询对象的方式。
• 测试时打开浏览器控制台，检查Ajax请求的参数和响应，确认查询条件是否正确。

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