Как показать стоимость корзины в реальном времени без перезагрузки страницы

как мне показать значение корзины в реальном времени, когда кто-то добавляет что-то в корзину без перезагрузки страницы, моя функция уже обрабатывает логику, за исключением того, что она должна перезагружаться, я пытаюсь заменить location.reload() в моей функции javascript на что-то, что просто покажет {{cartItems}} значение реального времени на nav без перезагрузки страницы, когда кто-то нажимает кнопку "add-to-cart", прямо сейчас все должно перезагружаться, чтобы работать. Буду очень признателен, если кто-нибудь сможет помочь, thx!

views.py

def shop(request):
    data = cartData(request)
    cartItems = data['cartItems']
    products = Product.objects.all()
    context = {"products": products, "cartItems": cartItems}


#the nav is able to access home context
def home(request):
    data = cartData(request)
    cartItems = data['cartItems']
    context = {"cartItems": cartItems}

cart.js

var updateBtns = document.getElementsByClassName('update-cart')
for(var i=0; i < updateBtns.length; i++){
    updateBtns[i].addEventListener('click', function(){
        var productId = this.dataset.product
        var action = this.dataset.action
        console.log('productId:', productId, 'action:', action)
        console.log('USER:', user)
        if(user === 'AnonymousUser'){
            addCookieItem(productId, action)
        }else{
            updateUserOrder(productId, action)
        }
    })
}

function addCookieItem(productId, action){
    console.log('User is not authenticated')
    if (action == 'add'){
        if (cart[productId] == undefined){
        cart[productId] = {'quantity':1}
        }else{
            cart[productId]['quantity'] += 1
        }
    }
    if (action == 'remove'){
        cart[productId]['quantity'] -= 1

        if (cart[productId]['quantity'] <= 0){
            console.log('Item should be deleted')
            delete cart[productId];
        }
    }
    console.log('CART:', cart)
    document.cookie ='cart=' + JSON.stringify(cart) + ";domain=;path=/"

    location.reload()

    /*replace location.reload()*/

}

шаблон

{% for product in products %}
<div class="shop-card">
    <a href="{{product.slug}}">
        <div class="image-card-wrapper">
            <img id="store-cart-img" src="{{ product.image_URL }}">
        </div>

        <div class="card-shop-info">
            <p>{{product.name}}</p>
            <p id="styleb">${{product.final_price | floatformat:2}} | <a data-product="{{product.id}}" data-action="add" class="add-to-cart-action update-cart">Add to cart</a></p>
        </div>
    </a>
</div>
{% endfor %}

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