jquery Shopify -重写Add to cart按钮代码以发送包含定制产品的自 AJAX 请求

jvidinwx  于 2023-01-08  发布在  jQuery
关注(0)|答案(1)|浏览(119)

我在产品页面上创建了一个自定义的"Related products"部分,允许用户选择额外的产品。
我已经编写了jQuery脚本,将两个选定的项目和主要项目上的产品页面,你是在和添加到购物车:

$(document).ready(function(){
  $('.btn').click(function() {
  var items = [];
  var checkboxes = ['product-a', 'product-b'];
  var selected_variation = $('#product_variants').val();

  items.push({ quantity: parseInt($('input.quantity__input').val()), id: '' + {{ product.selected_or_first_available_variant.id }} });

  document.getElementById('product-b').value = selected_variation;
  for(var i = 0; i < checkboxes.length; i++) {
    if($('#' + checkboxes[i]).is(':checked')) {
      items.push({ quantity: 1, id: $('#' + checkboxes[i]).val() });
    }
  }

  $.ajax({
    type: "POST",
    url: '/cart/add.js',
    data: { items: items },
    success: function(data) {
      console.info('success',data);
    },
  dataType: 'application/json'
  });
  });
});

我计划只是从原来的添加到购物车按钮代码中删除type="submit",并给予它类。btn,所有这些工作,但我没有计划的是,现在如果有一个错误,例如当你试图添加更多的项目到卡,然后有可用的,它不会显示。
我想重写原来的按钮与数据的变化,它发送,但保持其余的代码原来的。
我使用的是shopify的黎明主题。
有什么想法,我应该如何着手解决这个问题?我退出新的Shopify,所以很抱歉,如果我犯了一些愚蠢的编码错误或使用不良做法。
我已经检查了Shopify AJAX API页面和他们的主题文档,但在那里找不到我的解决方案。

ijnw1ujt

ijnw1ujt1#

如果你想将一个变体的库存限制在可用数量或更少,你必须做一些工作。首先,你知道产品和它的变体ID。你可以使用它来询问Shopify当前有多少库存可用,或者,更简单的是,当你首先使用Liquid渲染产品时,你也可以渲染出库存数量。
有了这个数字,你可以告诉客户,如果库存中只有7个,他们就没有8个。与Shopify AJAX API调用无关。
添加这种级别的控制可能会有点粗糙,但最终,Shopify AJAX 调用非常简单,你可以得到200分,也可以不这样做。如何进行取决于你。听起来你已经很好地掌握了基础知识,所以继续吧!

相关问题