0

I'm trying to apply the filter based on the multiple checkbox selected. But the filter is not working the way it should be. Please read the sanario below

-- custom post type: cars

-- custom taxonomy: categories

--- term under car categories: best cars (contains 9 post. 3 for each car make)

-- custom taxonomy: filter

--- terms under filter: year(2016, 2017, 2018), make(Mazda, BMW, Honda), transmission(Automatic, Manual)

Just for test purpose I have put the all three Mazda posts under automatic transmission and 2016 year. The problem is when I select the Mazda with manual transmission no result should be showing because it is only available for automatic filter. Same situation with other checkbox filter. There is something completely wrong and I need help to sort this out so the filter work properly.

This AJAX jQuery Code

<script>
jQuery(function($){
    $('#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('Applying Filters...');          },
            success:function(data){
                filter.find('button').text('Apply filters');
                $('#response').html(data);
            }
        });
        return false;
    });
});
</script>

This is form code

<form action="<?php echo site_url() ?>/wp-admin/admin-ajax.php" method="POST" id="filter">
    <?php
        if( $terms = get_terms( array('taxonomy' => 'filter', 'hide_empty' => false) ) ) :
            foreach ( $terms as $term ) :
                if ($term->parent != 0) { // to avoid parent term
                echo '<label for="'.$term->slug.'"><input type="checkbox" id="'.$term->term_id.'" 
                name="check_list[]" value="'.$term->slug.'"> '.$term->name.'</label>'; 
                }
            endforeach;
        endif;
    ?>
    <button>Apply filters</button>
    <input type="hidden" name="action" value="customfilter">
</form>
<!-- Display the result -->
<div id="response"></div>

functions.php code

function my_filters(){

        if( isset( $_POST['check_list'] ) )
            $items = ($_POST['check_list']);
            print_r($items);            

        $args['tax_query'] = array(
            array(
                'taxonomy' => 'filter',
                'field' => 'slug',
                'terms' => $items
            )
        );              

    $query = new WP_Query( $args );

    if( $query->have_posts() ) :
        while( $query->have_posts() ): $query->the_post();
            echo '<h2>' . $query->post->post_title . '</h2>';
        endwhile;
        wp_reset_postdata();
    else :
        echo 'No posts found';
    endif;

    die();
}  

add_action('wp_ajax_customfilter', 'my_filters');
add_action('wp_ajax_nopriv_customfilter', 'my_filters');

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.