Shopify页面单选按钮价格修改异常：输出无效值求助

问题现象 #

• 选择单选按钮后，价格未按基础价累加（预期基础价加£2），反而输出£0.00
• Shopify提示第17行t: price: newPrice中的newPrice为未知对象

问题根源 #

1. Liquid与JS渲染时机冲突：Liquid是服务器端渲染，{{ ... }}在页面加载时已执行，无法引用客户端JS动态生成的newPrice变量
2. 价格计算逻辑错误：直接赋值+0/+2会覆盖基础价，而非累加
3. 类型不匹配：basePrice通过Liquid获取的是字符串，无法直接参与数值运算

修复后的代码 #

<script>     
    var radioButtons = document.querySelectorAll('input[type="radio"]');
    var priceDisplay = document.querySelector('.product-price');
    // 将Liquid输出的字符串转为数字类型
    var basePrice = parseFloat({{ product.price | money_without_currency }});

    radioButtons.forEach(function(button) {
      button.addEventListener('change', function() {
        var selectedValue = this.value;
        var newPrice = basePrice;

         if (selectedValue === 'without core drops') {
          newPrice += 0;  // 保持基础价
        } else if (selectedValue === 'with core drops') {
          newPrice += 2;  // 基础价加£2
        } 

        // 直接在JS中格式化价格，避免Liquid引用JS变量
        priceDisplay.textContent = "From £" + newPrice.toFixed(2);
      });
    });
</script>

修复要点 #

• 修正累加逻辑：使用+=运算符替代直接赋值，确保基于基础价计算
• 分离Liquid与JS职责：放弃用Liquid的t过滤器处理动态价格，改用JS直接拼接格式化后的价格字符串
• 类型转换：用parseFloat()将Liquid输出的价格字符串转为数字，保证数值运算正常

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