解决Shopify产品变体切换时不含增值税（Exc VAT）价格不更新问题

问题根源 #

你当前用product.price获取的是产品的全局基准价格，页面加载后就固定了。变体切换是前端JS动态更新默认价格，但你的不含税价格没有绑定变体变化的逻辑，所以不会同步更新。

具体解决步骤 #

1. 给不含税价格元素加标识类 #

先修改main-product.liquid里的代码，给不含税价格的<p>标签加一个专属类，方便JS定位：

{%- when 'price' -%}
<div class="product-info__block product-info__block--sm product-price" {{ block.shopify_attributes }}>
  <div class="product-info__price">
    {% render 'price', product: product, use_variant: true %}
    <p class="product-price__ex-vat"> {{ product.price | divided_by: 1.2 | money }} ex. VAT </p>
  </div>
</div>

2. 找到主题的变体切换逻辑文件 #

打开主题的JS文件，通常是assets/theme.js、assets/product.js或者Enterprise主题专门的变体处理文件（比如assets/variant-selector.js），找到处理变体切换的代码段——一般会有监听变体选择变化的事件，或者更新价格的函数。

3. 添加不含税价格更新逻辑 #

在变体切换的回调函数里，加入计算并更新不含税价格的代码。以下是通用示例：

// 定义更新不含税价格的函数
function updateExVatPrice(variant) {
  if (!variant) return;
  // 计算不含税价格（1.2为你的税率，根据实际情况调整）
  // 注意：Shopify价格单位是分，先转成元再计算
  const exVatPrice = (variant.price / 100) / 1.2 * 100;
  // 获取页面上的不含税价格元素
  const exVatElement = document.querySelector('.product-price__ex-vat');
  if (exVatElement) {
    // 用Shopify自带的格式化工具处理价格（兼容店铺货币设置）
    exVatElement.textContent = `${Shopify.formatMoney(exVatPrice, window.money_format)} ex. VAT`;
  }
}

// 绑定到变体切换事件（不同主题事件名可能不同，比如有的是'variantChange'）
document.addEventListener('variant:change', function(event) {
  const selectedVariant = event.detail.variant;
  updateExVatPrice(selectedVariant);
});

// 页面加载完成后，初始化当前选中变体的不含税价格
document.addEventListener('DOMContentLoaded', function() {
  // 获取初始选中的变体（如果主题有全局变体对象）
  const initialVariant = window.currentVariant;
  if (initialVariant) {
    updateExVatPrice(initialVariant);
  }
});

4. 适配主题细节 #

• 如果你不确定变体事件的名称，可以打开浏览器开发者工具的「控制台」，切换变体时查看是否有事件触发，或者直接找主题里更新默认价格的代码，在同一个位置调用updateExVatPrice函数。
• 如果主题没有Shopify.formatMoney，可以自己写简单的格式化逻辑，比如：

  function formatPrice(priceInCents) {
    // 假设店铺货币是英镑，符号为£，保留两位小数
    return `£${(priceInCents / 100).toFixed(2)}`;
  }
  

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