Какова наилучшая практика работы с кнопками в Djnago?

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

В настоящее время я делаю образец интернет-магазина на Django в качестве моего первого проекта, чтобы я мог изучить фреймворк.

У каждого товара на странице будет кнопка для добавления товара в корзину зарегистрированного пользователя.

Нужно ли мне сделать каждую кнопку в виде формы, или обрабатывать кнопки с помощью JS и получать API. Я не преминул заметить, что Django сильно полагается на формы как стандартный способ получения пользовательского ввода, но делать так много сгенерированных форм на одной странице (товары будут в виде списка) просто не кажется правильным

Я думал о решении следующим образом:

document.querySelectorAll('.add_product').forEach(e => {
    e.addEventListener('click', e =>
    // POST request (with crsf cookie and all)
    // redirecting the user, depending on the output
    )
})

Просто получить все кнопки, получить data-pk из <button>, и отправить его с помощью JS Fetch API как POST запрос в конечную точку Django. Мне не нравится то, что я вижу потенциальные проблемы CORS, и я не знаю, правильно ли это, просто обходить CORS, когда вам кажется, что это удобно (безопасность не является одной из моих сильных сторон. Одна из причин использовать Django).

Вторая проблема, которую я вижу в моем подходе, заключается в том, что перенаправление с помощью JS кажется мне грязным, в то время как 90% этого обрабатывается HttpResponses в Django.

Если кому-то это будет полезно, вот как я отправляю данные о товаре в JS (переменная items - это сериализованный QuerySet из стандартной SQLite3 базы данных Django). Я делаю это таким образом, вместо обычного шаблона SSR, потому что я планирую добавить фильтры товаров, и я не хочу обновлять страницу, когда кто-то меняет фильтр или категорию

let data = {{items | safe}}; // THIS ONE LINE IS IN THE <script> TAG IN THE TEMPLATE
data.forEach(e => {
    output +=
        `<div class="product">${e.fields.item_name}>
        <button  data-pk="${e.pk}" class="add_product">
            add to cart
        </button>
    </div>`
});

Зависит от того, как настроены ваши модели, но вам не нужна форма для отображения каждого товара и последующего добавления в корзину, вы можете добавить функцию к вашей модели товаров, как это:

def add_to_cart_url(self):
        return reverse("add-to-cart", kwargs={"slug": self.slug})

которая вызывает функцию, добавляющую товар в вашу модель "order items", если у вас такая архитектура.

Я предлагаю вам посмотреть это видео, часть, где он добавляет и удаляет товары в корзину: https://www.youtube.com/watch?v=z4USlooVXG0

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