Вызов 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')

]

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