Как преобразовать кнопку AddToCart в кнопку с плюсом и минусом в Django

Я хочу преобразовать кнопку AddToCart в плюс & минус после добавления товара в корзину и преобразовать кнопку плюс & минус в AddToCart после удаления товара из корзины. Я сделал базовую корзину, но теперь я хочу сделать идеальную корзину, как Zomato, Dominos и многие другие сайты онлайн доставки еды.

А также обновлять корзину после увеличения и уменьшения количества.

А также хочу обновить корзину.

views.py

from django.shortcuts import render, redirect, HttpResponse, reverse
import json
from django.http import JsonResponse
from django.template.loader import render_to_string
from django.views import View
from onlinePizza.models import Product

def add_to_cart(request):
    cart_p={}
    cart_p[str(request.GET.get('id'))]={
        'title':request.GET.get('title'),
        'qty':request.GET.get('qty'),
        'price':request.GET.get('price'),
    }
    if 'cartdata' in request.session:
        if str(request.GET.get('id')) in request.session['cartdata']:
            cart_data=request.session['cartdata']
            cart_data[str(request.GET.get('id'))]['qty']=int(cart_p[str(request.GET.get('id'))['qty']])
            cart_data.update(cart_data)
            request.session['cartdata']=cart_data
        else:
            cart_data=request.session['cartdata']
            cart_data.update(cart_p)
            request.session['cartdata']=cart_data
    else:
        request.session['cartdata']=cart_p
    return JsonResponse({'data':request.session['cartdata'], 'totalitems':len(request.session['cartdata'])})


def delete_from_cart(request):
    p_Id=str(request.GET['id'])
    if 'cartdata' in request.session:
        if p_Id in request.session['cartdata']:
            cart_data=request.session['cartdata']
            del request.session['cartdata'][p_Id]
            request.session['cartdata']=cart_data
    total_amt=0
    for p_id,item in request.session['cartdata'].items():
        total_amt+=int(item['qty'])*float(item['price'])
    tamplate=render_to_string('cart/pc_cart.html', {"cart_data":request.session['cartdata'], 'totalitems':len(request.session['cartdata']),})
    return JsonResponse({'data':tamplate, 'totalitems':len(request.session['cartdata'])})

HTML для корзины:

<!-- CART -->
<div class="col-4" style="margin-top: 150px">
    <div class="position-fixed d-flex flex-column flex-shrink-0 p-3 border mb-5 " style="width: 380px; height: 380px; border-radius: 10px; box-shadow: 1px 1px 2px #000000; background-color: #ffff; overflow-y: scroll;">
        <a href="#" class="d-flex align-items-center mb-3 mb-md-0 me-md-auto text-white text-decoration-none">
            <h2 class="text-center">Your Basket</h2>
        </a>
        <hr>
        <table class="table">
            <thead>
                <tr>
                    <th scope="col">Item</th>
                    <th scope="col">Quantity</th>
                    <th scope="col">Total</th>
                    <th scope="col"></th>
                </tr>
            </thead>
            <tbody>
                {% for product_id,item in cart_data.items %}
                <tr>
                    <td>{{item.title}}</td>
                    <td>{{item.qty}}</td>
                    <td>₹ {% widthratio item.price 1 item.qty %}.0</td>
                    <td><button class="main-btn delete-item p-0" data-item="{{product_id}}"><i class="fa-solid fa-trash" style="color: red;"></i></button></td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
    {% if totalitems %}
    <div class="position-fixed" style="bottom:40px;">
        <a href="{% url 'Checkout' %}" class="main-btn" style="padding: 5px 0px;  width: 381px;">
            <span class="badge" style="font-size: 15px; background-color: #00a149; margin-right: 90px; margin-left: 9px; ">Item <span class="cartQty">{{totalitems}}</span> </span>
            Checkout
            <span class="" style="margin-left: 50px; margin-right: 9px;">₹ {{total_amt}}</span>
        </a>
    </div>
    {% endif %}
</div>
<!--//Cart-->

cart.js:

$(document).ready(function(){

    // AddToCart
    $(document).on('click', '.cart-btn',  function(){
        var _vm=$(this);
        var _index=_vm.attr('data-index')
        var _qty=$('.productQty-'+_index).val()
        var _productId=$('.product_id-'+_index).val()
        var _productTitle=$('.product_title-'+_index).val()
        var _productPrice=$('.product_price-'+_index).val()
        // Ajex
        $.ajax({
            url:'/cart/addtocart',
            data:{
                    'id':_productId,
                    'qty':_qty,
                    'title':_productTitle,
                    'price':_productPrice
                },
            dataType:'json',
            beforeSend:function(){
                _vm.attr('disabled', true);
            },
            success:function(res){
                $('.cartQty').text(res.totalitems)
                _vm.attr('disabled', false);
            },
        });
    });
    // End

    // Delete item from cart
    $(document).on('click', '.delete-item', function(){
        var _pId=$(this).attr('data-item');
        var _vm=$(this);
        // Ajex
        $.ajax({
            url:'/cart/deleteformcart',
            data:{
                    'id':_pId,
                },
            dataType:'json',
            beforeSend:function(){
                _vm.attr('disabled', true);
            },
            success:function(res){
                $('.cartQty').text(res.totalitems)
                _vm.attr('disabled', false);
                $('#cartlist').html(res.data)
            },
        });
    });
    // End

});

Надеюсь, этот код поможет ответить на мой вопрос.

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