Wordpress Lazy Загрузка с использованием нумерации страниц

Question

я выполняю ленивую загрузку с помощью WP_Query Pagination, она работает нормально, но контент дублирует сам себя, когда достигает своего конца, и когда я ищу конкретный результат, он показывает результат правильно, но после этого он все еще хочет выполнить ленивую загрузку, поэтому он загружаетсяслучайные данные

вот мой код

lazy-load.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();
}

lazy-load.js

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

main.js

    (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);

так, как я могу заставить это работать?я не знаю, что я делаю здесь не так

Вот ссылка на репо для всего проекта 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 )

Answer 2

Предлагаю попробовать без ob_start () / ob_get_clean ().Также, если вы генерируете html вместо структуры необработанных данных, я просто напечатал бы ее для вывода без wp_send_json_success ().

Другое решение - отправка необработанных данных (1. массив в php, 2. json_encode (), 3. wp_send_json ()) и обработка в javascript (создание динамического элемента dom после выполнения запроса к бэкэнду).