Shopify Kalles主题动态小计JS脚本被拦截及报错排查

一、优先选择排查报错原因 #

你的代码本身未调用.min属性，报错来自其他绑定在variant:changed事件的回调（大概率是第三方应用或主题其他脚本），导致事件触发时前面的回调报错阻断了你的代码执行。可按以下步骤排查：

• 定位报错源：打开浏览器控制台，点击报错信息的栈追踪链接，查看具体是哪个脚本文件的哪一行在访问undefined的.min属性，确认冲突代码的来源。
• 逐个禁用第三方应用：暂时禁用站点的第三方应用，每次禁用后刷新产品页测试功能，找到导致冲突的应用后，可联系应用开发者修复，或替换为无冲突的同类应用。
• 查看事件绑定列表：在控制台执行$._data(document, 'events')['variant:changed']，查看所有绑定variant:changed事件的回调函数顺序，确认是否有其他回调在你的代码之前执行并报错。
• 临时隔离代码：给你的variant:changed回调添加try-catch包裹，避免被前面的报错阻断：

$(document).on('variant:changed', function (evt) {
  try {
    const qty_input = $('.t4s-quantity-input'),
          pr_container = $('.t4s-product__info-container'),
          total_wrapper = $('.t4s-form__product .product-form__sub-total');
    const variant = evt.currentVariant;
    if (qty_input && total_wrapper && variant) {
      var price = variant.price;
      total_wrapper.attr('data-price', price);
      const total = T4SThemeSP.Currency.formatMoney(parseInt(qty_input.val()) * price);
      total_wrapper.find('.t4s-product-price').html(total);
    }
    if (pr_container) {
      if (!variant.available && variant.price == 0) {
        pr_container.addClass('t4s-product__info-out');
      } else {
        pr_container.removeClass('t4s-product__info-out');
      }
    }
  } catch (err) {
    console.error('小计更新脚本执行异常:', err);
  }
});

二、重写独立脚本的备选方案 #

如果排查冲突困难，可重写不依赖主题variant:changed事件的独立脚本，避免受第三方应用干扰：

document.addEventListener('DOMContentLoaded', function() {
  // 替换为页面实际的变体选择器
  const variantSelectors = document.querySelectorAll('.t4s-variant-option select');
  const qtyInput = document.querySelector('.t4s-quantity-input');
  const totalWrapper = document.querySelector('.t4s-form__product .product-form__sub-total');
  const priceElement = totalWrapper?.querySelector('.t4s-product-price');
  const stickyPrice = document.querySelector('.t4s-sticky-atc__price');

  // 从主题全局变量获取变体数据（Kalles主题通常会输出window.variants）
  const variants = window.variants || [];

  // 自定义货币格式化（适配站点货币规则）
  function formatMoney(cents) {
    // 可根据实际货币调整格式，比如澳元写成'$' + (cents/100).toFixed(2)
    return T4SThemeSP?.Currency?.formatMoney?.(cents) || '$' + (cents / 100).toFixed(2);
  }

  // 获取当前选中的变体
  function getActiveVariant() {
    const selectedValues = Array.from(variantSelectors).map(el => el.value);
    return variants.find(variant => variant.options.join(',') === selectedValues.join(','));
  }

  // 更新小计逻辑
  function updateSubtotal() {
    const activeVariant = getActiveVariant();
    const qty = parseInt(qtyInput?.value) || 1;
    if (!activeVariant || !priceElement) return;
    
    const total = qty * activeVariant.price;
    totalWrapper.dataset.price = activeVariant.price;
    const formattedTotal = formatMoney(total);
    
    priceElement.textContent = formattedTotal;
    if (stickyPrice) stickyPrice.textContent = formattedTotal;
  }

  // 绑定事件监听
  variantSelectors.forEach(selector => {
    selector.addEventListener('change', updateSubtotal);
  });
  qtyInput?.addEventListener('input', updateSubtotal);
  qtyInput?.addEventListener('change', updateSubtotal);

  // 页面加载时初始化
  updateSubtotal();
});

结论 #

优先排查冲突原因，因为找到根源后可以最小成本解决问题，且保留主题原有功能的一致性。只有当排查无果或冲突应用无法替换时，再考虑重写独立脚本。

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