Неправильная фильтрация продуктов с помощью AJAX в Django

Я работаю над сайтом электронной коммерции, используя Django и jQuery для фильтрации товаров на основе выбранных критериев (диапазон цен, категории и продавцы). Хотя AJAX-запрос отправляется корректно и я получаю ответ, на странице все равно отображаются все товары, независимо от выбранных фильтров. Что я реализовал: Код JavaScript (AJAX):

$(document).ready(function() {
    function filterProducts() {
        let filter_object = {};

        // Get price range values
        let min_price = $("#price-min").val() || 0;
        let max_price = $("#price-max").val() || 9999999;

        filter_object.min_price = min_price;
        filter_object.max_price = max_price;

        // Get selected categories and vendors
        $(".filter-checkbox").each(function() {
            let filter_key = $(this).data("filter");
            filter_object[filter_key] = Array.from(
                document.querySelectorAll('input[data-filter=' + filter_key + ']:checked')
            ).map(function(element) {
                return element.value;
            });
        });

        // Send AJAX request to filter products
        $.ajax({
            url: '/filter-product',
            data: filter_object,
            dataType: 'json',
            beforeSend: function() {
                console.log("Filtering products...");
            },
            success: function(response) {
                console.log("Products filtered successfully.");
                $(".showcase").html(response.data);
            },
            error: function(xhr, status, error) {
                console.error("Error filtering products:", error);
            }
        });
    }

    // Event listener for checkbox and filter button
    $(".filter-checkbox, #filter-btn").on("click", filterProducts);
});

Структура HTML:

<div class="u-s-m-b-30">
    <div class="shop-w">
        <div class="shop-w__intro-wrap">
            <h1 class="shop-w__h">PRICE</h1>
            <span class="fas fa-minus shop-w__toggle" data-target="#s-price" data-toggle="collapse"></span>
        </div>
        <div class="shop-w__wrap collapse show" id="s-price">
            <form class="shop-w__form-p">
                <div class="shop-w__form-p-wrap">
                    <div>
                        <label for="price-min"></label>
                        <input class="input-text input-text--primary-style" type="text" id="price-min" placeholder="Min">
                    </div>
                    <div>
                        <label for="price-max"></label>
                        <input class="input-text input-text--primary-style" type="text" id="price-max" placeholder="Max">
                    </div>
                    <div>
                        <button class="btn btn--icon fas fa-angle-right btn--e-transparent-platinum-b-2" id="filter-btn" type="button"></button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>

<div class="u-s-m-b-30">
    <div class="shop-w">
        <div class="shop-w__intro-wrap">
            <h1 class="shop-w__h">MANUFACTURER</h1>
            <span class="fas fa-minus shop-w__toggle" data-target="#s-manufacturer" data-toggle="collapse"></span>
        </div>
        <div class="shop-w__wrap collapse show" id="s-manufacturer">
            <ul class="shop-w__list-2">
                {% for v in vendors %}
                <li>
                    <div class="list__content">
                        <input type="checkbox" name="vendor" data-filter="vendor" class="filter-checkbox" value="{{v.id}}">
                        <span>{{v.title}}</span>
                    </div>
                </li>
                {% endfor %}
            </ul>
        </div>
    </div>
</div>

Django Product Model:

class Product(models.Model):
    # Product fields...
    price = models.DecimalField(max_digits=10, decimal_places=2, default=1.99)
    # Other fields...

Django View to Handle Filtering:

def filter_product(request):
    categories = request.GET.getlist("category[]")
    vendors = request.GET.getlist("vendor[]")

    min_price = request.GET.get('min_price', 0)
    max_price = request.GET.get('max_price', 9999999)

    products = Product.objects.filter(product_status="published").order_by("-id").distinct()

    products = products.filter(price__gte=min_price)
    products = products.filter(price__lte=max_price)

    if categories:
        products = products.filter(category__id__in=categories).distinct()

    if vendors:
        products = products.filter(vendor__id__in=vendors).distinct()

    context = {
        "products": products
    }
    data = render_to_string("core/async/product-list.html", context)

    return JsonResponse({"data": data})

Текущий выпуск:

  1. Несмотря на получение AJAX-ответа со значением Products filtered successfully. все товары по-прежнему отображаются на странице независимо от примененных фильтров.

Что я пробовал:

  1. Убедились, что AJAX-запрос отправляет правильные параметры фильтра.
  2. Убедились, что логика представления Django правильно применяет фильтры.
  3. Убедились, что отфильтрованный HTML товара корректно отображается в ответе.

Вопросы:

  1. Какова может быть причина того, что все товары отображаются, несмотря на фильтры?
  2. Есть ли какие-либо советы по отладке или общие подводные камни, на которые я должен обратить внимание в своей реализации?

Спасибо за помощь!

Вернуться на верх