如何在Django模板中显示购物车商品详情

你的现有代码存在几个关键问题：

1. Cart模型缺少与用户的关联，无法区分当前用户的购物车
2. CartItems缺少商品数量字段，无法记录商品购买数量
3. 视图返回的是所有未支付购物车的集合，而非当前用户的单个购物车
4. 模板直接遍历cart（Cart对象集合），但实际需要遍历的是购物车对应的CartItems条目

以下是修正后的完整实现步骤：

1. 修正模型（models.py） #

给Cart添加用户关联，给CartItems添加数量字段，并设置反向关联名称方便模板调用：

from django.contrib.auth.models import User

class Cart(models.Model):
    user = models.ForeignKey(User, on_delete=models.CASCADE, related_name='carts')
    is_paid = models.BooleanField(default=False)

class CartItems(models.Model):
    cart = models.ForeignKey(Cart, on_delete=models.CASCADE, related_name='items')
    product = models.ForeignKey(Product, on_delete=models.SET_NULL, null=True, blank=True)
    color_variant = models.ForeignKey(ColorVariant, on_delete=models.SET_NULL, null=True, blank=True)
    size_variant = models.ForeignKey(SizeVariant, on_delete=models.SET_NULL, null=True, blank=True)
    quantity = models.PositiveIntegerField(default=1)  # 添加商品数量字段

2. 修正视图（views.py） #

获取当前用户的未支付购物车（如果不存在则自动创建），并传入模板：

from django.shortcuts import render
from .models import Cart

def cart(request):
    # 获取或创建当前用户的未支付购物车
    cart, created = Cart.objects.get_or_create(user=request.user, is_paid=False)
    context = {'cart': cart}
    return render(request, 'cart.html', context)

3. 修正模板（cart.html） #

遍历购物车对应的CartItems，展示商品详情、变体信息、数量、价格等内容：

{% load custom_filters %} <!-- 加载自定义过滤器，用于计算价格 -->

{% if cart.items.exists %}
    {% for item in cart.items.all %}
    <tr>
        <td class="product__cart__item">
            <div class="product__cart__item__pic">
                <!-- 显示商品主图，假设Product模型有image字段 -->
                <img src="{{ item.product.image.url }}" alt="{{ item.product.name }}">
            </div>
            <div class="product__cart__item__text">
                <h6>{{ item.product.name }}</h6>
                <!-- 显示颜色和尺码变体信息 -->
                {% if item.color_variant %}
                <p>颜色: {{ item.color_variant.name }}</p>
                {% endif %}
                {% if item.size_variant %}
                <p>尺码: {{ item.size_variant.name }}</p>
                {% endif %}
            </div>
        </td>
        <td class="quantity__item">
            <div class="quantity">
                <div class="pro-qty-2">
                    <input type="text" value="{{ item.quantity }}">
                </div>
            </div>
        </td>
        <td class="cart__price">
            <!-- 计算单商品总价，假设Product有price字段 -->
            $ {{ item.product.price|floatformat:2 }} × {{ item.quantity }} = $ {{ item.product.price|mul:item.quantity|floatformat:2 }}
        </td>
        <td class="cart__close"><i class="fa fa-close"></i></td>
    </tr>
    {% endfor %}
    <!-- 显示购物车总价 -->
    <tr>
        <td colspan="3" align="right"><strong>总价:</strong></td>
        <td><strong>$ {% with total=0 %}{% for item in cart.items.all %}{% total=total|add:item.product.price|mul:item.quantity %}{% endfor %}{{ total|floatformat:2 }}{% endwith %}</strong></td>
    </tr>
{% else %}
    <tr>
        <td colspan="4" align="center">购物车为空</td>
    </tr>
{% endif %}

补充：自定义乘法过滤器 #

模板中用到的mul过滤器需要自定义，步骤如下：

1. 在你的app目录下创建templatetags文件夹（需包含__init__.py）
2. 创建custom_filters.py文件，内容如下：

from django import template
register = template.Library()

@register.filter
def mul(value, arg):
    return value * arg

关键说明 #

• 通过related_name='items'，可以直接用cart.items.all()获取购物车下的所有商品条目
• 确保Product模型包含name、price、image字段，ColorVariant和SizeVariant包含name字段
• 视图中使用get_or_create确保每个用户始终有一个未支付的购物车

内容的提问来源于stack exchange，提问作者Aman Yadav