Shopify模板开发：如何实现cart.item_count文本动态更新？

当前你的代码已实现基础的购物车数量展示，但仅依赖Shopify.onCartUpdate事件无法覆盖所有购物车变化场景，同时模板未支持JS动态更新空购物车状态，以下是完善后的实现方案：

1. 修改product-template.liquid模板 #

给购物车状态添加统一容器，确保所有状态都能被JS动态更新：

<div id="cart-status">
  {% if cart.item_count == 0 %}
    Your cart is empty.
  {% else %}
    {%- if settings.cart_count -%}
      <span>
        {%- if cart.item_count <= 99 -%}
          <span id="cart-item-text">{{ cart.item_count }} {{ cart.item_count == 1 ? 'item is' : 'items are' }} in your cart</span>
        {%- else -%}
          99+ items are in your cart
        {%- endif -%}
      </span>
    {%- endif -%}
  {% endif %}
</div>

2. 完善custom.js逻辑 #

补充更多购物车变化的事件监听，同时处理空购物车和99+的边界情况：

$(document).ready(function() {
  function updateCartItemCount() {
    $.ajax({
      type: 'GET',
      url: '/cart.json',
      cache: false,
      dataType: 'json',
      success: function(cart) {
        const cartStatusElement = $('#cart-status');
        const itemCount = cart.item_count;

        // 处理空购物车状态
        if (itemCount === 0) {
          cartStatusElement.html('Your cart is empty.');
          return;
        }

        // 遵循后台设置的显示开关
        if (!settings.cart_count) {
          cartStatusElement.html('');
          return;
        }

        // 生成对应数量的文本
        let cartText;
        if (itemCount > 99) {
          cartText = '99+ items are in your cart';
        } else {
          const textSuffix = itemCount === 1 ? 'item is' : 'items are';
          cartText = `${itemCount} ${textSuffix} in your cart`;
        }

        cartStatusElement.html(`<span>${cartText}</span>`);
      }
    });
  }

  // 页面加载时初始化计数
  updateCartItemCount();

  // 监听Shopify官方购物车更新事件
  Shopify.onCartUpdate = updateCartItemCount;

  // 监听商品添加到购物车的AJAX成功事件（覆盖手动添加商品场景）
  $(document).on('ajax:success', '[add-to-cart]', updateCartItemCount);

  // 监听Cart API触发的购物车更新事件（覆盖修改/删除商品场景）
  $(document).on('cart:updated', updateCartItemCount);
});

关键修改说明 #

• 模板新增#cart-status容器，统一管理所有购物车状态内容，避免JS未加载时显示空白
• JS补充了空购物车的动态处理，保持和初始模板逻辑一致
• 新增多事件监听：覆盖商品添加、修改、删除等所有购物车变化场景，确保计数实时更新
• 保留了settings.cart_count的判断，遵循后台的显示开关设置

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