Shopify商品数量限制设置：超量添加购物车时触发错误提示

需结合前端即时验证（提升用户体验）与后端兜底验证（防止恶意绕过），具体实现步骤如下：

一、存储商品最大购买限制值 #

先为需要限制的商品配置自定义字段存储上限：

1. 进入Shopify后台，打开目标产品的编辑页
2. 滚动至页面底部「元字段」区域，点击「添加定义」
3. 创建元字段：
   • 名称：max_purchase_quantity
   • 命名空间：product
   • 类型：数字
4. 返回产品编辑页，为该元字段设置具体限制数值（如5）

二、前端验证（产品页面即时拦截） #

在产品模板文件（通常为product.liquid或sections/product-template.liquid）中添加JavaScript，监听加入购物车按钮点击事件：

document.addEventListener('DOMContentLoaded', function() {
  const addToCartBtn = document.querySelector('[data-add-to-cart]');
  const quantityInput = document.querySelector('[name="quantity"]');
  const maxQty = {{ product.metafields.product.max_purchase_quantity | default: 10 }};

  if (addToCartBtn && quantityInput) {
    addToCartBtn.addEventListener('click', function(e) {
      const enteredQty = parseInt(quantityInput.value, 10);
      if (isNaN(enteredQty) || enteredQty > maxQty || enteredQty < 1) {
        e.preventDefault();
        const errorMsg = enteredQty > maxQty ? `该商品最多可购买${maxQty}件` : '请输入有效购买数量';
        // 创建并显示错误提示
        const errorElement = document.createElement('div');
        errorElement.style.cssText = 'color: #dc2626; margin: 12px 0; padding: 10px; border: 1px solid #fecdd3; background: #fef2f2; border-radius: 4px;';
        errorElement.textContent = errorMsg;
        addToCartBtn.parentNode.insertBefore(errorElement, addToCartBtn);
        setTimeout(() => errorElement.remove(), 3500);
      }
    });
  }
});

三、后端兜底验证（防止绕过前端） #

前端验证可被篡改，需在购物车页面二次校验：
打开购物车模板文件（cart.liquid或sections/cart-template.liquid），在购物车项循环中添加Liquid判断：

{% for item in cart.items %}
  {% assign maxQty = item.product.metafields.product.max_purchase_quantity | default: 10 %}
  {% if item.quantity > maxQty %}
    <div style="color: #dc2626; padding: 10px 0;">⚠️ 「{{ item.product.title }}」最多只能购买{{ maxQty }}件，已自动调整数量为{{ maxQty }}</div>
    <!-- 自动修正数量 -->
    <input type="hidden" name="updates[{{ item.key }}]" value="{{ maxQty }}">
  {% endif %}
{% endfor %}

若店铺使用Ajax无刷新添加购物车，需同步修改Ajax请求逻辑，在发送请求前加入数量校验，并在请求异常时展示提示。

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