Custom AJAX filtering logic and outputting results into an Elementor Loop Grid widget

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();
    });

});
Sponsor our Newsletter | Privacy Policy | Terms of Service