javascript - 重新加载后的项目以不同的顺序显示 Django

问题描述

嗨，我已经制作了 django 网上商店，并且有一个小而烦人的错误。如果我在重新加载后在我的购物车项目中添加点击添加数量，请注意这仅在用户未通过身份验证时发生 这里是简短的 gif 以帮助您了解我的问题 在用户进行身份验证并在来宾用户上正常工作时无法正常工作

购物车.js

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


function addCookieItem(productId,action){
    if(action == "add"){
        if(cart[productId] === undefined){
            cart[productId] = {'quantity':1}
        }else{
            cart[productId]['quantity'] += 1
        }
    }
    if (action == "remove" || action =="delete"){
        cart[productId]['quantity'] -= 1
        if(cart[productId]['quantity'] <= 0){
            delete cart[productId]
        }
    }
    document.cookie = 'cart=' + JSON.stringify(cart) + ";domain=;path=/"
    history.go(0)
}



function updateUserOrder(productId, action){
    var url = 'http://127.0.0.1:8000/updateItem'
    fetch(url, {
        method:'POST',
        headers:{
            'Content-Type': 'application/json',
            'X-CSRFToken':csrftoken,
        },
        body:JSON.stringify({'productId':productId, 'action':action})
    })
    .then((response) =>{
        return response.json()
    })
    .then((data) =>{
        console.log(data)
        history.go(0)
    })
}

html

<div class="row no-gutters">
    <div class="col-4">
        <div class="controlQtyCart">
            <i data-product="{{ x.product.id  }}" data-action="remove" class="fas fa-minus  update-cart updatePointer"></i>
        </div>
    </div>
    <div class="col-4">
        <div class="controlQtyCart">
           &nbsp;{{x.quantity}}
        </div>
    </div>
    <div class="col-4">
        <div class="controlQtyCart">
            <i data-product="{{ x.product.id  }}" data-action="add"  class="fas fa-plus  update-cart updatePointer"></i>
        </div>
    </div>
</div>

更新项目功能

def updateItem(request):
    data = json.loads(request.body)
    productId = data['productId']
    action = data['action']
    customer = request.user.customer
    product  = Product.objects.get(id=productId)
    order, created = Order.objects.get_or_create(customer=customer,complete=False)
    orderItem, created = OrderItem.objects.get_or_create(order=order, product=product)

    if action == "add":
        orderItem.quantity = (orderItem.quantity + 1)
    elif action == "remove":
        orderItem.quantity = (orderItem.quantity - 1)
    orderItem.save()
    
    if orderItem.quantity <= 0 or action=='delete':
        orderItem.delete()

    return JsonResponse("item was added", safe=False)

在调用时呈现购物车项目的函数

def usersCart(request):
    if request.user.is_authenticated:
        customer = request.user.customer
        order, created = Order.objects.get_or_create(customer=customer, complete=False)
        items = order.orderitem_set.all()
        context ={
        'items':items,
        'orders':order,
        }

    else:
        try:
            cart  = json.loads(request.COOKIES['cart'])
        except:
            cart = {}
        order = {'get_cart_total':0,} 
        items = []
        for i in cart:
            product = Product.objects.get(id=i)
            if product.priceNormal is None:
                total = (product.priceNormal * cart[i]['quantity'])
            else:
                total = (product.pricePromo  * cart[i]['quantity'])
            order['get_cart_total'] += total
            item = {
                'product':{
                    'id':product.id,
                    'recommend':product.recommend,
                    'title':product.title,
                    'condition ':product.condition,
                    'title':product.title,
                    'priceNormal':product.priceNormal,
                    'pricePromo':product.pricePromo,
                    'description':product.description,
                    'category':product.category,
                    'tags':product.tags,
                    'pic1':product.pic1,
                    'pic2':product.pic2,
                    'pic3':product.pic3,
                    'pic4':product.pic4,
                },
                'get_total':total,
                'quantity':cart[i]['quantity']
            }
            items.append(item)
    context ={
        'items':items,
        'orders':order,
    }
    return context

我知道这很多，所以如果有人可以帮助我，我可以给你买 4 包选定的物质

标签： javascriptpythondjango

javascript - 重新加载后的项目以不同的顺序显示 Django

问题描述

解决方案

推荐阅读