Как сделать ajax фильтр по наличию товаров в woocommerce?

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

<?php
add_action('wp_ajax_filter_products', 'filter_products');
add_action('wp_ajax_nopriv_filter_products', 'filter_products');

function filter_products() {
    $args = array(
        'post_type' => 'product',
        'posts_per_page' => -1,
        'meta_query' => array(
            array(
                'key' => '_stock_status',
                'value' => 'instock'
            )
        )
    );

    $products = new WP_Query($args);

    if ($products->have_posts()) {
        while ($products->have_posts()) {
            $products->the_post();
            ?>
            <div class="product">
                <h2><?php the_title(); ?></h2>
                <?php the_post_thumbnail(); ?>
                <?php the_content(); ?>
            </div>
            <?php
        }
    } else {
        echo 'No products found.';
    }

    wp_reset_postdata();

    die();
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

<form id="filter-form">
    <label for="instock-checkbox">In Stock Only</label>
    <input type="checkbox" id="instock-checkbox">
    <input type="submit" value="Submit">
</form>

<div id="product-container"></div>

<script>
    jQuery(document).ready(function ($) {

        $('#filter-form').on('submit', function (e) {
            e.preventDefault();

            var isChecked = $('#instock-checkbox').prop('checked');

            $.ajax({
                url: "<?php echo admin_url('admin-ajax.php'); ?>",
                type: "POST",
                data: {
                    action: 'filter_products',
                    instock: isChecked
                },
                success: function (response) {
                    $('#product-container').html(response);
                }
            });
        });

    });
</script>