Shopify Debut主题购物车页面实现加减按钮无刷新更新小计

1. 修正数量加减按钮的HTML代码 #

替换你现有按钮+输入框代码为以下内容（保留原有样式类，仅优化事件绑定逻辑）：

<button class="qty-btn qty-btn-minus" data-item-key="{{ item.key }}">-</button>
<label for="updates_large_{{ item.key }}" class="cart__qty-label" data-quantity-label-desktop>{{ 'cart.label.quantity' | t }}</label>
<input id="updates_large_{{ item.key }}" class="cart__qty-input" type="number"
  name="updates[]" value="{{ item.quantity }}" min="0" pattern="[0-9]*"
  data-quantity-input data-quantity-item="{{ forloop.index }}" data-quantity-input-desktop data-role="product-quantity-desktop" data-item-key="{{ item.key }}">
<button class="qty-btn qty-btn-plus" data-item-key="{{ item.key }}">+</button>

这里把内联onclick改为类名+data属性绑定，避免代码耦合，更便于后续维护。

2. 添加无刷新更新的JavaScript逻辑 #

在cart-templated.liquid文件末尾（{% schema %}标签之前）插入以下JS代码：

<script>
document.addEventListener('DOMContentLoaded', function() {
  // 获取所有数量按钮和输入框
  const qtyButtons = document.querySelectorAll('.qty-btn');
  const qtyInputs = document.querySelectorAll('.cart__qty-input');

  // 绑定按钮点击事件
  qtyButtons.forEach(button => {
    button.addEventListener('click', function(e) {
      e.preventDefault();
      const itemKey = this.dataset.itemKey;
      const input = document.querySelector(`.cart__qty-input[data-item-key="${itemKey}"]`);
      // 判断是加还是减
      const delta = this.classList.contains('qty-btn-plus') ? 1 : -1;
      let newQty = parseInt(input.value) + delta;
      // 确保数量不小于0
      newQty = Math.max(newQty, 0);
      updateCart(itemKey, newQty, input);
    });
  });

  // 绑定输入框手动修改事件
  qtyInputs.forEach(input => {
    input.addEventListener('change', function() {
      const itemKey = this.dataset.itemKey;
      let newQty = parseInt(this.value) || 0;
      newQty = Math.max(newQty, 0);
      updateCart(itemKey, newQty, this);
    });
  });

  // 核心AJAX更新购物车函数
  function updateCart(itemKey, newQty, inputElement) {
    // 禁用按钮和输入框防止重复提交
    const buttons = document.querySelectorAll(`.qty-btn[data-item-key="${itemKey}"]`);
    buttons.forEach(btn => btn.disabled = true);
    inputElement.disabled = true;

    // 调用Shopify原生AJAX接口更新购物车
    fetch('/cart/update.js', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'Accept': 'application/json'
      },
      body: JSON.stringify({
        updates: {
          [itemKey]: newQty
        }
      })
    })
    .then(res => res.json())
    .then(cart => {
      // 更新当前商品的小计
      const itemRow = inputElement.closest('.cart__row');
      const targetItem = cart.items.find(item => item.key === itemKey);
      if (targetItem && itemRow) {
        const subtotalEl = itemRow.querySelector('.cart__subtotal');
        if (subtotalEl) subtotalEl.textContent = targetItem.final_price.formatted_with_symbol;
      }

      // 更新购物车总计
      const totalEl = document.querySelector('.cart__total-price');
      if (totalEl) totalEl.textContent = cart.total_price.formatted_with_symbol;

      // 数量为0时移除商品行（带淡出动画）
      if (newQty === 0 && itemRow) {
        itemRow.style.opacity = 0;
        setTimeout(() => itemRow.remove(), 300);
      }

      // 恢复按钮和输入框状态
      buttons.forEach(btn => btn.disabled = false);
      inputElement.disabled = false;
      inputElement.value = newQty;
    })
    .catch(err => {
      console.error('购物车更新失败:', err);
      // 出错后恢复操作权限
      buttons.forEach(btn => btn.disabled = false);
      inputElement.disabled = false;
    });
  }
});
</script>

3. 可选：添加按钮基础样式 #

如果需要给加减按钮添加基础视觉样式，在主题的theme.scss.liquid或base.css文件中插入：

.qty-btn {
  padding: 4px 12px;
  border: 1px solid #ccc;
  background: #f8f8f8;
  cursor: pointer;
  border-radius: 4px;
}
.qty-btn:hover {
  background: #e8e8e8;
}
.qty-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.cart__qty-input {
  width: 60px;
  text-align: center;
  margin: 0 8px;
}

核心说明 #

• 采用Shopify官方原生的/cart/update.js AJAX接口，无需额外配置，兼容性强
• 通过data-item-key关联商品唯一标识，确保精准更新对应商品
• 处理了重复提交、数量边界、UI同步更新等细节问题
• 支持按钮点击和手动输入两种数量调整方式

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