Shopify Debut主题：选中自定义复选框时动态设置产品雕刻加价

既然你已经用Liquid搞定了复选框和文本框的显示/隐藏，接下来咱们用JavaScript配合Shopify的line item properties来实现动态价格调整，完美避开变体的限制。下面是一步步的具体实现方案：

1. 给特殊产品打标记（区分加价金额） #

首先在Shopify后台给需要$10雕刻费的产品添加一个元字段（Metafields）：

• 命名空间：custom
• 键：is_special_engrave
• 值：true（其他产品不用加，默认按$20加价处理）

这样我们就能在Liquid里快速判断当前产品是不是特殊款了。

2. 产品页面：实时更新前端显示价格 #

在你的产品模板（比如product-template.liquid）里，找到价格显示区域，添加以下代码：

第一步：从Liquid传递基础数据到JS #

在<script>标签里先定义核心变量：

// 从Liquid获取产品基础价格（转换为美元数值）
const basePrice = {{ product.price | divided_by: 100.0 | json }};
// 判断当前是否为特殊雕刻产品
const isSpecialProduct = {{ product.metafields.custom.is_special_engrave | default: false | json }};
// 获取价格显示元素（Debut主题默认类是.product-price，可根据实际调整）
const priceDisplay = document.querySelector('.product-price');
// 获取你已创建的雕刻复选框和文本框（替换成你实际的ID）
const engraveCheckbox = document.getElementById('engrave-checkbox');
const engraveTextInput = document.getElementById('engrave-text');

// 定义两种加价金额
const specialEngraveFee = 10.00;
const regularEngraveFee = 20.00;

第二步：编写价格更新逻辑 #

// 计算并更新显示价格的函数
function updateProductPrice() {
  let totalPrice = basePrice;
  // 如果复选框被选中，加上对应加价
  if (engraveCheckbox.checked) {
    totalPrice += isSpecialProduct ? specialEngraveFee : regularEngraveFee;
  }
  // 格式化为两位小数的美元样式
  priceDisplay.textContent = `$${totalPrice.toFixed(2)}`;
}

// 页面加载时先初始化一次价格
updateProductPrice();

// 监听复选框状态变化，实时更新价格
engraveCheckbox.addEventListener('change', updateProductPrice);

3. 把加价信息同步到购物车 #

光前端显示价格还不够，得把加价信息传到购物车，这样购物车和后续流程能显示正确总价。我们通过添加line item properties实现：

在产品的添加到购物车表单（form[action="/cart/add"]）里，添加提交事件监听：

document.querySelector('form[action="/cart/add"]').addEventListener('submit', function(e) {
  // 先移除之前可能存在的雕刻属性输入框，避免重复提交
  const existingProps = this.querySelectorAll('input[name^="properties[Engrave"]');
  existingProps.forEach(input => input.remove());

  // 如果复选框选中，添加雕刻相关属性
  if (engraveCheckbox.checked) {
    // 添加雕刻标识（用于购物车判断）
    const engraveFlag = document.createElement('input');
    engraveFlag.type = 'hidden';
    engraveFlag.name = 'properties[Engrave]';
    engraveFlag.value = 'Yes';
    this.appendChild(engraveFlag);

    // 添加雕刻费用金额
    const feeInput = document.createElement('input');
    feeInput.type = 'hidden';
    feeInput.name = 'properties[Engrave Fee]';
    feeInput.value = isSpecialProduct ? specialEngraveFee : regularEngraveFee;
    this.appendChild(feeInput);

    // 如果有雕刻文本框，同步文本内容到购物车
    if (engraveTextInput.value.trim()) {
      const textInput = document.createElement('input');
      textInput.type = 'hidden';
      textInput.name = 'properties[Engrave Text]';
      textInput.value = engraveTextInput.value.trim();
      this.appendChild(textInput);
    }
  }
});

4. 购物车页面：显示包含加价的总价 #

打开cart.liquid模板，找到购物车项价格的显示区域，替换成以下代码，计算并显示包含雕刻费的总价：

{% for item in cart.items %}
  {% assign baseItemPrice = item.price | divided_by: 100.0 %}
  {% assign totalItemPrice = baseItemPrice %}
  
  {% if item.properties.Engrave == 'Yes' %}
    {% assign engraveFee = item.properties['Engrave Fee'] | plus: 0 %}
    {% assign totalItemPrice = baseItemPrice | plus: engraveFee %}
  {% endif %}

  <!-- 渲染最终总价 -->
  <span class="cart-item-total">${{ totalItemPrice | round: 2 }}</span>
{% endfor %}

额外注意事项 #

• 如果店铺支持多货币，需要调整价格转换逻辑，确保数值匹配当前货币
• 若使用Shopify Plus，可以配合脚本编辑器在结账时自动把加价合并到订单总价里，避免仅前端显示的局限
• 测试时记得验证：勾选复选框后添加到购物车，查看购物车页面价格是否正确，同时检查订单详情里的properties是否包含雕刻相关信息

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