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

Пользователь

от brenna , в категории: PHP , 5 месяцев назад

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

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

1 ответ

Пользователь

от stanford_mosciski , 5 месяцев назад

@brenna 

Для создания ajax фильтра по наличию товаров в WooCommerce вам потребуется некоторое программное обеспечение и код. Ниже приведен пример кода, который позволяет фильтровать товары по наличию с использованием jQuery ajax и функций WooCommerce:

  1. В вашей теме WordPress создайте новый файл с названием "ajax-filter.php" и добавьте в него следующий код:
 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. Создайте страницу 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
<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>


  1. Вставьте эту страницу в вашу тему WordPress, где вы хотите отобразить фильтр и список товаров.


При отправке формы через AJAX будет запускаться функция filter_products(), которая будет выполнять запрос к базе данных WordPress и отображать товары, у которых есть наличие, или сообщение "No products found.", если таких товаров нет.


Убедитесь, что код настроен и расположен в правильных файлах и папках вашей темы.