WordPress Поиск Ajax + Isotope + Бесконечный прокрутка

Мне удалось разобраться, пока jQuery и AJAX существуют и используются WordPress (я знаю, что может быть лучше использовать REST API WordPress, но … это работает)!

НАЧНЕМ

Мне пришлось редактировать searchform.php, functions.php, search.php и custom-search.js. Пожалуйста, убедитесь, что таксономии и типы записей доступные для запроса (public) и переменные запроса установлены в true. Если вы использовали CPT UI, вы можете отредактировать их здесь:

http://domain.com/wp-admin/admin.php?page=cptui_manage_taxonomies&action=edit

Установите параметр ‘Public Queryable’ в ‘true’ и ‘Query Var’ в ‘true’.

SEARCHFORM.PHP

Мне пришлось отключить автозаполнение в форме поиска и форме фильтра ajax на случай, если пользователи используют кнопку “Назад”, так как параметр InfiniteScroll для истории по умолчанию установлен в true.

<form role="search" method="get" class="search-form" action="<?php echo esc_url( home_url( "https://wordpress.stackexchange.com/" ) ); ?>" autocomplete="off">
<select id="drpdwn_search">
    <option value="any" selected>Все</option>
    <option value="opone">Один</option>
    <option value="optwo">Два</option>
    <option value="opthree">Три</option>
</select>

<input type="search" class="search-field form-control" name="s" placeholder="Поиск" value="<?php echo esc_attr( get_search_query() ); ?>" title="<?php _ex( 'Поиск по:', 'label', 'wp-bootstrap-starter' ); ?>">
    <input type="hidden" name="post_type" value="any" />
        <input type="submit" class="search-submit btn btn-default" value="<?php echo esc_attr_x( 'Поиск', 'submit button', 'wp-bootstrap-starter' ); ?>">
</form>

Как вы видите, если пользователь не выбирает тип поста, по умолчанию он будет ‘any’ для значения.

<input type="hidden" name="post_type" value="any" />

SEARCH.PHP

Поля формы фильтра ajax должны быть обязательными через HTML.

Ajax Filter – Тег формы

Я добавил атрибут autocomplete к тегу формы и установил его на off.

Ajax Filter Form – Таксономии

Для вашего сведения: мои таксономии – это категории кастомного типа постов, созданные с помощью CPT UI – как вы можете видеть, на протяжении всего процесса я не использовал категории WP Core.

В форме фильтра ajax я отредактировал фильтр таксономий, чтобы получить все термины, когда тип поста установлен на любой в операторе else.

Ajax Filter Form – Поле поиска

Затем я установил тип ввода поля поиска на скрытый, чтобы они могли фильтровать только поисковый термин из формы в searchform.php. Я планирую отображать форму поиска в заголовке (header.php), чтобы она могла присутствовать везде, поэтому… поле поиска в форме фильтра ajax может оставаться скрытым, если вы не хотите фильтровать ее на странице результатов поиска).

Запрос результатов поиска по умолчанию (Не в обратном вызове AJAX, ага..)

Я использую стандартный цикл запроса поиска ($wp_query) для неотфильтрованных результатов. Нам не нужно использовать пользовательский запрос поиска. Эта ссылка объясняет ошибку, которую я совершил. Цикл в функции обратного вызова AJAX использует query_posts(), хотя многие статьи утверждают, что не следует его использовать. Одна из причин заключается в том, что он ломает пагинацию, но это нормально, так как я буду использовать жестко закодированный URL-адрес для экземпляра AJAX InfiniteScroll.

Ajax Filter Search Results Query – Контейнер DIV

Я хотел, чтобы вызов ajax имел свой собственный контейнер, поэтому я добавил div с теми же bootstrap классами, что и контейнер стандартного запроса поиска, но с id (#ajax_container).

<section class="row">
    <div id="secondary" class="content-area col-sm-12 col-md-2">
<?php
$actual_link = (isset($_SERVER['HTTPS']) && $_SERVER['HTTPS'] === 'on' ? "https" : "http") . "://$_SERVER[HTTP_HOST]$_SERVER[REQUEST_URI]";
$param = filter_input(INPUT_GET, 'post_type', FILTER_SANITIZE_URL);
?>
<form action="<?php echo site_url() ?>/wp-admin/admin-ajax.php" method="POST" id="filter" autocomplete="off">
<input type="hidden" class="search-field form-control" name="s" placeholder="Поиск" value="<?php echo esc_attr(get_search_query()); ?>" title="<?php _ex('Поиск по:', 'label', 'wp-bootstrap-starter'); ?>">
<input type="hidden" class="form-control" name="post_type" value="<?php echo $param; ?>" />
<?php
if ('font' == $param) {
    if ($terms = get_terms(array('taxonomy' => 'font_cat', 'hide_empty' => false, 'orderby' => 'name'))):
        // если категории существуют, отображаем выпадающий список
        echo '<select name="categoryfilter" class="form-select" aria-label="Одна категории"><option value="">Выберите категорию...</option>';
        foreach ($terms as $term):
            echo '<option value="' . $term->term_id . '">' . $term->name . '</option>'; // ID категории как значение опции

        endforeach;
        echo '</select>';
    endif;
} else if ('snipp' == $param) {
    if ($terms = get_terms(array('taxonomy' => 'snipp_cat', 'hide_empty' => false, 'orderby' => 'name'))):
        // если категории существуют, отображаем выпадающий список
        echo '<select name="categoryfilter" class="form-select" aria-label="Две категории"><option value="">Выберите категорию...</option>';
        foreach ($terms as $term):
            echo '<option value="' . $term->term_id . '">' . $term->name . '</option>'; // ID категории как значение опции

        endforeach;
        echo '</select>';
    endif;
} else if ('post' == $param) {
    if ($terms = get_terms(array('taxonomy' => 'blog_cat', 'hide_empty' => false, 'orderby' => 'name'))):
        // если категории существуют, отображаем выпадающий список
        echo '<select name="categoryfilter" class="form-select" aria-label="Три категории"><option value="">Выберите категорию...</option>';
        foreach ($terms as $term):
            echo '<option value="' . $term->term_id . '">' . $term->name . '</option>'; // ID категории как значение опции

        endforeach;
        echo '</select>';
    endif;
} else {
    $term_args = array('taxonomy' => array('font_cat', 'snipp_cat', 'blog_cat'), 'hide_empty' => false, 'fields' => 'all', 'count' => true,);
    $term_query = new WP_Term_Query($term_args);
    $term_taxs = $term_args["taxonomy"];
    echo '<select name="categoryfilter" class="form-select" aria-label="Все категории" required><option value="">Выберите категорию...</option>';
    foreach ($term_taxs as $term_tax):
        if ($term_tax === 'font_cat'):
            echo '<option value="" disabled>Категории шрифтов</option>';
            foreach ($term_query->terms as $term):
                if ($term->taxonomy == 'font_cat'):
                    echo '<option value="' . $term->term_id . '">' . $term->name . '</option>';
                endif;
            endforeach;
        endif;
        if ($term_tax === 'snipp_cat'):
            echo '<option value="" disabled>Категории сниппетов</option>';
            foreach ($term_query->terms as $term):
                if ($term->taxonomy == 'snipp_cat'):
                    echo '<option value="' . $term->term_id . '">' . $term->name . '</option>';
                endif;
            endforeach;
        endif;
        if ($term_tax === 'blog_cat'):
            echo '<option value="" disabled>Категории блога</option>';
            foreach ($term_query->terms as $term):
                if ($term->taxonomy == 'blog_cat'):
                    echo '<option value="' . $term->term_id . '">' . $term->name . '</option>';
                endif;
            endforeach;
        endif;
    endforeach;
    echo '</select>';
}
?>
<div class="form-check form-check-inline">
    <input class="form-check-input" type="radio" id="asc" name="date" value="asc" />
    <label class="form-check-label" for="asc">Дата: По возрастанию</label>
</div>
<div class="form-check form-check-inline">
    <input class="form-check-input" type="radio" id="desc" name="date" value="desc" selected="selected" required />
    <label class="form-check-label" for="dsc">Дата: По убыванию</label>
</div>
<button class="btn btn-primary btn-filter btn-lg">Применить фильтр</button>
    <input type="hidden" name="action" value="myfilter">
</form>
</div>

        <div class="scroll-content col-sm-12 col-md-10">

<?php
global $wp_post_types, $wp_query;
$wp_post_types['page']->exclude_from_search = true;
if (have_posts()):
    while (have_posts()):
        the_post();
        get_template_part('template-parts/content', 'archive');
    endwhile;
    get_template_part('template-parts/pagination', 'notabs');
else:
    get_template_part('template-parts/content', 'none');
endif;
?>

        </div><!-- .scroll-content -->
<div id="ajax_container" class="col-sm-12 col-md-10"></div>
</section> <!-- row -->

FUNCTIONS.PHP

AJAX Callback Function – Протокол

Поскольку HTTP и HTTPS гибкие для моего домена, мне пришлось указать протокол для URL-адреса ajax. Конечно, HTTPS будет использоваться только в продакшене, так что это можно убрать, если HTTPS является обязательным.

AJAX Callback Function – Цикл запроса

Как уже было сказано, поскольку я решил изменить основной запрос для поиска – я использовал query_posts() и wp_reset_query() после пагинации.

add_action('wp_ajax_myfilter', 'search_filter_function'); 
add_action('wp_ajax_nopriv_myfilter', 'search_filter_function');

function search_filter_function(){
    global $wp_post_types, $wp_query;
    $wp_post_types['page']->exclude_from_search = true; 
    $paged = ( get_query_var( 'paged' ) ) ? get_query_var( 'paged' ) : 1;
    $protocol = isset( $_SERVER['HTTPS'] ) ? 'https://' : 'http://';
    $args = array(
        'ajaxurl' => admin_url( 'admin-ajax.php', $protocol ),
        'query'   => $wp_query->query,
        's' => $_POST['s'],
        'post_type' => $_POST['post_type'],
        'post_status' => 'publish',
        'posts_per_page' => 6,
        'orderby' => 'date',  
        'order' => $_POST['date'], // ASC или DESC
        'paged' => $paged
    );

    // для таксономий 
    if( isset( $_POST['categoryfilter'] ) ) {
        $args['tax_query'] = array(
            'relation' => 'OR',
            array(
                'taxonomy' => 'font_cat',
                'field'    => 'id',
                'terms'    =>  $_POST['categoryfilter'],
            ),
            array(
                'taxonomy' => 'snipp_cat',
                'field'    => 'id',
                'terms'    =>  $_POST['categoryfilter'],
            ),
            array(
                'taxonomy' => 'blog_cat',
                'field'    => 'id',
                'terms'    => $_POST['categoryfilter'],
            ),
        );
    }

    query_posts( $args );

    if ( have_posts() ) : while ( have_posts() ) : the_post();

            get_template_part( 'template-parts/content', 'search' );

        endwhile; 

            get_template_part( 'template-parts/pagination', 'notabs' );
            wp_reset_query();

        else :

            get_template_part( 'template-parts/content', 'none' ); 

        endif;

    die();
}

FUNCTIONS.PHP (Продолжение)

Next Link for Pagination

Мне нужно было добавить класс к следующему ссылке для пагинации, поэтому я добавил фильтр к функции next_post_link() для не-ajax экземпляра InfiniteScroll.

Для вашего сведения: это важно для пути экземпляра не-ajax InfiniteScroll так как я не хочу жестко закодированный URL.

add_filter('next_posts_link_attributes', 'next_link_class_attribute');
function next_link_class_attribute() {
  return 'class="next-post-link"';
}

Чтобы избежать пустого поля поиска, я добавил эту функцию, чтобы перенаправить пользователя на страницу 404, если не введен поисковый термин.

//если поиск пустой, отобразить 404
add_action( 'pre_get_posts', function ( $q )
{
    if($q->is_search() // Только нацелиться на страницу поиска
    ) {
        // Получить поисковые термины
        $search_terms = $q->get( 's' );

        // Установить 404, если s пустой
        if ( !$search_terms ) {
            add_action( 'wp', function () use ( $q )
            {
                $q->set_404();
                status_header(404);
                nocache_headers();
            });
        }
    }
});

Я также установил 404, если есть только одна или несколько недействительных переменных запроса. Я не рекомендую эту функцию, если вы не зарегистрировали пользовательские переменные запроса.
https://gist.github.com/carlodaniele/1ca4110fa06902123349a0651d454057

//установить 404 только если одна или несколько недействительных переменных запроса (недействительные имена таксономий, но не только) находятся в запросе
add_action( 'template_redirect', 'my_page_template_redirect' );
function my_page_template_redirect() {
  global $wp_query, $wp;
  // это получает массив переменных запроса в URL
  parse_str( parse_url ( add_query_arg( array() ), PHP_URL_QUERY ), $qv);
  if ( ! empty( $qv ) ) { // если есть какие-то переменные запроса в URL
    $queried = array_keys( $qv ); // получить имена переменных запроса
    $valid = $wp->public_query_vars; // это допустимые переменные запроса, принимаемые WP
    // пересекаем массивы, чтобы получить запрашиваемые переменные, которые включены в допустимые переменные
    $good = array_intersect($valid, $queried); 
    // если нет хороших переменных запроса или если есть хотя бы одна недействительная переменная
    if ( empty($good) || count($good) !== count($queried)  ) {
     $wp_query->set_404();
     status_header(404);
     nocache_headers();
    }
  }
}

УЛУЧШЕНИЕ InfiniteScroll до версии 4
Я обновил до InfiniteScroll версии 4, поскольку loadNextPage возвращает Promise, так что в основном я могу использовать then(), если хочу сделать что-то после каждой загрузки постов. Кроме того, из-за его обратной совместимости с версией 3.

CUSTOM-SEARCH.JS

AJAX Filter – Отправка без перезагрузки

Мне пришлось привязать кнопку фильтра к событию клика, чтобы мы могли применять фильтры без необходимости перезагружать всю страницу.

AJAX Filter – Сессии InfiniteScroll и Isotope

Как только пользователь нажимает отправить на фильтре, я использую метод destroy для InfiniteScroll и Isotope на обоих контейнерах ($scroll_container и $ajax_container) на случай, если Isotope или InfiniteScroll уже существует (уничтожить сессию при успешной загрузке).

Для вашего сведения: .data('inifiniteScroll') и InfiniteScroll.data( element ) не работают в версии 3 и 4, так что я не могу проверить, инициализирован ли InfiniteScroll перед использованием метода destroy, так что ошибка будет отображаться в консоли.

Затем я также очищаю контейнер AJAX (#ajax_container.empty()), чтобы убедиться, что новые результаты отображаются каждый раз, когда пользователь фильтрует с помощью формы фильтра ajax.

AJAX Filter – Isotope
Мне удалось заставить Isotope работать на результатах, преобразовав ответ (данные) в объект jQuery перед вставкой данных с помощью Isotope.

let $data = $(data); // хранить данные в объекте jQuery
$ajax_container.append($data);
$ajax_container.isotope('insert', $data ); 

AJAX Filter – InfiniteScroll
Я нашел решение для исправления InfiniteScroll, правильно установив путь – это было найдено путем консольного логирования данных, чтобы получить строки запросов для пагинации (console.log(filter.serialize())).

Как уже было сказано ранее, теперь только экземпляр AJAX InfiniteScroll использует жестко закодированный параметр пути. Я пытался создать путь только с публичными переменными запроса, но возникли проблемы с пагинированными результатами после установки красивых ссылок (кастомизация слагов – переписывание) для типов постов и таксономий.

Это было сделано с помощью плагина CPT UI:
http://domain.com/wp-admin/admin.php?page=cptui_manage_taxonomies&action=edit

Я установил ‘Rewrite’ на ‘true’, добавил текст ‘Custom Rewrite Slug’ и установил ‘Rewrite With Front’ на ‘true’.

Как уже было сказано ранее, мне все равно придется вручную строить URL-адрес пути для экземпляра AJAX InfiniteScroll.

Хорошая новость в том, что пагинация возможна с переписываниями на основе моей установки.

http://domain.com/[taxonomy rewrite slug]/[taxonomy term]/page/{{#}}/?s=[search term]&orderby=date&order=[asc or desc]

Как вы видите, параметр пути для экземпляра AJAX InfiniteScroll теперь установлен правильно.

jQuery(window).on('load', function () {

    let $scroll_container = jQuery('.scroll-content');

    $scroll_container.isotope({
        layoutMode: 'fitRows',
        itemSelector: '.scroll-post'
    }); //isotope

    let currentLocation = window.location.href;
    const ptParams = new Proxy(new URLSearchParams(window.location.search), {get: (searchParams, prop) => searchParams.get(prop),});

    let post_type_value = ptParams.post_type;
    let iso = $scroll_container.data('isotope');

    if(iso) {
    $scroll_container.infiniteScroll({
        //path: 'page/{{#}}/?s=" + searchParam.search_term + "&post_type=" + post_type_value,
        path: ".next-post-link',
        append: '.scroll-post',
        button: '.btn-scroll',
        outlayer: iso,
        loadOnScroll: false,
        scrollThreshold: 300,
        status: '.page-load-status',        
        hideNav: '.pagination'
    }); //infinite scroll

    jQuery('.btn-scroll').on('click', function () {                             
        $scroll_container.on('load.infiniteScroll', function (event) {
            $scroll_container.isotope('layout');
            jQuery('.page-load-status').detach().appendTo(jQuery('.scroll-content'));
        }); //on load function  
    }); //on click function 
} //iso check

    /*
     * Фильтр
     */
    let $ajax_container = jQuery('#ajax_container'); 
    let s_term = jQuery('.search-field').val();
    let s_cat_text = jQuery(".form-select :selected").text(); //не нужно для строки запроса
    let s_cat_val = jQuery(".form-select :selected").val(); 
    let s_order = jQuery("input[type="radio"][name="date"]:checked").val();
    let s_post_type = jQuery("input[type="hidden"][name="post_type"]").val();

     //ajax call
    jQuery('#filter').submit(function(e) { 
        //jQuery('.btn-filter').on('click', function () {
        e.preventDefault();
        let filter = jQuery('#filter');
        jQuery.ajax({
            url: filter.attr('action'),
            data: filter.serialize(), // данные формы
            type : filter.attr('method'),
            beforeSend : function(xhr) {
                filter.find('.btn-filter').text('Фильтрую...');
                console.log(filter.serialize());
            },
            success : function( data ) {
                filter.find('.btn-filter').text('Применить фильтр');

                let iso = $scroll_container.data('isotope');
                let inf = $scroll_container.data('infniteScroll');

                //удалить начальные результаты infinite scroll и isotope для ajax вызова
                if(inf) {
                    $scroll_container.infiniteScroll('destroy');
                }

                if(iso) {
                    $scroll_container.isotope('destroy');
                }

                $scroll_container.remove(); //полностью удалить начальные результаты

                let iso_ajax = $ajax_container.data('isotope');
                //let inf_ajax = $ajax_container.data('infniteScroll'); //не работает, сообщено разработчику
                //InfiniteScroll.data( element ); Экземпляр Infinite Scroll через его элемент также не работает

                //если ajax infinite scroll и isotope уже существуют, удалите их, чтобы сбросить     
                    $ajax_container.infiniteScroll('destroy');  

                if(iso_ajax) {
                    $ajax_container.isotope('destroy');
                    $ajax_container.empty();
                }

                //создать "новый" экземпляр isotope
                $ajax_container.isotope({
                    layoutMode: 'fitRows',
                    itemSelector: '.scroll-post'
                }); //isotope

                let $data = $(data); // хранить данные в объекте jQuery
                $ajax_container.append($data);
                $ajax_container.isotope('insert', $data );  

                let isoajax = $ajax_container.data('isotope');          

                //создать "новый" экземпляр infinite scroll
                $ajax_container.infiniteScroll({
                    path: '/page/{{#}}/?s=" + s_term + "&post_type=" + s_post_type + "&categoryfilter=" + s_cat_val + "&date=" + s_order,
                    append: ".scroll-post',
                    button: '.btn-scroll',
                    outlayer: isoajax, 
                    loadOnScroll: false,
                    scrollThreshold: 300,
                    checkLastPage: true,
                    history: false,
                    status: '.page-load-status',
                    hideNav: '.pagination',
                    debug: true
                }); //infinitescroll 

                    jQuery('.btn-scroll').on('click', function () {
                            console.log('click ajax inside');
                        $ajax_container.on('load.infiniteScroll', function (event) {
                            console.log('infinite ajax inside');
                        $ajax_container.isotope('layout');
                            jQuery('.page-load-status').detach().appendTo(jQuery('#ajax_container'));
                        }); //on load function
                    }); // on click function 
                // сбросить фильтр 
                //filter[0].reset();             
            } // success
        }); //ajax call
        //return false; //e.preventDefault используется
    }); //submit function

    //Привязать слушатель событий к кнопке отправки
    jQuery(document).on('click', 'button[type="submit"]', function() {
      jQuery(this).parents('form').submit();
    }); 
}); // window on load

Пожалуйста, извините за мою индентацию, на этом все!

Если вы можете оптимизировать этот код, чтобы сделать его лучше или придумать, я буду очень признателен.