Shopify自定义变体价格未同步至购物车问题求助

问题核心：添加购物车时未传递选中的变体ID，导致系统使用默认变体的价格。以下是具体修复步骤：

• 绑定变体选择事件，同步更新加购表单的变体ID字段
  Shopify默认加购表单里有个隐藏的input[name="id"]字段，默认值是第一个变体的ID。需要在用户切换变体时，将该字段的值替换为当前选中变体的ID。示例代码：

  // 假设你的变体选择器是id为product-variants的下拉框
  const variantSelector = document.getElementById('product-variants');
  const addToCartIdInput = document.querySelector('input[name="id"]');
  
  variantSelector.addEventListener('change', function() {
    // 获取选中的变体ID
    const selectedVariantId = this.value;
    // 更新加购表单的ID字段
    addToCartIdInput.value = selectedVariantId;
  
    // 保留你已实现的价格更新逻辑
    // 比如：document.querySelector('.price').textContent = '$' + selectedVariantPrice;
  });
  

• 确认自定义变体的合法性
  你创建的2个自定义变体必须在Shopify后台有对应的变体记录，每个变体都有唯一的ID。如果是前端手动模拟的自定义变体（无后台对应记录），Shopify无法识别，加购时会自动 fallback 到默认变体。

• 验证加购请求
  用浏览器开发者工具的Network面板，查看添加购物车的POST请求，检查Form Data中的id参数是否为当前选中的变体ID。如果参数值还是默认变体ID，说明事件绑定或字段更新逻辑存在问题。

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