Как сделать ajax фильтрацию по произвольному полю флажок?

Ссылка скопирована
AJAX HTML PHP
1 ответ

Пытаюсь для себя сделать ajax фильтрацию по произвольному полю флажок. Решил сначала сделать по рубрикам:

<!-- Выводим все рубрики и все записи -->  <div class="category-filter">     <ul>         <li><a href="#" data-cat="0">Все записи</a></li>         <?php         $categories = get_categories(array(             'hide_empty' => 0,         ));         foreach ($categories as $category) {             echo '<li><a href="#" data-cat="' . $category->term_id . '">' . $category->name . '</a></li>';         }         ?>     </ul> </div>  <div id="post-container">     <?php     $args = array(         'post_type' => 'post',         'posts_per_page' => -1,     );      $query = new WP_Query($args);      if ($query->have_posts()) :         while ($query->have_posts()) : $query->the_post(); ?>             <?php the_title(); ?>         <?php endwhile;         wp_reset_postdata();     else :         echo '<p>Записи не найдены.</p>';     endif;     ?> </div>  <!-- в function добавляем данный код -->  function enqueue_ajax_filter() {     wp_enqueue_script('ajax-filter', get_stylesheet_directory_uri() . '/assets/js/ajax-filter.js', array('jquery'), '1.0', true);     wp_localize_script('ajax-filter', 'myAjax', array(         'url' => admin_url('admin-ajax.php'),         'nonce' => wp_create_nonce('filter_nonce')     )); } add_action('wp_enqueue_scripts', 'enqueue_ajax_filter');  function filter_posts_by_category() {     check_ajax_referer('filter_nonce', 'nonce');      $cat_id = isset($_POST['cat_id']) ? intval($_POST['cat_id']) : 0;      $args = array(         'post_type' => 'post',         'posts_per_page' => -1,     );      if ($cat_id > 0) {         $args['cat'] = $cat_id;     }      $query = new WP_Query($args);      if ($query->have_posts()) :         while ($query->have_posts()) : $query->the_post();             // Вывести шаблон поста (например, content.php)            the_title();         endwhile;         wp_reset_postdata();     else :         echo '<p>Записи не найдены.</p>';     endif;      wp_die(); } add_action('wp_ajax_filter_posts_by_category', 'filter_posts_by_category'); add_action('wp_ajax_nopriv_filter_posts_by_category', 'filter_posts_by_category');  <!-- создаём файл ajax-filter.js -->  jQuery(document).ready(function($) {     $('.category-filter a').on('click', function(e) {         e.preventDefault();         var cat_id = $(this).data('cat');         $.ajax({             url: myAjax.url,             type: 'POST',             data: {                 action: 'filter_posts_by_category',                 cat_id: cat_id,                 nonce: myAjax.nonce             },             success: function(response) {                 $('#post-container').html(response);             },             error: function(error) {                 console.log(error);             }         });     }); });

<!-- Выводим все рубрики и все записи --> <div class="category-filter"> <ul> <li><a href="#" data-cat="0">Все записи</a></li> <?php $categories = get_categories(array( 'hide_empty' => 0, )); foreach ($categories as $category) { echo '<li><a href="#" data-cat="' . $category->term_id . '">' . $category->name . '</a></li>'; } ?> </ul> </div> <div id="post-container"> <?php $args = array( 'post_type' => 'post', 'posts_per_page' => -1, ); $query = new WP_Query($args); if ($query->have_posts()) : while ($query->have_posts()) : $query->the_post(); ?> <?php the_title(); ?> <?php endwhile; wp_reset_postdata(); else : echo '<p>Записи не найдены.</p>'; endif; ?> </div> <!-- в function добавляем данный код --> function enqueue_ajax_filter() { wp_enqueue_script('ajax-filter', get_stylesheet_directory_uri() . '/assets/js/ajax-filter.js', array('jquery'), '1.0', true); wp_localize_script('ajax-filter', 'myAjax', array( 'url' => admin_url('admin-ajax.php'), 'nonce' => wp_create_nonce('filter_nonce') )); } add_action('wp_enqueue_scripts', 'enqueue_ajax_filter'); function filter_posts_by_category() { check_ajax_referer('filter_nonce', 'nonce'); $cat_id = isset($_POST['cat_id']) ? intval($_POST['cat_id']) : 0; $args = array( 'post_type' => 'post', 'posts_per_page' => -1, ); if ($cat_id > 0) { $args['cat'] = $cat_id; } $query = new WP_Query($args); if ($query->have_posts()) : while ($query->have_posts()) : $query->the_post(); // Вывести шаблон поста (например, content.php) the_title(); endwhile; wp_reset_postdata(); else : echo '<p>Записи не найдены.</p>'; endif; wp_die(); } add_action('wp_ajax_filter_posts_by_category', 'filter_posts_by_category'); add_action('wp_ajax_nopriv_filter_posts_by_category', 'filter_posts_by_category'); <!-- создаём файл ajax-filter.js --> jQuery(document).ready(function($) { $('.category-filter a').on('click', function(e) { e.preventDefault(); var cat_id = $(this).data('cat'); $.ajax({ url: myAjax.url, type: 'POST', data: { action: 'filter_posts_by_category', cat_id: cat_id, nonce: myAjax.nonce }, success: function(response) { $('#post-container').html(response); }, error: function(error) { console.log(error); } }); }); });

А теперь пытаюсь этот код адаптировать под страницы с определенным шаблоном. Вопрос такой, как мне вывести на другой странице все поля флажков, а потом по этим флажкам фильтровать уже страницы с определённым шаблоном?

Дополнительно

Что такое поле флажок? checkbox? Ну так используйте тогда html теги и

  • Артем Золин, checkbox переводится как флажок, такое поле есть в acf. Вы говорите через html теги, но как это сделать? Я предполагаю такой алгоритм. Нужно как-то вывести все эти флажки и вывести все страницы, и потом делать ajax фильтр, но как это реализовать?

    • Нужно решить такую задачу?

    Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.

    Заказать помощь
    Лучший ответ
    1
    Дмитрий К. Ответ

    Для AJAX-фильтра по произвольному полю-флажку нужно разделить задачу на три части: разметка фильтра, обработчик AJAX на сервере и правильный meta_query. Если сначала получилось по рубрикам, это нормально: рубрики фильтруются через tax_query, а ACF checkbox/true_false уже через meta.

    Если поле ACF типа True/False хранит значение 1, запрос будет примерно таким:

    add_action('wp_ajax_filter_posts', 'my_filter_posts');
add_action('wp_ajax_nopriv_filter_posts', 'my_filter_posts');
 
function my_filter_posts() {
    $checked = isset($_POST['checked']) ? sanitize_text_field($_POST['checked']) : '';
 
    $args = [
        'post_type' => 'post',
        'posts_per_page' => 12,
    ];
 
    if ($checked === '1') {
        $args['meta_query'] = [
            [
                'key' => 'my_checkbox_field',
                'value' => '1',
                'compare' => '=',
            ],
        ];
    }
 
    $query = new WP_Query($args);
 
    ob_start();
    while ($query->have_posts()) {
        $query->the_post();
        get_template_part('template-parts/card');
    }
    wp_reset_postdata();
 
    wp_send_json_success(['html' => ob_get_clean()]);
}

    add_action('wp_ajax_filter_posts', 'my_filter_posts'); add_action('wp_ajax_nopriv_filter_posts', 'my_filter_posts'); function my_filter_posts() { $checked = isset($_POST['checked']) ? sanitize_text_field($_POST['checked']) : ''; $args = [ 'post_type' => 'post', 'posts_per_page' => 12, ]; if ($checked === '1') { $args['meta_query'] = [ [ 'key' => 'my_checkbox_field', 'value' => '1', 'compare' => '=', ], ]; } $query = new WP_Query($args); ob_start(); while ($query->have_posts()) { $query->the_post(); get_template_part('template-parts/card'); } wp_reset_postdata(); wp_send_json_success(['html' => ob_get_clean()]); }

    На фронте передавайте значение флажка, а не текст ссылки. Также обязательно проверьте, как именно ACF хранит поле: True/False обычно 1, checkbox может хранить сериализованный массив. Для checkbox с несколькими значениями часто нужен LIKE, например 'value' => '"red"'. Если поле пустое у части записей, они не попадут в выборку, пока вы явно не добавите условие NOT EXISTS.

    Отдельно проверьте nonce и URL для AJAX. В WordPress запросы для незалогиненных пользователей идут через admin-ajax.php, но обработчик должен быть зарегистрирован и для wp_ajax_, и для wp_ajax_nopriv_. На фронте не передавайте сырые значения из DOM без очистки, а на сервере не доверяйте им. Если фильтр должен сочетать рубрику и флажок, собирайте одновременно tax_query и meta_query, а не запускайте два разных запроса. Для отладки временно возвращайте в JSON ещё и итоговый $args, чтобы видеть, какой запрос реально ушёл в WP_Query.

    Другие ответы (0)

    Пока нет других ответов. Будьте первым, кто поможет автору.

    Ответить на вопрос

    комментарий

    Ваш адрес email не будет опубликован. Обязательные поля помечены *

    Вам также может быть интересно

    VPN Как правильно настроить vless для Android TV? 0 ответов Pyrogram Как правильно зарегистрировать юзер бота в Telegram? 0 ответов печатные-платы Как заставить запускаться программу M3.exe от компании Hanxing AOI в инспекционной машине на Windows 7 Pro? 0 ответов 1С Как выдать дефолтному пользователю 1С 8.3 право на загрузку XML? 0 ответов