Фильтр вывода записей в WordPress?

Question

[Сергей Коноваленко]

Сделал AJAX фильтр записей WordPress. Для простоты включил в него только чекбокс, который включает сортировку записей по порядку (ASC).

Вот функция-обработчик в functions.php, которая делает вывод записей через функцию get_posts():

function true_filter_function(){
    $args = array(
        'post_type'   => 'pizza',
        'order'       => 'DESC',
    );

    // условие: включено ASC - сортировка по порядку
    if ( isset( $_POST['in_order'] ) && $_POST['in_order'] == 'on' ) {
        $args['order'] = 'ASC';
    }

    echo "<pre>";
    print_r( $args  );
    echo "</pre>";

    $pizza = get_posts( $args );

    return $pizza;

}

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

Это фильтр и вывод постов на странице:

<!-- Фильтр -->
                <form action="<?php echo site_url() ?>/wp-admin/admin-ajax.php" method="POST" id="filter">
                    <label><input type="checkbox" name="in_order"/>Включить сортировку по порядку</label>
                    <button>Применить фильтр</button>
                    <input type="hidden" name="action" value="myfilter">
                </form>
                <div id="response"></div>

                <!-- Вывод постов -->
                <?php
                    $pizza = true_filter_function();

                    foreach ($pizza as $post) : setup_postdata($post); ?>
                    <div class="post__item">
                        <h1><?php the_title(); ?></h1>
                        <?php the_post_thumbnail('thumbnail'); ?>
                    </div>
                <?php endforeach; wp_reset_postdata(); ?>

jQuery-скрипт:

jQuery(function($){
    $('#filter').submit(function(){
        var filter = $(this);
        $.ajax({
            url:filter.attr('action'), // обработчик
            data:filter.serialize(), // данные
            type:filter.attr('method'), // тип запроса
            beforeSend:function(xhr){
                filter.find('button').text('Загружаю...'); // изменяем текст кнопки
            },
            success:function(data){
                filter.find('button').text('Применить фильтр'); // возвращаем текст кнопки
                $('#response').html(data);
            }
        });
        return false;
    });
});

В functions.php сделал print_r( $args );. При включении чекбокса "Включить сортировку по порядку" и нажатии на кнопку "Применить фильтр" видно, что в массиве $args меняется значение ключа 'order' с 'DESC' на 'ASC':



но на порядок вывода записей это почему-то никак не влияет.

Подскажите, что я делаю не так?

Answer 1

[Dima Polos]

Несколько вопросов, которые возникли по ходу дела:
1) Вы подписались на хуки для ajax? Надо подписаться на два хука.
2) Вы вместе с запросом должны передать еще один параметр, по-моему называется action, только не action из html в теге form, этот action отработает как слаг при вызове обработки ajax, на сервере.
3) Вы проверили какой адрес получается в action, он правильный?
4) Без preventDefault нет перезагрузки страницы? В js стоит обработка события submit, при этом стандартное действие браузера Вы не отменяете, по идее должна идти перезагрузка страницы.

Comments

[Dima Polos]

1. functions.php

// подписываемся на хуки
add_action('wp_ajax_[SOME SLUG]', 'my_ajax_form');
add_action('wp_ajax_nopriv_[SOME SLUG]', 'my_ajax_form');
// что такое [SOME SLUG] смотрите ниже

function my_ajax_form(){
// обработка данных, что хотите делаете
 $response = '';
 if(isset($_POST['something'])){
   
 }
echo json_encode(res);
// после обработки надо "убить" wordpress.
wp_die();
}

2. Надо передать адрес на admin-ajax.php, делают так, в шаблоне страницы, где нужен ajax:

// подписываемся на хук формирующий head
add_action('init', 'ajax_url');
$vars = array(
	'url' => admin_url('admin-ajax.php'),
);

echo '<script>window.wp_vars =' . json_encode($vars) . '</script>';

То есть в тег head вставляем скрипт, который создает в js глобальную переменную с адресом до admin-ajax.php
Можно и в теге form прописать action, но для формирования правильного урла надо вызвать функцию admin_url передав в качестве параметра название нужного скрипта.
3. Теперь js:

$('form').on('submit', function(e){
 e.preventDefault();
  // формируем тело запроса
  var data = {
    action: 'SLUG', // -> !!!!! вот этот SLUG  и есть тот => SOME SLUG
    key1: $('form input').val(),
    key2: 'something'
  };
  // собственно отправляем запрос, например так, $.post, а вообще как хотите, в качестве адреса используете либо прием с глобальной переменной, либо адрес из атрибута action тега form
  $.post(wp_vars.url, data, function(res){
    // колбек на обработку ответа от сервера
    alert(res.success);
  }, 'json');

});

4. Вернемся к пункту 1, там надо было подписаться на два хука, и имена этих хуков будут такими, в данном примере:

add_action('wp_ajax_SLUG', 'my_ajax_form');
add_action('wp_ajax_nopriv_SLUG', 'my_ajax_form');

То есть система хитрая, wp когда получит запрос ajax он будет в теле запроса искать ключ action, и из него вытащит, что там передано, в данном примере передаем SLUG, абсолютно произвольное значение. Далее он регистрирует хуки 'wp_ajax_SLUG' и 'wp_ajax_nopriv_SLUG', а дальше вызывает одно из этих событий, и выходит, что мы подписались как раз на эти события. Если через ajax прислать совсем левый action, то сервер ничего не сделает, так как на левое событие не будет повешено ни одного обработчика.

[Сергей Коноваленко]

Dima Polos, Спасибо, буду пробовать разобраться