Фильтр категорий товаров Django + Ajax

Есть несколько категорий товаров. При нажатии на кнопку какой-либо категории, вывод сопутствующих данной категории товаров отображается на ура. Но при этом постоянно перезагружается страница. Простыми слова, хотелось бы, чтобы вывод по каждой категории (при клике на кнопку с категорией), выводил список товаров по данной категории без перезагрузки страницы. Знаю, что в этом мне поможет Ajax запрос, но я не могу его сформировать правильно. Я пробовал адаптировать к своей ситуации несколько вариантов, которые я нашел на просторе интернета, но не совсем понимаю как это работает. Прилагаю фрагменты моего кода.

list.html

<section class="items-list">
    <div class="items-list__items-menu">
        {% for c in categories %}
        <div class="items-list__item">
            <a href="{{ c.get_absolute_url }}" role="button" class="{% if category.slug == c.slug %} active {% endif %} button button--items-menu">{{ c.name }}</a>
        </div>
        {% endfor %}
    </div>
    <div class="container-fluid items-list__items-for-rent">
        <div class="container">
            <div class="row">
                {% for product in products %}
                {% if product.available == True %}
                {% if  product.category.slug == "shatry" %}
                {% for product_image in product.images.all %}
                {% if forloop.first %}
                <div class="col-md-6 items-list__one-item">
                    <a href="{{ product.get_absolute_url }}">
                        <img src="{{ product_image.image.url }}" alt="{{ product.name }}" class="items-list__one-item-img">
                    </a>
                    <div class="items-list__one-item-description">
                        <div class="items-list__one-item-name">
                            <p><img src="{{ '../media/img/svg/Minus.svg' }}" alt=""> <a href="{{ product.get_absolute_url }}">{{ product.name }} м.</a></p>
                        </div>
                        <div class="items-list__one-item-price">
                            <h3><span class="grey-bg">{{ product.price }} РУБ.</span></h3>
                        </div>
                    </div>
                </div>
                {% endif %}
                {% endfor %}
                {% endif %}
                {% endif %}
                {% endfor %} 
            </div>
            <div class="row">
                {% for product in products %}
                {% if product.available == True %}
                {% if  product.category.slug != "shatry" %}
                {% for product_image in product.images.all %}
                {% if forloop.first %}
                <div class="col-md-6 items-list__one-item">
                        <img src="{{ product_image.image.url }}" alt="{{ product.name }}" class="items-list__one-item-img">
                    <div class="items-list__one-item-description">
                        <div class="items-list__one-item-name">
                            <p><img src="{{ '../media/img/svg/Minus.svg' }}" alt=""> {{ product.name }}</p>
                        </div>
                        <div class="items-list__one-item-price">
                            <h3><span class="grey-bg">{{ product.price }} РУБ.</span></h3>
                        </div>
                    </div>
                </div>
                {% endif %}
                {% endfor %}
                {% endif %}
                {% endif %}
                {% endfor %} 
            </div>
        </div>
    </div>
</section>

views.py

def product_list(request, category_slug=None):
category = None
categories = Category.objects.all()
examples = Examples.objects.all()
products = Product.objects.filter(category__slug="shatry", available=True)    
if category_slug:
    category = get_object_or_404(Category, slug=category_slug)
    products = Product.objects.filter(category=category)
return render(request, 'main/list.html', {'category': category, 'categories': categories, 'products': products, 'product_list': 'active', 'examples': examples})

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