Вызов Ajax для обновления критериев сортировки списка товаров в шаблоне Django
Я пытаюсь сделать вызов Ajax для обновления критериев сортировки списка товаров, который отображается на странице магазина, в зависимости от выпадающего варианта.
Шаблон страницы магазина расширяется от основного шаблона. Однако, сортировка не работает.
Я взял на себя смелость удалить все представления, которые не относятся к вопросу, кроме представления страницы магазина, которое получает вызов ajax. Я задаюсь вопросом, нет ли здесь конфликта, поскольку страница магазина также получает общую сумму корзины с фронт-энда через функцию CartData.
Любое понимание было бы полезным.
<store.html
{% extends 'ecomsite/main.html' %}
{% load static %}
{% block content %}
<select onchange="sort()" 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">
<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>
<script type="text/javascript">
function sort()
{
var sortId = $('#sort').val()
$.ajax({
type: 'POST',
headers:{
'X-CSRFToken':csrftoken,
},
url: $(this).data('url'),
datatype:'json',
data: {'sortId':sortId}
}).done(function(data){
$('.product-wrapper').html(data.sort_by_choice);
});
}
</script>
{% endblock %}
views.py
from django.shortcuts import render
from django.http import JsonResponse
from django.template.loader import render_to_string
import json
import datetime as dt
from .models import *
from .utils import cookieCart,cartData,guestOrder
from django.contrib.auth.decorators import login_required
from django.views.generic import TemplateView,CreateView
from . import forms
from django.urls import reverse_lazy
def store(request):
data = cartData(request)
cartItems = data['cartItems']
products = Product.objects.all()
if request.is_ajax() or request.method == 'POST':
sort_parameter = request.POST.get('sortId')
if sort_parameter == 'default':
products = products.order_by('id')
elif sort_parameter == 'price-low':
products = products.order_by('-price')
elif sort_parameter == 'name':
products = products.order_by('name')
products = render_to_string(template_name='store.html',context={'products':products})
json_sort = {"sort_by_choice":products}
return JsonResponse(data=json_sort, safe=False)
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')
]