如何实现点击Add to Cart按钮不刷新页面添加商品到购物车

在商品页面为每个商品添加了「Add to Cart」按钮，但点击时页面会刷新。现有代码如下，需修改为点击按钮不刷新页面、不跳转，即可完成加购：

<div class="buy-now-bx">
  {% if card_product.available %}
    <form method="post" action="/cart/add">        
      <input type="hidden" name="id" value="{{ card_product.selected_or_first_available_variant.id }}">
      <div style="display: flex">
        <input type="hidden" name="return_to" value="back" />
        <input type="submit" value="Add to Cart" name="addbutn" id="addbutn" class="button buynow-btn" data-id="{{ card_product.variants.first.id }}"/>
      </div>
    </form>
  {% else %}
    <a class="button buynow-btn" tabindex="0" href="{{ card_product.url | default: '#' }}">Sold out</a>
  {%- endif -%}
</div>

解决方案 #

核心思路是阻止表单默认提交行为，改用Shopify的AJAX API发送加购请求，实现无刷新操作：

1. 修改HTML结构 #

保留原有模板逻辑，将表单的提交按钮改为普通按钮，并移除不必要的return_to参数：

<div class="buy-now-bx">
  {% if card_product.available %}
    <div class="add-to-cart-form">        
      <input type="hidden" name="id" value="{{ card_product.selected_or_first_available_variant.id }}">
      <div style="display: flex">
        <button type="button" class="button buynow-btn add-to-cart-btn" data-id="{{ card_product.variants.first.id }}">Add to Cart</button>
      </div>
    </div>
  {% else %}
    <a class="button buynow-btn" tabindex="0" href="{{ card_product.url | default: '#' }}">Sold out</a>
  {%- endif -%}
</div>

2. 添加JavaScript处理逻辑 #

通过监听按钮点击事件，使用fetch发送AJAX请求到Shopify的加购接口，完成无刷新加购，并可添加成功/失败提示：

// 监听所有加购按钮的点击事件
document.querySelectorAll('.add-to-cart-btn').forEach(button => {
  button.addEventListener('click', async (e) => {
    e.preventDefault();
    const variantId = button.dataset.id;
    
    try {
      // 发送POST请求到Shopify购物车添加接口
      const response = await fetch('/cart/add.js', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          'Accept': 'application/json'
        },
        body: JSON.stringify({
          id: variantId,
          quantity: 1 // 可根据需求修改购买数量
        })
      });

      if (!response.ok) throw new Error('加购失败');
      
      const data = await response.json();
      // 加购成功后的操作：比如更新购物车计数、显示提示
      console.log('商品已添加到购物车:', data);
      alert('加购成功！'); // 可替换为更美观的弹窗或页面提示
      
      // 可选：更新页面上的购物车数量显示
      const cartResponse = await fetch('/cart.js');
      const cartData = await cartResponse.json();
      document.querySelector('.cart-count')?.textContent = cartData.item_count;
      
    } catch (error) {
      console.error('加购出错:', error);
      alert('加购失败，请稍后重试');
    }
  });
});

关键说明 #

• 使用Shopify官方的/cart/add.js AJAX接口，是主题开发中实现无刷新加购的标准方式
• 阻止默认表单提交行为是避免页面刷新的核心
• 可根据需求扩展成功后的逻辑，比如更新购物车悬浮窗、显示商品缩略图等

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