Я работал над чем-то похожим. И я использовал ajax, чтобы обновить количество. Я не очень хорошо объясняю вещи, но я пытался.
Получить количество уникального предмета, используя id = "amount {{item.id}}
<div style="flex:1">
<p id="quantity{{ item.id }}" class="align-content-center quantity">{{ item.quantity }}</p>
<div class="quantity_btns">
<img height="15" width="15" class="chg-quantity update_cart" data-product="{{ item.id }}" data-action="add" src="{% static 'images/arrow-up.png' %}">
<img height="15" width="15" class="chg-quantity update_cart" data-product="{{ item.id }}" data-action="remove" src="{% static 'images/arrow-down.png' %}">
</div>
</div>
И ниже это код ajax.
let update_cart = document.getElementsByClassName('update_cart');
for (var i = 0; i < update_cart.length; i++) {
update_cart[i].addEventListener('click', function() {
var data_action = $(this).data('action');
var product_id = $(this).data('product');
let quantity = document.getElementById('quantity' + product_id);
$.ajax({
url:'/test_add_cart_button',
data:{
'data_action':data_action,
'product_id':product_id,
},
success: function(data){
quantity.innerHTML = data.item_quantity;
}
});
});
}
Небольшое резюме приведенного выше кода. Мы получаем все элементы с классом update_cart. L oop через все элементы. Получить значение атрибута data-action который содержит действие добавления / удаления. Затем получите атрибут data-product (который содержит {{item.id}}). Получите количество продукта, используя getElementById ('amount' + product_id). Где будет извлечен product_id из продукта данных. Затем в ajax мы отправляем значение, которое мы захватили в ключе, чтобы отправить его нашему представлению.
def test_add_cart_button(request):
clicked = request.GET.get('data_action')
product_id = request.GET.get('product_id')
item = CartItem.objects.get(id=product_id, user=request.user)
if clicked == 'add':
item.quantity += 1
item.save()
elif clicked == 'remove':
item.quantity -= 1
if item.quantity <= 0:
remove_from_cart(request, item.id)
return JsonResponse({'item_quantity':item.quantity,}, safe=False)
С ключами data_action и product_id. Мы можем использовать их в нашем просмотр по request.GET.get ('data_action') и request.GET.get ('product').