javascript - 使用复选框按多个分类过滤帖子并选择

Question

嘿，我会尽快完成的。我正在尝试使用选择下拉列表和复选框在前端表单中使用两种不同的分类法(城市和类别)过滤我的自定义帖子类型(景点)。目前，我的选择过滤器可以工作，但我的复选框过滤器不能单独工作，也不能与选择下拉菜单一起工作。

Image

我尝试使用这篇文章来帮助我:https://rudrastyh.com/wordpress/ajax-post-filters.html

前端 PHP 表单

<form action="<?php echo site_url() ?>/wp-admin/admin-ajax.php" method="POST" id="filter">
<!--            Cities select filter -->
        <?php
    if( $terms = get_terms( 'city', 'orderby=name' ) ) : // to make it simple I use default categories
        echo '<select value ="" name="cityfilter"><option>Select City...</option>';
        foreach ( $terms as $term ) :
            echo '<option value="' . $term->term_id . '">' . $term->name . '</option>'; // ID of the category as the value of an option
        endforeach;
        echo '</select>';
    endif;?>
<!--        Categories filter -->
        <div class="categories-list">
        <?php 
          $categories = get_categories(); 
          foreach ($categories as $category) {
            echo '<input type="checkbox" name="categoryfilter" value="'.$category->cat_ID.'"> '.$category->name.'<br />';
          }
        ?>
        </div>

            <button class="itenerary-filter">Apply filter</button>
<input type="hidden" name="action" value="myfilter">

    </form> 

Functions.php 查询

function misha_filter_function(){
    $args = array(
        'orderby' => 'date', // we will sort posts by date
        'order' => $_POST['date'] // ASC или DESC
    );
    $relation = 'OR';
    if($_POST['categoryfilter'] == 'on' && isset( $_POST['cityfilter'] )) {
        $relation = 'AND';
    }
    if( isset( $_POST['cityfilter'] ) ||  (isset( $_POST['categoryfilter']) && $_POST['categoryfilter'] == 'on') )
        $args['tax_query'] = array(
            'relation' => $relation, 
            array(
                'taxonomy' => 'city',
                'field' => 'id',
                'terms' => $_POST['cityfilter']
            ),
            array(
                'taxonomy' => 'category',
                'field' => 'id',
                'terms' => $_POST['categoryfilter'],
            ),
        );

    $query = new WP_Query( $args );

    if( $query->have_posts() ) :
        while( $query->have_posts() ): $query->the_post();
            get_template_part('template_parts/loop_content','attractions');
        endwhile;
        wp_reset_postdata();
    else :
        echo 'No posts found';
    endif;

    die();
}


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

Javascript

$('#filter').submit(function(){
        var filter = $('#filter');
        $.ajax({
            url:filter.attr('action'),
            data:filter.serialize(), // form data
            type:filter.attr('method'), // POST
            beforeSend:function(xhr){
                filter.find('button').text('Processing...'); // changing the button label
            },
            success:function(data) {
                filter.find('button').text('Apply filter'); // changing the button label back
                $('#external-events-listing').html(data); // insert data
                $('#external-events-listing .feature-attraction').addClass('feature-attraction_itenerary ui-draggable ui-draggable-handle').removeClass('feature-attraction');
                $('.feature-attraction_itenerary .wrapper').addClass('wrapper_itenerary').removeClass('wrapper');
                $('#external-events .feature-attraction_itenerary').each(function() {
                        // store data so the calendar knows to render an event upon drop
                        $(this).data('event', {
                            title: $.trim($(this).text()),
                            // use the element's text as the event title
                            stick: true // maintain when user navigates (see docs on the renderEvent method)
                        });
                        // make the event draggable using jQuery UI
                        $(this).draggable({
                            zIndex: 999,
                            revert: true,
                            // will cause the event to go back to its
                            revertDuration: 0 //  original position after the drag
                        });
                });
            }
        });
        return false;
    });

如有任何帮助，我们将不胜感激!

编辑:

所以我 var_dump($args);按照建议。我通过从下拉列表中选择一个选项并选中一个复选框来获得此数组。问题是，当选择两者时，关系不应该是“关系”=>“或”，它应该是“和”。我想要做的是当两个过滤器都被选中时，“或”应该是“和”。有办法吗？

array (size=3)
  'orderby' => string 'date' (length=4)
  'order' => null
  'tax_query' => 
    array (size=3)
      'relation' => string 'OR' (length=2)
      0 => 
        array (size=3)
          'taxonomy' => string 'city' (length=4)
          'field' => string 'id' (length=2)
          'terms' => string '6' (length=1)
      1 => 
        array (size=3)
          'taxonomy' => string 'category' (length=8)
          'field' => string 'id' (length=2)
          'terms' => string '7' (length=1)

Answer 1

您的代码中有一些错误。categoryfilter 未获得“on”值 - 因此您应该将其从 if 条件中删除。

这是它:

function misha_filter_function(){
    $args = array(
        'orderby' => 'date', // we will sort posts by date
        'order' => $_POST['date'] // ASC или DESC
    );
    $relation = 'OR';
    if(!empty($_POST['categoryfilter']) && isset( $_POST['cityfilter'] )) {
        $relation = 'AND';
    }
    if( isset( $_POST['cityfilter'] ) ||  !empty( $_POST['categoryfilter']) )
        $args['tax_query'] = array(
            'relation' => $relation, 
            array(
                'taxonomy' => 'city',
                'field' => 'id',
                'terms' => $_POST['cityfilter']
            ),
            array(
                'taxonomy' => 'category',
                'field' => 'id',
                'terms' => $_POST['categoryfilter'],
            ),
        );

    $query = new WP_Query( $args );

    if( $query->have_posts() ) :
        while( $query->have_posts() ): $query->the_post();
            get_template_part('template_parts/loop_content','attractions');
        endwhile;
        wp_reset_postdata();
    else :
        echo 'No posts found';
    endif;

    die();
}


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