Как сделать фильтры по рубрикам?

Question

[IceDoG7538]

Вывожу на странице посты

$stocks_Query = new WP_Query( array(
        'post_type'      => 'news-stocks',
        'category_name'  => '',
        'publish'        => true,
        'orderby'        => 'date',
        'order'          => 'DESC',
    ));
    ?>
    
    <section class="blog_pic-two">
        <div class="blog_left-side">
            <div class="grid">
                <?php if ($stocks_Query ->have_posts()) : while($stocks_Query ->have_posts()) : $stocks_Query ->the_post(); ?>
                    <div class="grid_wrap">
                        <figure class="effect-lily">
                            <img src="<?= get_the_post_thumbnail_url() ?>" alt="">
                        </figure>
                        <h2><?= the_title() ?></h2>
                        <p><?= the_excerpt() ?></p>
                        <a href="<?= the_permalink() ?>">Читать</a>
                    </div>
                <?php endwhile; endif; ?>
            </div>
        </div>
    </section>

Выше вывожу форму с выбором категории

<form action="<?php echo admin_url('admin-ajax.php')?>" method="POST" id="filter">
        <input type="radio" id="all" value="" name="filter" checked>   
        <label for="all"></label>
        <span>Все</span>
        <input type="radio" id="stocks" value="stocks" name="filter">
        <label for="stocks"></label>
        <span>Акции</span>
        <input type="radio" id="news" value="news" name="filter">
        <label for="news"></label>
        <span>Новости</span>
        <button>Применить фильтр</button>
    </form>

Так же пытаюсь сделать ajax-запрос

jQuery(function ($) {
        $('#filterasd').submit(function () {
            var filter = $('#filter');
            $.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 делаю логику обработки

function posts_filters(){
    $args = array(
     'order' => $_POST['filter']
    );
   
    if( isset( $_POST['filter'] ) )
     $args['tax_query'] = array(
     array(
      'taxonomy' => 'news-stocks',
      'field' => 'id',
      'terms' => $_POST['filter']
     )
    );   
    die();
}
   add_action('wp_ajax_customfilter', 'posts_filters');
   add_action('wp_ajax_nopriv_customfilter', 'posts_filters');

Скажу честно - в запросах к серверу не силен. При нажатии на фильтрацию ничего не происходит, только кнопка 2 раза меняет свое состояние

Answer 1

[Александр]

ничего не происходит

Так а вы ничего и не делаете.

1. Вы сабмитите не ту форму, которая на сайте $('#filterasd')
2. В форме фильтра забыли самое главное - параметр action. Информация тут
3. В функции posts_filters вы просто формируете массив с параметрами, но не делаете запрос на получение записей. WP_Query
4. Ну и наконец, вы пытаетесь вставить данные (которых нет, см. п.3) в несуществующий элемент #response.

В общем, у вас куски кода, которые никак не связаны, поэтому ничего не работает.

Готовое решение тут.

Comments

[IceDoG7538]

Спасибо большое !
я как раз оттуда и брал код, просто переиначил под себя и поломал )

Answer 2

[IceDoG7538]

Если кто-то столкнется с подобным прикладываю код решения конкретной проблемы

function posts_filters(){
    $args =  array(
        'post_type'      => 'news-stocks',
        'category_name'  => '',
        'publish'        => true,
        'orderby'        => 'date',
        'order'          => 'DESC',
    );
   
    if( isset( $_POST['filter'] ) )
        $args = array(
            'post_type'      => 'news-stocks',
            'category_name'  => $_POST['filter'],
            'publish'        => true,
            'orderby'        => 'date',
            'order'          => 'DESC',
        );
   
    $query = new WP_Query( $args );
   
    if( $query->have_posts() ) :
     while( $query->have_posts() ): $query->the_post();
      get_template_part( 'template-parts/template', 'news' );
     endwhile;
    wp_reset_postdata();
    else :
      echo 'Записей не найдено';
    endif;
   
    die();
   }
   add_action('wp_ajax_myfilter', 'posts_filters');
   add_action('wp_ajax_nopriv_myfilter', 'posts_filters');

<form action="<?php echo admin_url('admin-ajax.php')?>" method="POST" id="filter">
        <input type="radio" id="all" value="" name="filter" checked>   
        <label for="all"></label>
        <span>Все</span>
        <input type="radio" id="stocks" value="stocks" name="filter">
        <label for="stocks"></label>
        <span>Акции</span>
        <input type="radio" id="news" value="news" name="filter">
        <label for="news"></label>
        <span>Новости</span>
        <button>Применить фильтр</button>
        <input type="hidden" name="action" value="myfilter">
    </form>

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