Как отправть js localStorage в django form?

Question

[Илья]

У меня есть корзина на js:

spoiler

function addItem() {
	const addItemBtn = document.getElementById("add_item");
	var itemId = addItemBtn.getAttribute("data-id");
	var itemTi = document.getElementById("itemTitle").textContent;
	var itemPr = document.getElementById("itemPrice").textContent;
	const cart = JSON.parse(localStorage.getItem('cart')) || [];
	const newItem = { id: itemId, name: itemTi, price: itemPr, quantity: 1 };
	cart.push(newItem);
	localStorage.setItem('cart', JSON.stringify(cart));
	displayCart();
}

function displayCart() {
	const cart = JSON.parse(localStorage.getItem('cart')) || [];
	const cartItemsElement = document.getElementById('cart_content');
	cartItemsElement.innerHTML = '';

	cart.forEach(item => {
		const listItem = document.createElement('div');
		listItem.className = "listItem";

		const itemID = document.createElement('div');
		itemID.className = "itemID";
		itemID.innerHTML = `${item.id}`

		const itemTitle = document.createElement('div');
		itemTitle.className = "itemTitle";
		itemTitle.innerHTML = `${item.name}`

		const itemPrice = document.createElement('div');
		itemPrice.className = "itemPrice";
		itemPrice.innerHTML = `${item.price}`

		const increaseButton = document.createElement('button');
		increaseButton.className = "itemCount";
		increaseButton.addEventListener('click', () => increaseQuantity(item.id));
		const increaseButtonImg = document.createElement('img');
		increaseButtonImg.className = "increaseButtonImg"
		increaseButtonImg.src = ("/static/img/add.png")

		const quantityItem = document.createElement('div');
		quantityItem.className = "itemQuantity";
		quantityItem.innerHTML = `${item.quantity}`;

		const decreaseButton = document.createElement('button');
		decreaseButton.className = "itemCount";
		decreaseButton.addEventListener('click', () => decreaseQuantity(item.id));
		const decreaseButtonImg = document.createElement('img');
		decreaseButtonImg.className = "decreaseButtonImg"
		decreaseButtonImg.src = ("/static/img/minus.png")

		const deleteButton = document.createElement('button');
		deleteButton.className = "deleteButton";
		deleteButton.addEventListener('click', () => deleteItem(item.id));
		const deleteButtonImg = document.createElement('img');
		deleteButtonImg.className = "deleteButtonImg"
		deleteButtonImg.src = ("/static/img/delete.png")


		increaseButton.appendChild(increaseButtonImg)
		decreaseButton.appendChild(decreaseButtonImg)
		deleteButton.appendChild(deleteButtonImg)

		listItem.appendChild(itemID)
		listItem.appendChild(itemTitle)
		listItem.appendChild(itemPrice)
		listItem.appendChild(increaseButton);
		listItem.appendChild(quantityItem)
		listItem.appendChild(decreaseButton);
		listItem.appendChild(deleteButton);

		cartItemsElement.appendChild(listItem);
	});
}

function increaseQuantity(itemId) {
	const cart = JSON.parse(localStorage.getItem('cart')) || [];
	const itemIndex = cart.findIndex(item => item.id === itemId);

	if (itemIndex !== -1) {
		cart[itemIndex].quantity++;
		localStorage.setItem('cart', JSON.stringify(cart));
		displayCart();
	}
}

function decreaseQuantity(itemId) {
	const cart = JSON.parse(localStorage.getItem('cart')) || [];
	const itemIndex = cart.findIndex(item => item.id === itemId);

	if (itemIndex !== -1 && cart[itemIndex].quantity > 1) {
		cart[itemIndex].quantity--;
		localStorage.setItem('cart', JSON.stringify(cart));
		displayCart();
	}
}

function deleteItem(itemId) {
	const cart = JSON.parse(localStorage.getItem('cart')) || [];
	const updatedCart = cart.filter(item => item.id !== itemId);
	localStorage.setItem('cart', JSON.stringify(updatedCart));
	displayCart();
}

function clearCart() {
	localStorage.removeItem('cart')
	displayCart();
}
displayCart();

Её нужно отправить вместе с формой:

spoiler

<form action="" method="post" novalidate>
	{% csrf_token %}
	<p class="form_item">Доставка: {{ form.delivery }} <span>*</span></p>
	<p class="form_item">Оплата: {{ form.payment }}<span>*</span></p>
	<p class="form_item">Имя: {{ form.name }}<span>*</span></p>
	<p class="form_item">Фамилия: {{ form.surname }}<span>*</span></p>
	<p class="form_item">Телефон: {{ form.telephone }}<span>*</span></p>
	<p class="form_item">Email:{{ form.email }}</p>
	<input class="form_item submit" type="submit"></input>
</form>

vievs.py

def purchase(request):
    if request.method == 'POST':
        form = PurchaseForm(request.POST)
        if form.is_valid():
            delivery = form.cleaned_data.get('delivery'),
            payment = form.cleaned_data.get('payment'),
            name = form.cleaned_data.get('name'),
            surname = form.cleaned_data.get('surname'),
            telephone = form.cleaned_data.get('telephone'),
            email = form.cleaned_data.get('email'),
            purchase = Product.objects.create(delivery=delivery, payment=payment, name=name,
                                         surname=surname, telephone=telephone, email=email)
            purchase.save()
            return redirect('home')
    else:
        form = PurchaseForm()
    return render(request, 'main/form.html', {'form': form})

forms.py

class PurchaseForm(forms.Form):
    DELIVERY = [
        ("NP", "Нова пошта"),
        ("PP", "Самовивіз"),
    ]
    PAYMENT = [
        ("CD", "накладений платіж"),
        ("PT", "Повна предоплата")
    ]
    delivery = forms.ChoiceField(label="Доставка", choices=DELIVERY)
    payment = forms.ChoiceField(label="Оплата", choices=PAYMENT)
    name = forms.CharField(label="Ім'я", max_length=25)
    surname = forms.CharField(label="Прізвище", max_length=25)
    telephone = PhoneNumberField(help_text="+380", region="UA", max_length=13)
    email = forms.EmailField(label="Email", max_length=50, required=False)

Answer 1

[chemdev]

Я бы предложил рассмотреть другой вариант хранения как минимум чтобы обеспечить юзеру доступ к своей корзине с разных устройств, ну а в случае с localStorage есть документация javascript как с ним работать. Тебе нужно написать код на js который создаст инпуты для айтемов из корзины (скрытые/не скрытые тебе решать)

Comments

[Илья]

спасибо