首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >如何在不重新加载页面(js和django)的情况下添加到购物车?

如何在不重新加载页面(js和django)的情况下添加到购物车?
EN

Stack Overflow用户
提问于 2022-03-19 08:01:54
回答 1查看 434关注 0票数 0

我让这添加到购物车的功能,我想显示新的购物车总数后,添加到购物车,而不重新加载页面。现在,我需要重新加载页面,以显示添加了产品后的购物车更改。

(有些代码可以是丹麦语,希望可以。)

HTML (添加到购物车按钮)

代码语言:javascript
运行
复制
<div class="buy-item flex flex-ai-c">
            <button data-product="{{product.id}}" data-action="add" class="add-button add-btn update-cart">TILFØJ TIL KURV</button>
            <div class="flex flex-ai-c flex-jc-c">
                <span class="cart-quantity-text">ANTAL</span>
                <input class="cart-quantity-input" type="number" value="1">
            </div>
        </div>

JS

代码语言:javascript
运行
复制
function addCookieItem(productId, action) {

if(action == 'add'){
    if(cart[productId] == undefined){
        cart[productId] = {'quantity':parseInt(antal.value)}
    }else{
        cart[productId]['quantity'] += parseInt(antal.value)
    }
}

if(action == 'add-from-cart'){
        cart[productId]['quantity'] += 1
}

if(action == 'remove-from-cart'){
    cart[productId]['quantity'] -= 1

    if(cart[productId]['quantity'] <= 0){
        console.log('Remove Item')
        delete cart[productId]
    }
}

if(action == 'delete'){
    delete cart[productId]
}
console.log('Cart:', cart)
document.cookie = 'cart=' + JSON.stringify(cart) + ";domain=;path=/"
location.reload()
}

姜戈

代码语言:javascript
运行
复制
def cookieCart(request):

try:
    cart = json.loads(request.COOKIES['cart'])
except:
    cart = {}

print('Cart:', cart)
items = []
order = {'get_cart_total':0, 'get_cart_items':0}
cartItems = order['get_cart_items']

for i in cart:
    try:
        cartItems += cart[i]['quantity']

        product = Product.objects.get(id=i)
        total = (product.price * cart[i]['quantity'])

        order['get_cart_total'] += total
        order['get_cart_items'] += cart[i]['quantity']

        item = {
            'product':{
                'id':product.id,
                'name':product.name,
                'price':product.price,
                'imageURL': product.imageURL,
                'stripe-price': product.stripe_price_id,
                'description': product.description,
                'vare_nr': product.vare_nr,
            },
            'quantity': cart[i]['quantity'],
            'get_total': total
        }
        items.append(item)

    except:
        pass
return {'cartItems': cartItems, 'order': order, 'items':items}

def cartData(request):

cookieData = cookieCart(request)
cartItems = cookieData['cartItems']
order = cookieData['order']
items = cookieData['items']


return {'cartItems': cartItems, 'order': order, 'items':items}
EN

回答 1

Stack Overflow用户

发布于 2022-03-19 09:18:43

您可以使用(非常)不同的方法来解决这个问题:

  1. 使用Ajax调用(XMLHttpRequest)和香草javascript代码
  2. 使用HTMX -不需要编写JS代码就可以提高模板功能的新方法和不太传统的方法。
  3. 使用JS前端框架/库(React、Vue、角、Svelte等)

当然还有其他方法,但我认为对于Django来说,这些方法将是主要的解决方案,也是文档最多的解决方案。

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/71536379

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档