如何在Django中实现产品规格切换时的价格动态更新？

核心问题梳理 #

你当前的代码存在事件监听冲突、DOM元素ID重复、关键参数缺失、视图层未实现这几个核心问题，导致切换变体后价格无法更新。以下是针对性修复方案：

1. 移除重复的事件监听 #

模板里同时存在两段JS逻辑：一段是jQuery写的change事件监听，另一段是原生JS的DOMContentLoaded事件内的监听。后者的calculateUpdatedPrice是空实现，会直接返回undefined，干扰正常的AJAX请求逻辑。

修复：删掉原生JS的那段代码，只保留jQuery的AJAX逻辑。

2. 修复重复的ID元素 #

模板循环渲染产品变体时生成了多个<span id="price">，DOM中ID必须唯一，这会导致JS无法正确定位到要更新的价格元素。

修复：把循环里的id="price"改成class（比如class="variant-price"），或者直接移除，只保留产品描述区的sell-price作为价格展示的目标元素。

3. 添加缺失的product-id参数 #

jQuery代码里尝试获取$('#product-id').val()，但模板里没有这个隐藏元素，导致productId为undefined，无法触发后续AJAX请求（因为判断条件if (productId && sizeId && colorId && glassId)不满足）。

修复：在模板中添加隐藏的product-id输入框：

<input type="hidden" id="product-id" value="{{ product.id }}">

4. 实现Django视图层逻辑 #

AJAX请求的/get_variant/URL没有对应的视图处理逻辑，需要编写视图查询对应变体的价格并返回JSON数据。

视图层示例（views.py）

from django.http import JsonResponse
from .models import ProductVariant  # 替换为你的变体模型类

def get_variant_price(request):
    product_id = request.GET.get('product_id')
    size_id = request.GET.get('size')
    color_id = request.GET.get('color')
    glass_id = request.GET.get('glass')

    try:
        # 匹配对应的产品变体
        variant = ProductVariant.objects.get(
            product_id=product_id,
            size_id=size_id,
            color_id=color_id,
            glass_id=glass_id
        )
        return JsonResponse({'price': variant.price})
    except ProductVariant.DoesNotExist:
        # 变体不存在时返回默认价格或提示
        return JsonResponse({'price': 0}, status=404)

路由配置（urls.py）

from django.urls import path
from . import views

urlpatterns = [
    # 其他路由...
    path('get_variant/', views.get_variant_price, name='get_variant_price'),
]

修改后的完整模板代码 #

{% for variant in product.variants.all %}
    <p>尺寸: {{ variant.size.name }}</p>
    <p>颜色: {{ variant.color.name }}</p>            
    <p>玻璃: {{ variant.glass.name }}</p>
    <p>价格: <span class="variant-price">{{ variant.price }}</span></p>
{% endfor %}

<!-- 添加隐藏的产品ID参数 -->
<input type="hidden" id="product-id" value="{{ product.id }}">

<div class="mb-3">
    <strong><label for="size" class="form-label">尺寸:</label></strong>
    <div class="dropdown-wrapper" style="width: 120px;">
        <select class="form-select" id="size">
            {% for size in sizes %}
                <option value="{{ size.id }}">{{ size.name }}</option>
            {% endfor %}
        </select>
    </div>
</div>

<div class="mb-3">
    <strong><label for="color" class="form-label">轮廓颜色:</label></strong>
    <div class="dropdown-wrapper" style="width: 120px;">
        <select class="form-select" id="color">
            {% for color in colors %}
                <option value="{{ color.id }}">{{ color.name }}</option>
            {% endfor %}
        </select>
    </div>    
</div>

<div class="mb-3">
    <strong><label for="glass" class="form-label">玻璃颜色:</label></strong>
    <div class="dropdown-wrapper" style="width: 120px;">
        <select class="form-select" id="glass">
            {% for glass in glasses %}
                <option value="{{ glass.id }}">{{ glass.name }}</option>
            {% endfor %}
        </select>
    </div>    
</div>

<!-- 产品描述 -->
<div class="card-body">
    <strong><p class="card-text">价格:  </strong><span id="sell-price">{{ product.sell_price }}</span> TL</strong></p>
    <h5 class="card-title">{{ product.name }}</h5>
    <p class="card-text">{{ product.description }}</p>
    <a href="{% url "cart:cart_add" %}" class="btn btn-dark add-to-cart"
        data-product-id="{{ product.id }}">
        {% csrf_token %}
        加入购物车</a>
</div>

<!-- 确保引入jQuery -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$('#size, #color, #glass').on('change', function () {
  const productId = $('#product-id').val();
  const sizeId = $('#size').val();
  const colorId = $('#color').val();
  const glassId = $('#glass').val();

  console.log("捕获的值:", productId, sizeId, colorId, glassId);

  if (productId && sizeId && colorId && glassId) {
    calculateUpdatedPrice(productId, sizeId, colorId, glassId);
  }
});

function calculateUpdatedPrice(productId, sizeId, colorId, glassId) {
  // 使用Django url标签生成可靠的请求地址
  const url = `{% url 'get_variant_price' %}?product_id=${productId}&size=${sizeId}&color=${colorId}&glass=${glassId}`;
  console.log("请求URL:", url);

  fetch(url)
    .then(response => {
      if (!response.ok) throw new Error('变体不存在');
      return response.json();
    })
    .then(data => {
      console.log("响应数据:", data);
      const sellPriceElement = document.getElementById('sell-price');
      sellPriceElement.textContent = data.price;
    })
    .catch(error => console.error('错误:', error));
}
</script>
{% endblock %}

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