通过Shopify API实现数量变更时更新购物车遇到故障求助

修复方案 #

• 补充请求回调定位问题
  你当前的代码没有监听接口的返回结果，只有网络层报错才会在控制台输出，接口返回的业务错误（比如行键无效、库存不足）不会默认打印，添加回调即可看到具体错误原因。
• 修正数量值的类型
  从input取到的val是字符串类型，传递给接口前要转成数字，避免接口校验不通过。
• 确认行键有效性
  控制台打印的loopKey需要和请求/cart.js返回的对应商品条目的key完全一致，注意检查主题渲染data-key属性时是否存在多余空格、字符遗漏的问题。
• 额外说明
  接口调用成功后页面不会自动刷新购物车相关的价格、数量展示，你需要在请求成功的回调里手动更新页面上的小计、总价等DOM内容，不然会出现接口已经更新成功但页面显示还是旧数据的情况。

修改后完整代码 #

<!-- Quantity Box on Cart Page -->
<script>
  $('.qty_wrap .qty_button').on('click', function(){
    // 取值直接转数字避免类型错误
    var qty = parseInt($(this).parent('.qty_wrap').find('.qty_input').val(), 10);
    var currentVariant = $(this).parent('.qty_wrap').find('.qty_input').attr("data-variant");

    var subTotal = $(this).parents('.card').find('#subtotal').text();
    var loopKey = $(this).parents('.card').attr("data-key");

    if($(this).hasClass('qty_plus')) {
      qty++;
    }else {
      if(qty > 1) {
        qty--;
      }
    }
    $(this).parent('.qty_wrap').find('.qty_input').val(qty);
    console.log('行键', loopKey);
    console.log('更新后数量', qty);

    $.post('/cart/change.js', { id: loopKey, quantity: qty })
    .done(function(res) {
      console.log('购物车更新成功', res);
      // 此处添加更新页面小计、总价等DOM的逻辑
    })
    .fail(function(err) {
      console.error('购物车更新失败', err.responseJSON ? err.responseJSON.message : '未知错误');
    })
  });
</script>

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