Django ajax - проблема с отображением отфильтрованных товаров

Я пытаюсь реализовать фильтрацию на странице с помощью jquery AJAX. Все работало хорошо, пока не изменилась концепция отображения данных, и сейчас я хочу группировать отфильтрованные товары.

Я пытаюсь добиться чего-то вроде того, что показано на картинке ниже, чтобы всякий раз, когда кто-то будет фильтровать глобальный продукт(ы), он показывал название области, ниже название категории и ниже название продукта, который связан с этим фильтром.

При входе на страницу все отображается как положено. Проблема возникает, когда я пытаюсь что-то отфильтровать.

Я написал все функции и представления, но когда я выбираю флажок, он фильтрует только область, а не непосредственно товар. Как я могу исправить это, чтобы я мог фильтровать не только область, но и товар.

models.py

class Area(models.Model):
    title = models.CharField(max_length=75)

class Need(models.Model):
    title = models.CharField(max_length=75)
    need_area = models.ForeignKey(Area, on_delete=models.CASCADE, related_name='need_area')

class ProductCategory(models.Model):
    title = models.CharField(max_length=100)
    category_area = models.ForeignKey(Area, on_delete=models.CASCADE, related_name='category_area')
    category_need = models.ForeignKey(Need, on_delete=models.CASCADE, related_name='category_need')

class ProductType(models.Model):
    title = models.CharField(max_length=150)
    class Product(models.Model):
    title = models.CharField(max_length=400,)
    category = models.ForeignKey(ProductCategory, on_delete = models.CASCADE, blank=False, related_name='product')
    status = models.IntegerField(choices=STATUS, default=0)
    product_type = models.ManyToManyField(ProductType, related_name='product_type')

views.py

def filter_data(request):
    product_type = request.GET.getlist('product_type[]')
    product_list = Area.objects.prefetch_related(Prefetch("need_area", queryset=Need.objects.filter(category_need__product__isnull=False,category_need__product__status=1).distinct())).filter(need_area__category_need__product__isnull=False, need_area__category_need__product__status=1).distinct()
    if len(product_type) > 0:
        product_list = product_list.filter(need_area__category_need__product__product_type__title__in=product_list).distinct()

    context = {
        'areas': product_list,
    }
    ajax_template = render_to_string('product-list-ajax.html', context)
    
    return JsonResponse({'data': ajax_template})

product-list-ajax.html

<div class="results sticky-custom">
{% for area in areas %}
    <div class="border mb-4 pb-4 px-2">
    <h2 class="fw-bold my-2">{{area.title}}</h2>

        {% for need in area.need_area.all %}
            <h4 class="text-muted mt-4">{{need.title}}:</h4>

            {% for product_category in need.category_need.all %}

                {% for product in product_category.product.all %}
                    <a href="{{product.get_absolute_url}}" class="rounded-pill bg-hubble text-dark f-12 p-2 tag-extra-style">{{product.title}}</a>
                {% endfor %}
            
            {% endfor %}

        {% endfor %}

    </div>
{% endfor %}

функция jquery

$(document).ready(function(){
    $(".ajaxLoader").hide();

    $(".form-check-input").on('click', function(){
        var filterObj={};
        $(".form-check-input").each(function(index,ele){
            var filterVal=$(this).val();
            var filterKey=$(this).data('filter');
            filterObj[filterKey]=Array.from(document.querySelectorAll('input[data-filter='+filterKey+']:checked')).map(function(el){
                console.log(filterKey)
                console.log(filterObj)
                return el.value;
            });
        });
        
        $.ajax({
            url: 'filter-data',
            data: filterObj,
            dataType: 'json',
            beofreSend: function(){
                $(".ajaxLoader").show();
            },
            success: function(res){
                $("#filteredProducts").html(res.data);
                $(".ajaxLoader").hide();

                console.log(res)
            }
        });
    });
});

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