I created a loop for my Custom Posts Type workshop with the lists of two custom taxonomies group and teacher on the same page. What I'm trying to do is create an Ajax filter with both taxonomies. The user can select one taxonomy or both to display a selection of posts.
The issues are when the user selects both taxonomies it only displays one post. And when he selects only one taxonomy the result displays "No posts found."
Same thing for the button .filter-reset. I created it to reset the selection and display all the posts. Same issue, the result is "No posts found."
Here is PHP code for the filter and the loop:
<form action="<?php echo site_url() ?>/wp-admin/admin-ajax.php" method="POST" id="filter" class="form-filter">
<div class="container">
<?php
if( $terms = get_terms( 'group', 'orderby=name&exclude=-1' ) ) :
echo '<div class="filter-tax filter--group">';
foreach ( $terms as $term ) :
echo '<input class="btn-radio" type="radio" name="categoryfilter1" value="' . $term->term_id . '"><label>' . $term->name . '</label>';
endforeach;
echo '</div>';
endif;
if( $terms = get_terms( 'teacher', 'orderby=name&exclude=-1' ) ) :
echo '<div class="filter-tax filter--teacher">';
foreach ( $terms as $term ) :
echo '<input class="btn-radio" type="radio" name="categoryfilter2" value="' . $term->term_id . '"><label>' . $term->name . '</label>';
endforeach;
echo '</div>';
endif;
?>
<a href="#" class="filter-reset">View all</a>
<input type="hidden" name="action" value="myfilter">
</div>
</form>
<?php
$query_args = array(
'post_type' => 'workshop',
'posts_per_page' => -1,
'orderby' => 'date'
);
$the_query = new WP_Query( $query_args );
if ( $the_query->have_posts() ) :
?>
<div class="wrapper-loop">
<?php
while ( $the_query->have_posts() ) :
$the_query->the_post();
get_template_part( 'template-parts/content-archive' );
endwhile;
?>
</div><!-- .wrapper-loop -->
<?php
else :
get_template_part( 'template-parts/content', 'none' );
endif;
?>
The PHP code for the AJAX function to filter the posts:
<?php
add_action('wp_ajax_myfilter', 'site_filter_function');
add_action('wp_ajax_nopriv_myfilter', 'site_filter_function');
function site_filter_function(){
$args = array(
'orderby' => 'date',
'posts_per_page' => -1
);
if( isset( $_POST['categoryfilter1'] ) && isset ($_POST['categoryfilter2']) ) {
$args['tax_query'] = array(
'relation' => 'AND',
array(
'taxonomy' => 'group',
'field' => 'id',
'terms' => $_POST['categoryfilter1']
),
array(
'taxonomy' => 'teacher',
'field' => 'id',
'terms' => $_POST['categoryfilter2']
),
);
} else {
if( isset( $_POST['categoryfilter1']) && !empty( $_POST['categoryfilter2'] ) )
$args['tax_query'] = array(
'taxonomy' => 'group',
'field' => 'id',
'terms' => $_POST['categoryfilter1']
);
if( isset( $_POST['categoryfilter2']) && !empty( $_POST['categoryfilter1'] ) )
$args['tax_query'] =
array(
'taxonomy' => 'teacher',
'field' => 'id',
'terms' => $_POST['categoryfilter2']
);
}
$query = new WP_Query( $args );
if( $query->have_posts() ) :
while( $query->have_posts() ): $query->the_post();
get_template_part( 'template-parts/content-archive' );
endwhile;
wp_reset_postdata();
else :
echo 'No posts found';
endif;
die();
}
?>
The JS code the AJAX:
( function($) {
$('.btn-radio').change(function(){
var filter = $('#filter');
$.ajax({
url:filter.attr('action'),
data:filter.serialize(),
type:filter.attr('method'),
beforeSend:function(xhr){
//filter.find('button').text('Processing...');
},
success:function(data){
//filter.find('button').text('Filter');
$('.loop-archive-workshop').html(data);
}
});
return false;
});
$(".filter-reset").click(function() {
document.getElementById('filter').reset();
$('.loop-archive-workshop').append();
var filter = $('#filter');
$.ajax({
url:filter.attr('action'),
type:filter.attr('method'),
data:filter.serialize(),
success:function(data){
$('.wrapper-loop').html(data);
}
});
return false;
});
} )(jQuery);
I'm struggling with this issue for days. Any help would be much appreciated!
EDIT
This is the content from the log.txt when using the fitler:
Array
(
[categoryfilter1] => 7
[action] => myfilter
)
Array
(
[categoryfilter1] => 5
[action] => myfilter
)
Array
(
[categoryfilter1] => 4
[action] => myfilter
)
Array
(
[categoryfilter1] => 7
[action] => myfilter
)
Array
(
[categoryfilter1] => 7
[categoryfilter2] => 14
[action] => myfilter
)
Array
(
[categoryfilter1] => 7
[categoryfilter2] => 8
[action] => myfilter
)
Array
(
[categoryfilter1] => 7
[categoryfilter2] => 16
[action] => myfilter
)
!empty(are supposed to beempty(. Otherwise your 3 conditions are exactly the same. – Jacob Peattie Feb 19 at 11:09