Неправильная фильтрация продуктов с помощью 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})
Текущий выпуск:
- Несмотря на получение AJAX-ответа со значением
Products filtered successfully
. все товары по-прежнему отображаются на странице независимо от примененных фильтров.
Что я пробовал:
- Убедились, что AJAX-запрос отправляет правильные параметры фильтра.
- Убедились, что логика представления Django правильно применяет фильтры.
- Убедились, что отфильтрованный HTML товара корректно отображается в ответе.
Вопросы:
- Какова может быть причина того, что все товары отображаются, несмотря на фильтры?
- Есть ли какие-либо советы по отладке или общие подводные камни, на которые я должен обратить внимание в своей реализации?
Спасибо за помощь!