Использование вызова Ajax для отправки критериев сортировки из шаблона в представление Django

Я хочу отправить критерий сортировки из шаблона Django в связанное представление и обновить шаблон без перезагрузки страницы. Понимаю, что Ajax вызов - это то, что нужно, но как мне это реализовать?

store.html

{% extends 'ecomsite/main.html' %}
{% load static %}

{% block content  %}

<select class="form-control" id="sort">
  <option value="default" selected="selected">Default</option>
  <option value="price-low">Price(lowest first)</option>
  <option value="product-name">Product Name</option>
</select>

<br>
<div class="row">
  {% for product in products %}
  <div class="col-lg-4">
   
    <img class="thumbail" src="{{product.imageURL}}">
    <div class="box-element-product">
      <h6><strong>{{product.name}}</strong></h6>
      <hr>
      <button data-product="{{product.id}}" data-action="add" class="btn btn-outline-primary add-btn update-cart">Add to Cart</button>
      <a href="{% url 'detail' product.id %}" class="btn btn-outline-info">View</a>
      <h5 style="display: inline-block; float: right"><strong>€{{product.price|floatformat:2}}</strong></h5>
    </div>
    <br>
  </div>
  {% endfor %}
</div>

{% endblock %}

views.py

def store(request):

    data = cartData(request)
    cartItems = data['cartItems']

    products = Product.objects.all()

    context = {'products':products, 'cartItems':cartItems}
    return render(request, 'ecomsite/store.html', context)

urls.py

from django.urls import path
from . import views

urlpatterns = [
    path('',views.store,name='store'),
    path('cart/',views.cart,name='cart'),
    path('checkout/',views.checkout,name='checkout'),
    path('update_item/',views.updateItem,name='update_item'),
    path('process_order/',views.processOrder,name='process_order'),
    path('getting_started/',views.HowtoView.as_view(),name='howto'),
    path('myorders/',views.order_list,name='list'),
    path('signup/',views.Signup.as_view(),name='signup'),
    path('thankyou/',views.thank_you,name='thank_you'),
    path('products/<int:id>/',views.product_detail,name='detail')

]

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