Продукты Django не сразу добавляются в корзину

Я пытаюсь создать сайт электронной коммерции на Django, где есть модальная корзина, которая всплывает, когда я пытаюсь добавить любой продукт, нажав кнопку "Добавить в корзину".

В то время как продукт добавляется правильно в бэкенде (что я могу проверить, зайдя в админ-панель), продукт просто не отображается сразу в модале корзины, что необходимо для того, чтобы сайт выглядел хорошо. Только когда я обновляю страницу, продукт появляется в модале. Застрял на этом в течение последних 3 дней, не знаю, что делать. Может ли кто-нибудь помочь мне здесь? Спасибо!

Моя модель корзины: 


class Cart(models.Model):
    user = models.ForeignKey(CustomUser, on_delete=models.CASCADE, related_name='cart')
    product = models.ForeignKey(Product, on_delete=models.CASCADE)
    quantity = models.PositiveIntegerField(default=1)
    created_at = models.DateTimeField(auto_now_add=True)
    updated_at = models.DateTimeField(auto_now=True)

    def __str__(self):
        return f"{self.user.username} - {self.product.name}"

Мой views.py:

Мой urls.py:


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

Модальная корзина в моем файле base.html:

                    <div class="list-product px-6">
                        {% for item in cart_items %}
                        <div data-item="2" class="item py-5 flex items-center justify-between gap-3 border-b border-line">
                        <div class="infor flex items-center gap-3 w-full">
                            <div class="bg-img w-[100px] aspect-square flex-shrink-0 rounded-lg overflow-hidden">
                                <img style="height: 130px" src="{{ item.product.image.url }}" alt="product" class="w-full h-full">
                            </div>
                            <div class="w-full">
                                <div class="flex items-center justify-between w-full">
                                    <div class="name text-button">{{ item.product.name }}</div>
                                    <div class="remove-cart-btn remove-btn caption1 font-semibold text-red underline cursor-pointer">
                                        Remove
                                    </div>
                                </div>
                                <div class="flex items-center justify-between gap-2 mt-3 w-full">
                                    <div class="flex items-center text-secondary2 capitalize">
                                        XS/white
                                    </div>
                                    <div class="product-price text-title">${{ item.product.price }}</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    {% endfor %}

Модальная корзина в моем main.js:

Примечание:

Вот мои консольные отладочные заявления:

Product ID from button: 4
main.js:496 Product ID: 4
main.js:514 Product added successfully: {success: true, items: Array(1), subtotal: '597.00'}
main.js:587 Updating cart modal content...
main.js:608 Error fetching cart data: SyntaxError: Unexpected token '<', "

<!DOCTYPE "... is not valid JSON

Вот мои отладочные сообщения в терминале:

Received product_id: 4
Returning updated cart data as JSON response

Отладочные сообщения из метода get_cart_data в моем представлении корзины не выводятся в терминал.

После "Cart data fetched" остальная часть подпрограммы выполняется до:

subtotalElement.textContent

При вызове этого фрагмента кода вы видите:

const subtotalElement = document.querySelector('.total-cart');

Веб-движок JavaScript сканирует DOM в поисках Element с именем класса "total-cart". Поскольку такого Element в DOM в данный момент не существует, результатом сканирования является null. Отсюда ошибка:

Невозможно установить свойства null (установка 'textContent')

Поскольку Element не существует и, вероятно, не будет существовать, не полагайтесь на него. Попробуйте альтернативу, например:

const subtotalElement = document.createElement("div");
cartItemsContainer.after(subtotalElement);

В этом варианте в DOM динамически создается фактический Element, который помещается сразу после уже существующего Element, чтобы он использовался для отображения повторно найденных данных. Теперь в DOM появятся повторно найденные данные.

Редактирование

Из недавней правки следует, что запрос был для Element с именем класса "total-price", а не "total-cart". Поскольку это была простая опечатка, вот столь необходимая незначительная правка кода:

const subtotalElement = document.querySelector('.total-price');

У вас на странице более одного элемента .list-product.

Используйте более конкретный селектор, как в случае с closeCartIcon и continueCartIcon:

//const cartItemsContainer = document.querySelector('.list-product');
const cartItemsContainer = document.querySelector('.modal-cart-main .list-product');
Вернуться на верх