如何使用Shopify Liquid实现购物车页文本无刷新动态更新？

核心逻辑说明 #

你目前使用的Liquid是服务端渲染语法，仅会在页面首次加载时执行一次判断生成对应文本。用户在购物车页修改商品数量是走前端异步请求更新，页面不会刷新，Liquid不会重新运行，因此文本无法自动更新，只需要搭配少量JavaScript监听购物车更新事件即可实现和价格同步更新的效果。 #

第一步：替换原有Liquid代码 #

将你cart__footer区块的原有代码替换为以下内容，预留统一的文本容器，同时前端预置折扣规则：

<div class="cart__footer">
  <p id="discount-tip" class="grid__item text-right small--text-center"></p>
</div>
<script>
// 折扣规则配置，可自行修改文案
const discountRules = [
  {count: 1, tip: '再买1件可享5%折扣！'},
  {count: 2, tip: '再买1件可享10%折扣！'},
  {count: 3, tip: '再买1件可享15%折扣！'},
  {count: 4, tip: '太棒了！已享受最高折扣！'}
]
// 更新提示文本的公共方法
function updateDiscountTip(itemCount) {
  const tipElement = document.getElementById('discount-tip')
  if (itemCount >= 4) {
    tipElement.textContent = discountRules[3].tip
  } else {
    tipElement.textContent = discountRules[itemCount - 1].tip
  }
}
// 页面首次加载时初始化提示文本
updateDiscountTip({{ cart.item_count }})
</script>

第二步：添加购物车更新监听 #

Shopify官方主题以及绝大多数第三方主题在购物车数量更新成功后，都会自动触发cart:updated自定义事件，添加以下监听逻辑即可实现无刷新更新提示：

document.addEventListener('cart:updated', function(event) {
  // 从事件回调中拿到最新的购物车数据
  const latestCart = event.detail.cart
  updateDiscountTip(latestCart.item_count)
})

老旧主题兼容方案 #

如果你使用的主题没有内置cart:updated事件，直接监听购物车数量输入框的change事件，或者加减数量按钮的点击事件，在修改数量的异步请求成功回调中调用updateDiscountTip(最新购物车商品总数)即可，效果完全一致。

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