Shopify点击加入购物车后如何无需刷新更新运费进度条？

当前代码仅在页面首次加载时拉取一次购物车数据计算进度，Shopify加购操作默认是异步AJAX提交，不会触发页面刷新，也没有触发进度条更新逻辑，所以必须手动刷新页面才能看到最新进度。

1. 绑定购物车更新监听事件 #

在原有JS代码末尾新增加购成功后的更新逻辑，优先使用主题自带的购物车更新事件，不同主题事件名可参考主题文档调整，示例代码如下：

// 监听主题自带的购物车更新事件，通用主题事件名多为 theme:cart:updated / ajaxCart:change
document.addEventListener('theme:cart:updated', function(e) {
  generate(e.detail.cart);
});

// 若无法获取主题事件，可使用加购按钮点击兜底方案
$('[type="submit"][data-add-to-cart]').on('click', function() {
  // 等待加购请求完成后拉取最新购物车数据
  setTimeout(() => {
    Shopify.getCart(cart => generate(cart));
  }, 600);
});

2. 修复原有代码语法问题 #

原有变量声明处漏写逗号，会导致变量全局污染，修正如下：

var $freeShippingClass = $('.js-free-shipping'),
    $freeShippingTextClass = $('.js-free-shipping-text'),
    $free_fisrt = $freeShippingClass.attr('data-start'),
    $free_end = $freeShippingClass.attr('data-end'), // 此处补充遗漏的逗号
    minOrderValue = parseInt($freeShippingClass.data('value')) || 0,
    $percentClass = $('.js-free-shipping .progress-bar');

3. 统一进度条样式类名 #

原有逻辑中进度条样式类名不统一，会导致样式展示异常，修正如下：

// 满足免运费条件的逻辑
if (priceCart >= minOrderValue){
  $percentClass.css('width','100%').removeClass('progress-bar-striped bg-primary');
  $freeShippingTextClass.text(theme.strings.freeShipping)
}else{
  let percent = priceCart / minOrderValue * 100;
  let left = Shopify.formatMoney((minOrderValue - priceCart),theme.moneyFormat);
  $percentClass.css('width',percent+'%').addClass('progress-bar-striped bg-primary'); // 统一使用bg-primary类
  $freeShippingTextClass.html($free_fisrt +' '+ left +' '+ $free_end);
  theme.updateCurrencies();
}

修改完成后点击加入购物车按钮，无需刷新页面即可看到进度条宽度和提示文本同步更新。

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