ajax - 使用分页的 Wordpress 延迟加载

Question

我正在使用 WP_Query Pagination 进行延迟加载
它工作正常，但内容在到达结束时自我复制
当我搜索特定结果时，它会正确显示结果
但在那之后它仍然想做延迟加载所以它加载随机数据

这是我的代码

懒加载.php

    <?php 

add_action('wp_ajax_nopriv_load_posts_by_ajax', 'load_posts_by_ajax_callback');
add_action('wp_ajax_load_posts_by_ajax', 'load_posts_by_ajax_callback');

function load_posts_by_ajax_callback(){
    // check_ajax_referer( 'load_more_posts', 'security' );
    $paged = $_POST['page'];
    $args = array(
        'post_type' => 'unit',
        'post_status' => 'publish',
        'posts_per_page' => 4,
        'paged' => $paged
    );
    if ( !empty($_POST['taxonomy']) &&  !empty($_POST['term_id']) ){
        $args['tax_query'] = array (
            array(
                'taxonomy' => $_POST['taxonomy'],
                'terms'    => $_POST['term_id'],
            ),
        );
    }
    if ( ! is_null($_POST['offer']) ) {
        $args['meta_query'][] = array(
            'key'    => 'WAKEB_hot',
            'value'  => '1',
            'compare' => '=',
        );
    }
    if ( ! is_null($_POST['purpose']) ) {
        $args['meta_query'][] = array(
            'key'    => 'WAKEB_vacation',
            'value'  => '1',
            'compare' => '=',
        );
    }
    if (!empty($_POST['project'])){
        $args['meta_query'] = array (
            array(
                'key' => 'WAKEB_project',
                'value' => $_POST['project'],
                'compare' => '='
            ),
        );
    }
    // start buffer 
    ob_start();
    $query = new WP_Query( $args );
    if ( $query->have_posts() ) : 
        while($query->have_posts()){ $query->the_post(); 
            get_template_part("template-parts/units"); 
        } 
    endif; wp_reset_postdata();
    // start buffered data in data variable
    $data = ob_get_clean();
    wp_send_json_success( $data );
    wp_die();
}

add_action('wp_ajax_nopriv_load_projects_by_ajax', 'load_projects_by_ajax_callback');
add_action('wp_ajax_load_projects_by_ajax', 'load_projects_by_ajax_callback');

function load_projects_by_ajax_callback(){
    // check_ajax_referer( 'load_more_posts', 'security' );
    $paged = $_POST['page'];
    $args = array(
        'post_type' => 'project',
        'post_status' => 'publish',
        'posts_per_page' => 4,
        'paged' => $paged
    );
    if ( ! is_null($_POST['ptype']) ) {
        $args['tax_query'] = array (
            array(
                'taxonomy' => 'pptypes',
                'field'    => 'slug',
                'terms'    => $_POST['ptype'],
            ),
        );
    }
    if ( !empty($_POST['taxonomy']) &&  !empty($_POST['term_id']) ){
        $args['tax_query'] = array (
            array(
                'taxonomy' => $_POST['taxonomy'],
                'terms'    => $_POST['term_id'],
            ),
        );
    }
    // start buffer 
    ob_start();
    $query = new WP_Query( $args );
    if ( $query->have_posts() ) :
        while($query->have_posts()){ $query->the_post();
            get_template_part("template-parts/projects");
        }
    endif; wp_reset_postdata();
    // start buffered data in data variable
    $data = ob_get_clean();
    wp_send_json_success( $data );
    wp_die();
}

懒加载.js

    $('.unit-terms li a').each( function() {
    if ( this.href == window.location.href ) {
        $(this).parent().addClass('current');
    }
});

主文件

    (function($){
  $('.isotope a').on('click', function(){
    $('.isotope .active').removeClass('active');
    $(this).addClass('active');
    var filter = $(this).data('filter');
    if(filter=='*'){
    $('.property').show();
  }else{
    $('.property').not(filter).hide();
    $('.property'+filter).show();
  }
  return false;
  });
})(jQuery);

那么我怎样才能让它工作呢？我不知道我在这里做错了什么

这是完整项目的 repo 链接
https://github.com/Ov3rControl/hoomerz

Answer 1

好的，现在我明白你的意思了 ;) 在延迟加载期间，您只发送到后端的页码，而没有过滤器和/或搜索字符串的当前状态。因此，它仅根据页码发送所有 posttype 项目。您还应该发送过滤器的当前状态

main.js:将此添加到您的页面加载后功能:

var currentUrl = 新 URL(window.location.href);
var searchQuery = urlObj.searchParams.get("k");

lazy-load.js:将搜索参数添加到发布到后端的数据中

var data = {
    'action': 'load_posts_by_ajax',
    'page': page,
    'search: searchQuery // new field
};

lazy-load.php:将搜索参数添加到 WP_Query

if ( isset($_POST['search']) && !empty($_POST['search']) ){ // new section
    $args['s'] = sanitize_text_field($_POST['search']);
}

这是文本搜索过滤器的示例。对于所有过滤器，您必须

1. match every filter from front (URL get param) (main.js)
2. than put it in data object sent to backend (lazy-load.js)
3. address this variable in lazy-load.php in if(isset($_POST['param-name'])) section ( new or existing one as there are some )