basically as the title states, I am trying to output data into an Elementor Loop grid widget, using the infinite scroll pagination setting, however whenever I select an option that has only 1 post, the loop displays random posts, instead of just displaying the 1 post. I tried changing the pagination to Next/Previous, however no luck, I can still browse through posts that shouldn’t be loaded… Any idea or assistance would be greatly appreciated. Thanks.
this is my filter_posts function as well as the AJAX request.
function filter_posts() {
$search_query = isset($_POST['search_query']) ? sanitize_text_field($_POST['search_query']) : '';
$discount = isset($_POST['discount']) ? sanitize_text_field($_POST['discount']) : '';
$status = isset($_POST['status']) ? sanitize_text_field($_POST['status']) : '';
$category = isset($_POST['category']) ? sanitize_text_field($_POST['category']) : '';
$store = isset($_POST['store']) ? sanitize_text_field($_POST['store']) : '';
$args = [
'post_type' => 'post',
's' => $search_query,
'posts_per_page' => 4,
'orderby' => 'date',
'order' => 'desc',
'tax_query' => [
'relation' => 'AND',
]
];
// Category filter
if (!empty($category)) {
$args['tax_query'][] = [
'taxonomy' => 'product_categories',
'field' => 'slug',
'terms' => $category
];
}
// Status filter
if (!empty($status)) {
$args['tax_query'][] = [
'taxonomy' => 'category',
'field' => 'slug',
'terms' => $status
];
}
// Store filter
if (!empty($store)) {
$args['tax_query'][] = [
'taxonomy' => 'store_type',
'field' => 'slug',
'terms' => $store
];
}
// Discount filter
if (!empty($discount)) {
$tags_to_include = [];
switch ($discount) {
case '20-off':
$tags_to_include = ['20-off', '30-off', '40-off'];
break;
case '40-off':
$tags_to_include = ['40-off', '50-off', '60-off'];
break;
case '60-off':
$tags_to_include = ['60-off', '70-off', '80-off'];
break;
}
$args['tag_slug__in'] = $tags_to_include;
}
$query = new WP_Query($args);
// error_log('WP_Query SQL: ' . $query->request);
ob_start();
if ($query->have_posts()) {
while ($query->have_posts()) {
$query->the_post();
echo do_shortcode('[elementor-template id="56168"]');
}
} else {
echo '<p>No posts found.</p>';
}
$content = ob_get_clean();
wp_reset_postdata();
wp_send_json_success($content);
die();
}
AJAX request.
jQuery(document).ready(function($) {
function filterPosts() {
var searchQuery = $('.search-input').val();
var discount = $('input[type="checkbox"][name="discount"]:checked').val();
var status = $('input[type="checkbox"][name="status"]:checked').val();
var categorySlug = $('.cat-list_item.active').data('slug');
var store = $('input[type="checkbox"][name="store"]:checked').val();
$.ajax({
url: '/wp-admin/admin-ajax.php',
type: 'POST',
dataType: 'json',
data: {
action: 'filter_posts',
search_query: searchQuery,
discount: discount,
status: status,
category: categorySlug,
store: store
},
success: function(response) {
$('.elementor-loop-container').html(response.data);
},
error: function(error) {
console.log(error);
}
});
}
$('.searchandfilter input[type="checkbox"], .searchandfilter input[type="text"], .searchandfilter select').on('change', filterPosts);
$('.cat-list_item').on('click', function() {
$(this).addClass('active').siblings().removeClass('active');
filterPosts();
});
$('.searchandfilter').on('submit', function(e) {
e.preventDefault();
filterPosts();
});
});