Shopify追加销售功能故障求助：点击Add按钮未加购却直接结账

嘿，我帮你排查了代码里的问题，你的追加销售表单点击后直接跳转结账，而不是把目标商品加入购物车，主要是默认表单提交行为没阻止和JS选择器错误导致的，下面是具体的问题分析和修复方案：

问题拆解 #

1. 表单默认提交没拦住：你的按钮是type="submit"，点击后浏览器会自动按照表单的action属性跳转页面，AJAX代码还没来得及执行就跳走了，这是最核心的问题。
2. JS选择器写错了：你用document.querySelector("cart--form")找表单，但你的表单id是upsell-form，应该用#upsell-form这个选择器才能找到正确的表单元素。
3. HTML小笔误：<p stye="...">里的stye拼错成style了，会导致这段文字的居中加粗样式不生效。

修复后的完整代码 #

修改后的HTML（修正拼写错误） #

<div class="cart--upsell-es">           
  {% if cart.item_count > 0 %}
    {% for item in cart.items %}
      {% if item.product_id == 8078327054657 %}
        {% assign in_cart = true %}
      {% endif %}
    {% endfor %}
  {% endif %}

  {% if in_cart %}
    <div class="cart--upsell-es">                 
      <div style="padding: 20px 0">
        <p style="text-align:center; font-weight:800">Upgrade and Save $41</p>
      </div>
      <div class="upsell-wrapper">
        <form
          id="upsell-form"
          action="/cart/add"
          method="post"
          enctype="multipart/form-data">
          <input
            type="hidden"
            name="id"
            value="8095240388929" />
          <input
            type="hidden"
            name="quantity"
            value="1" />
          <img src="https://cdn.shopify.com/s/files/1/0699/3615/2897/files/DTB-BEIGE-min.png?v=1674021338"
            width="50px"
            height="50px" />
          <label for="upsell">Double Trouble Bundle</label>
          <button
            id="upsell-btn"
            type="submit"
            value="Add">Add</button>
        </form>
      </div>
    </div>
  {% endif %}
</div>   

修改后的JavaScript（阻止默认行为+修正选择器+优化错误处理） #

if (theme.settings.cart_type === "drawer") {
  document.getElementById("upsell-btn").addEventListener("click", function(e) {
    // 第一步：阻止表单默认提交行为，避免直接跳转结账
    e.preventDefault();
    
    // 第二步：修正选择器，找到正确的追加销售表单
    var form = document.querySelector("#upsell-form");
    if (!form) {
      console.error("找不到追加销售表单");
      return;
    }
    
    var formData = new FormData(form);
    var xhr = new XMLHttpRequest();
    
    xhr.open("POST", "/cart/add.js");
    xhr.onload = function() {
      if (xhr.status === 200) {
        var item = JSON.parse(xhr.responseText);
        console.log("追加商品已成功加入购物车:", item);
        
        // 如果你需要把原来的商品从购物车移除（比如升级替换），保留下面这段代码；如果只是追加，直接删掉就行
        var xhr2 = new XMLHttpRequest();
        xhr2.open("POST", "/cart/change.js");
        // 发送JSON数据必须设置这个请求头，否则Shopify接口会报错
        xhr2.setRequestHeader("Content-Type", "application/json");
        xhr2.onload = function() {
          if (xhr2.status === 200) {
            var item2 = JSON.parse(xhr2.responseText);
            console.log("原商品已移除:", item2);
          } else {
            console.error("移除原商品失败:", xhr2.responseText);
          }
          // 最后更新购物车抽屉的UI，让用户看到变化
          if (typeof theme.updateCartDrawer === 'function') {
            theme.updateCartDrawer();
          }
        };
        xhr2.send(JSON.stringify({quantity: 0, id: 8078327054657}));
        
        // 如果不需要移除原商品，直接在这里更新购物车抽屉UI
        // if (typeof theme.updateCartDrawer === 'function') {
        //   theme.updateCartDrawer();
        // }
      } else {
        console.error("追加商品加入购物车失败:", xhr.responseText);
      }
    };
    
    // 处理请求出错的情况，比如网络问题
    xhr.onerror = function() {
      console.error("网络出错，无法添加商品到购物车");
    };
    
    xhr.send(formData);
  });
}

额外小贴士 #

• 大部分Shopify主题都自带了更新购物车抽屉的方法（比如theme.updateCartDrawer()），加购完成后调用它，用户就能立刻在抽屉里看到新加入的商品，体验更好。
• 如果你的需求只是追加商品而不是替换原商品，直接删掉代码里关于xhr2的部分就行。
• 可以加个用户提示，比如请求成功时显示“商品已加入购物车”，失败时显示“添加失败，请重试”，提升用户体验。

这样修改后，点击「Add」按钮就会通过AJAX把目标商品加入购物车，再也不会直接跳转到结账页面啦！

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