Shopify快速购物车Upsell异常：点击跳转主购物车问题求助

问题根源分析 #

你的问题主要由两个原因导致：

1. Variant ID获取错误：JS代码中通过$("[data-available-variant-id]").val()获取商品ID，但Upsell表单里的隐藏输入框没有该属性，导致ID值为undefined，AJAX请求失败后触发表单默认提交行为，直接跳转到主购物车。
2. 事件绑定范围过大：当前代码给全局所有[data-add-button]按钮绑定事件，无法限定Upsell功能仅在Quick-cart区域内生效。

解决方案 #

1. 修改Upsell Liquid代码

给隐藏输入框添加对应属性，并设置表单提交目标为隐藏iframe，双重防止跳转：

{% form 'product', products, data-product-form: '', class: 'product-handle quick-cart-upsell-form', id:"upsell-form", target:"dummyframe" %}
  <h1 style="text-align: center">Recommended Product</h1>
<div class="upsell-div" style="display: flex">

  <a href="{{ product.url }}">
      <img style=" width: 100px;
      height: 100px; 
      object-fit: cover; 
      margin-right: 10px;" src="{{ products | img_url: '200x200' }}" alt="{{ products.title }}">
      </a>
    <div class="upsell-details" style=" line-height: 1;">
      <span class="meta">
      <h3 style="text-align: left;" href="{{ products.url }}">{{ products.title }}</h3> 
      <p style="text-align: left;">{{ products.price | money }}</p>
      <iframe name="dummyframe" id="dummyframe" style="display: none;"></iframe>

<input name="id" value="{{ products.variants.first.id }}" type="hidden" data-available-variant-id />
<button
       type="submit"
       class="bttn bttn--full mb2 button upsell-add-button {% if block.settings.show_dynamic_checkout %}bttn--secondary{% endif %} "
       data-add-button
       data-lang-available="{{ 'products.product.add_to_cart' | t }}"
       data-lang-sold-out="{{ 'products.product.sold_out' | t }}"
>
<span class="bttn__spinner">
{% render 'icon-spinner' %}
</span>

<span data-add-button-text class="add-btn-txt-cstm">
{{ 'products.product.add_to_cart' | t }} - {{ products.variants.first.price | money }}
</span>
</button>
      </span>
  </div>

</div>
{% endform %}
{% endfor %}
</div>

• 给隐藏输入框添加data-available-variant-id属性，匹配JS选择器
• 给表单添加target:"dummyframe"，即使AJAX失败，表单提交也会在隐藏iframe内完成，不会跳转页面
• 给表单添加专属类名quick-cart-upsell-form，方便后续更精准的选择器定位

2. 修改custom.js代码

限定事件绑定范围到Quick-cart内，同时正确获取当前表单的商品ID：

const cartButtonHandler = () => {
  // 仅绑定Quick-cart内的Upsell按钮，支持动态加载的Quick-cart
  $(document).on("click", ".quick-cart [data-add-button]", function (e) {
    e.preventDefault();
    // 阻止所在表单的默认提交行为
    $(this).closest("form").submit(function(e) {
      e.preventDefault();
    });
    
    let current_elem = $(this);
    // 从当前按钮所在表单内获取商品ID，避免全局查找错误
    let id = current_elem.closest(".quick-cart-upsell-form").find("[data-available-variant-id]").val();
    let quantity = $("#Quantity").val();

    quantity = typeof quantity === 'undefined' ? 1 : quantity;

    $.ajax({
      type: 'POST',
      url: '/cart/add.js',
      data: {
        quantity: quantity,
        id: id
      },
      dataType: 'json',
      beforeSend: function () {
        current_elem.find(".bttn__spinner").show(); // 仅显示当前按钮的加载动画
      },
      success: function (data) {
        current_elem.find(".bttn__spinner").hide();
        quantityUpdate();
        $(".quick-cart__items").load(" .quick-cart__items>*", '');
        appendQuickCart();
        setTimeout(() => {
          $(".quick-cart__icon").eq(0).trigger("click");
          $("#custom_heading_cart").load(" #custom_heading_cart");
        }, 1000);
      },
      error: function (xhr) {
        current_elem.find(".bttn__spinner").hide();
        console.log("Error occured.please try again", xhr.statusText + xhr.responseText);
        if(JSON.parse(xhr.responseText).message == 'Cart Error'){
          current_elem.find('.add-btn-txt-cstm').text('We have reached our stock limit')
        }
      }
    });
  });
};

cartButtonHandler();

• 使用事件委托$(document).on("click", ".quick-cart [data-add-button]", ...)，确保动态加载的Quick-cart内按钮也能触发事件
• 通过current_elem.closest(".quick-cart-upsell-form")精准定位当前按钮所在的Upsell表单，避免全局查找错误
• 仅操作当前按钮的加载动画，避免影响页面其他按钮

内容的提问来源于stack exchange，提问作者Aakash Amod Rajput