Django добавление в корзину не работает с вариациями продукта

Я создаю сайт электронной коммерции, на котором могут продаваться как продукты с вариациями, так и продукты без вариаций. У меня есть представление корзины, которое добавляет товар в корзину и создает экземпляр корзины, но теперь, когда я изменил его для товаров с вариациями, он не работает. Итак, если у товара есть вариации, например цвета и размеры, пользователи могут выбрать вариации, например красный и XL, и выбранные вариации отображаются в этом разделе product_detail.html:

                    <div id="selected-variations" class="mt-5">
                        <div class="text-title">Selected Variation:</div>
                        <div class="mt-3">
                            <span id="selected-color">Color: None</span> /
                            <span id="selected-size">Size: None</span>
                        </div>
                    </div>

Теперь я хочу взять оттуда выбранные значения вариаций и добавить товар в корзину с выбранными значениями. Но при этом js не работает, я думаю, что моя логика просмотра корзины в порядке. Вначале все казалось очень простым, так как я буквально печатаю выбранные значения вариаций от пользователя выше, просто должен был взять эти значения и создать экземпляр корзины с ними. Но теперь по какой-то причине мой код main.js не принимает их. Есть ли способ исправить это?

Мой models.py:

Мои представления product_detail и cartview:

My My urls.py:

    path('cart/', views.CartView.as_view(), name='cart'),
    path('cart/update_quantity/', views.CartView.as_view(), name='update_quantity'),
    path('cart/data/', views.CartView.as_view(), name='cart_data'),
    path('cart/add/', views.CartView.as_view(), name='add'),

Мой product_detail.html:

Мой main.js:

Теперь, когда я нажимаю кнопку добавления в корзину, моя консоль говорит:

Product ID from button: 9
main.js:500 
        
        
       POST http://127.0.0.1:8000/cart/ 400 (Bad Request)
addToCart @ main.js:500
(anonymous) @ main.js:596
main.js:520 Error: Error: Failed to add product to cart
    at main.js:510:15
(anonymous) @ main.js:520
Promise.catch (async)
addToCart @ main.js:520
(anonymous) @ main.js:596
main.js:500 
        
        
       POST http://127.0.0.1:8000/cart/ 400 (Bad Request)
addToCart @ main.js:500
(anonymous) @ main.js:681
main.js:520 Error: Error: Failed to add product to cart
    at main.js:510:15

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