Shopify Liquid实现无跳转加入购物车按钮的方法咨询

你当前的表单会跳转至购物车页面，是因为使用了普通的POST提交。要实现仅添加商品并留在当前页面，需要通过AJAX请求处理表单提交，以下是具体实现方案：

方案一：原生JavaScript + Shopify AJAX API #

先修改表单，添加ID方便JS绑定事件：

<form id="add-to-cart-form" method="post" action="/cart/add">
  <input name="id" value="{{ product.variants.first.id }}" type="hidden" />
  <button type="submit" class="add-to-cart-btn">ORDER NOW</button>
</form>

再添加JavaScript代码，拦截表单提交、发送AJAX请求：

// 监听表单提交事件
document.getElementById('add-to-cart-form').addEventListener('submit', function(e) {
  e.preventDefault(); // 阻止默认页面跳转
  const formData = new FormData(this);

  // 调用Shopify的AJAX添加购物车接口
  fetch('/cart/add.js', {
    method: 'POST',
    body: formData
  })
  .then(response => response.json())
  .then(data => {
    // 成功后的提示，可根据需求自定义
    alert('商品已加入购物车');
    // 可选：更新页面上的购物车商品数量
    updateCartCount();
  })
  .catch(error => {
    console.error('添加失败:', error);
    alert('添加购物车失败，请重试');
  });
});

// 可选函数：更新购物车计数器
function updateCartCount() {
  fetch('/cart.js')
  .then(response => response.json())
  .then(cart => {
    // 替换成你页面中购物车数量元素的选择器
    const cartCounter = document.querySelector('.cart-count');
    if (cartCounter) {
      cartCounter.textContent = cart.item_count;
    }
  });
}

关键说明：

• 使用/cart/add.js接口（而非/cart/add），该接口返回JSON数据，不会触发页面跳转
• 必须调用e.preventDefault()阻止表单的默认提交行为
• 成功回调中可添加自定义提示、更新购物车UI等操作

方案二：使用Shopify内置的product-form组件（适用于官方主题） #

如果使用Dawn等Shopify官方主题，可直接用Liquid内置的product-form标签，主题会自动封装AJAX逻辑：

{% form 'product', product %}
  <input type="hidden" name="id" value="{{ product.variants.first.id }}">
  <button type="submit" name="add" class="btn">ORDER NOW</button>
{% endform %}

这种方式无需额外编写JS，主题会自动处理无刷新添加逻辑，同时兼容多规格商品的变体切换。

注意事项 #

• 确保店铺主题已启用AJAX购物车功能（大部分主题默认开启，可在主题设置中确认）
• 若商品有多规格，需额外处理变体切换逻辑，动态更新隐藏输入框的id值

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