Shopify：add.js提交的自定义价格表单数据显示异常求助

我在Shopify中通过add.js将properties[price]字段提交至购物车，预期在购物车页面显示自定义价格£110.79，但实际显示为£1.11，无法定位问题原因。当前代码实现如下：

前端提交代码 #

function modifyCartBtn(price) {
  document.getElementById('AddToCart-product-template').addEventListener('click', function() {
    var modifiedPrice = Number(price);
    var formData = new FormData();
    formData.append('id', {{ product.variants.first.id }});
    formData.append('quantity', 1);
    formData.append('properties[price]', price.toString());

    fetch('/cart/add.js', {
      method: 'POST',
      body: new URLSearchParams(formData),
      headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/x-www-form-urlencoded',
      },
    })
    .then(response => response.json())
    .then(data => {
      console.log(data);
    })
    .catch(error => {
      console.error('Error:', error);
    });
  });
}

购物车页面渲染代码 #

{% for item in cart.items %}
  <p>Product: {{ item.product.title }}</p>
  <p>Price: {{ item.price | money }}</p>
  <p>Modified Price: {{ item.properties.price | money }}</p>
{% endfor %}

问题原因 #

Shopify的money过滤器默认将输入值视为以分为单位的整数。你提交的price是字符串形式的"110.79"，过滤器会把它当作110.79分计算，也就是£1.11（1英镑=100分），这就是显示异常的核心原因。

解决方案 #

方案1：提交时转换为整数分（推荐）

在前端提交价格时，将金额转换为以分为单位的整数，匹配money过滤器的预期逻辑：

function modifyCartBtn(price) {
  document.getElementById('AddToCart-product-template').addEventListener('click', function() {
    // 将价格转换为分（四舍五入避免浮点精度问题）
    var priceInCents = Math.round(Number(price) * 100);
    var formData = new FormData();
    formData.append('id', {{ product.variants.first.id }});
    formData.append('quantity', 1);
    // 提交分的整数形式
    formData.append('properties[price]', priceInCents.toString());

    fetch('/cart/add.js', {
      method: 'POST',
      body: new URLSearchParams(formData),
      headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/x-www-form-urlencoded',
      },
    })
    .then(response => response.json())
    .then(data => console.log(data))
    .catch(error => console.error('Error:', error));
  });
}

购物车渲染代码保持不变即可，money过滤器会自动将分转换为正确的英镑格式。

方案2：渲染时手动转换为英镑

如果不想修改提交逻辑，可在渲染时先将字符串转换为数值，再格式化显示：

{% for item in cart.items %}
  <p>Product: {{ item.product.title }}</p>
  <p>Price: {{ item.price | money }}</p>
  {% assign customPrice = item.properties.price | times: 1 %}
  <p>Modified Price: £{{ customPrice | round: 2 }}</p>
{% endfor %}

注意：此方式需要确保item.properties.price是有效的数值字符串，否则可能出现显示错误。

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