Shopify Dawn主题：自定义加购按钮AJAX请求及错误提示修复

不用完全替换原按钮的逻辑，而是拦截表单提交事件，修改要发送的商品数据，同时复用主题自带的错误提示、库存校验等逻辑。具体步骤如下：

1. 保留原按钮的原生属性 #

不要移除原加入购物车按钮的type="submit"，也不需要加自定义的.btn类，保持按钮的原生提交行为。

2. 拦截表单提交，构建多商品数据 #

监听产品表单的submit事件，阻止默认提交，然后收集主商品和选中的附加商品，构建符合Shopify AJAX要求的items数组，再调用主题原有的AJAX加购逻辑（或复用主题的错误提示组件处理反馈）。

完整代码示例 #

$(document).ready(function(){
  // 监听Dawn主题产品表单的提交事件（表单通常带product-form类）
  $('.product-form').on('submit', function(e) {
    // 阻止默认表单跳转提交
    e.preventDefault();
    
    // 1. 收集主商品信息
    const mainQuantity = parseInt($('input.quantity__input').val()) || 1;
    const mainVariantId = {{ product.selected_or_first_available_variant.id }};
    const selectedVariation = $('#product_variants').val();
    
    // 2. 初始化商品数组，先加入主商品
    const items = [
      { quantity: mainQuantity, id: mainVariantId.toString() }
    ];
    
    // 保留你原有的更新product-b变体值的逻辑
    document.getElementById('product-b').value = selectedVariation;
    
    // 遍历复选框，添加选中的附加商品
    const checkboxes = ['product-a', 'product-b'];
    checkboxes.forEach(checkboxId => {
      const $checkbox = $('#' + checkboxId);
      if ($checkbox.is(':checked')) {
        items.push({ quantity: 1, id: $checkbox.val() });
      }
    });
    
    // 3. 用AJAX提交，复用主题的错误提示组件
    $.ajax({
      type: "POST",
      url: '/cart/add.js',
      data: JSON.stringify({ items: items }),
      contentType: 'application/json',
      success: function(data) {
        // 触发主题自带的购物车更新事件，同步购物车图标、弹窗等
        document.dispatchEvent(new CustomEvent('cart:update', { bubbles: true }));
        // 用主题的提示元素显示成功信息
        const $errorEl = $('.product-form__error');
        $errorEl.hide().text('商品已成功添加到购物车').addClass('product-form__success').show();
      },
      error: function(xhr) {
        // 提取Shopify返回的错误信息，显示在主题默认的错误容器里
        const errorMsg = xhr.responseJSON?.message || '添加商品失败，请重试';
        $('.product-form__error').text(errorMsg).show();
      },
      dataType: 'application/json'
    });
  });
});

3. 关键说明 #

• 复用主题错误提示：Dawn主题的产品表单默认自带.product-form__error元素，专门用于展示库存不足、变体无效等错误，直接利用这个元素就能显示AJAX请求的错误反馈。
• 同步购物车状态：成功加购后触发cart:update自定义事件，让主题自动更新购物车图标数量、侧边弹窗等组件，和原生加购行为完全一致。
• 兼容原生逻辑：如果用户没有选中任何附加商品，这个逻辑会和原按钮的默认行为完全相同，不影响正常单商品加购。

4. 额外注意事项 #

• 确保你的复选框product-a和product-b的value属性是正确的商品变体ID。
• 如果你的Dawn主题产品表单类不是.product-form，可以在浏览器控制台查看表单的实际类名替换进去。

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