Shopify自定义产品模板变体切换后价格不更新求助

问题根源分析 #

你的代码存在几个关键问题导致价格不更新：

• JS拼写错误：quesySelector 应为 querySelector，直接导致无法定位元素更新内容
• 缺少变体切换事件监听：仅页面加载时执行一次更新，未监听变体选择变化的触发事件
• 未定义root变量：代码中使用root但未指定其指向的DOM容器
• 未处理无可用变体的异常情况：当用户选择的组合无对应变体时会报错
• 依赖的formatMoney函数可能未正确加载或存在兼容性问题

修复后的完整代码 #

HTML部分（保留原有结构即可）

<div class="main-product-prices">
  <p class="main-product-compare {% unless product.selected_or_first_available_variant.compare_at_price > product.selected_or_first_available_variant.price %}hide{% endunless %}">
    {{ product.selected_or_first_available_variant.compare_at_price | money }}
  </p>

  <p class="main-product-price">
    {{ product.selected_or_first_available_variant.price | money }}
  </p>
</div>

JS部分（修复所有问题并添加事件监听）

// 定义产品容器根元素，根据实际页面结构调整选择器
const root = document.querySelector('.main-product');

function updateDisplayedPrice(variant) {
  const priceEl = root.querySelector('.main-product-price');
  const compareEl = root.querySelector('.main-product-compare');

  // 处理无可用变体的情况
  if (!variant) {
    priceEl.textContent = '暂无可用选项';
    compareEl.classList.add('hide');
    return;
  }

  // 价格格式化：优先用主题自带的formatMoney，否则用原生Intl方案
  const currency = shop.currency || 'CNY';
  const formatPrice = (amount) => {
    if (typeof formatMoney === 'function') {
      return formatMoney(amount, "{{ shop.money_format }}");
    }
    // 原生格式化（注意Shopify价格单位是分，需除以100）
    return new Intl.NumberFormat('zh-CN', {
      style: 'currency',
      currency: currency
    }).format(amount / 100);
  };

  priceEl.textContent = formatPrice(variant.price);
  compareEl.textContent = formatPrice(variant.compare_at_price);

  // 控制对比价的显示/隐藏
  if (variant.compare_at_price > variant.price) {
    compareEl.classList.remove('hide');
  } else {
    compareEl.classList.add('hide');
  }
}

// 页面初始化时加载默认变体价格
updateDisplayedPrice(product.selected_or_first_available_variant);

// 监听Shopify标准变体切换事件（适用于官方变体组件）
document.addEventListener('variant:change', (event) => {
  updateDisplayedPrice(event.detail.variant);
});

// 备选：如果是自定义下拉选择器，监听下拉框变化事件
// root.querySelectorAll('.variant-option select').forEach(select => {
//   select.addEventListener('change', () => {
//     const form = root.querySelector('form[action="/cart/add"]');
//     const variantId = new FormData(form).get('id');
//     const variant = product.variants.find(v => v.id === parseInt(variantId));
//     updateDisplayedPrice(variant);
//   });
// });

额外注意事项 #

1. 确保root变量的选择器与你的页面结构匹配，比如如果产品容器的类是product-page，就改成document.querySelector('.product-page')
2. 如果主题未自带formatMoney函数，原生Intl格式化方案会自动生效，需确保shop.currency变量存在（Shopify主题默认会注入该全局变量）
3. 若使用自定义变体选择组件，注释掉的备选监听代码可以启用，替换掉官方的variant:change事件监听

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