Shopify Debut主题变体价格动态加7%VAT的jQuery修改咨询

解决方案 #

直接修改theme.js中的_updatePrice方法即可，修改后代码如下：

/**
 * Trigger event when variant price changes.
 *
 * @param  {object} variant - Currently selected variant
 * @return {event} variantPriceChange
 */
_updatePrice: function(variant) {
  // 计算7% VAT，注意Shopify前端返回的价格单位为分
  const vatRate = 1.07;
  variant.price = Math.round(variant.price * vatRate);
  if (variant.compare_at_price) {
    variant.compare_at_price = Math.round(variant.compare_at_price * vatRate);
  }

  if (
    variant.price === this.currentVariant.price &&
    variant.compare_at_price === this.currentVariant.compare_at_price
  ) {
    return;
  }

  this.$container.trigger({
    type: 'variantPriceChange',
    variant: variant
  });
},

逻辑说明 #

• 代码在触发变体价格变更事件前，提前给原始价格加上7% VAT，所有监听variantPriceChange事件的原有渲染逻辑都会自动使用计算后的含税价更新页面，和你静态模板中times:1.07的逻辑完全对齐
• 计算时使用Math.round取整，避免价格出现小数导致后续货币格式化出错
• 同时兼容划线价（compare_at_price）的VAT计算

验证操作 #

修改保存主题文件后，清除浏览器缓存刷新商品页，切换不同价格的变体即可看到价格自动计算7% VAT后渲染，不会再被原始价格覆盖。

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