jquery – 在Shopify中使用AJAX添加到购物车

默认情况下,当您在Shopify中将产品添加到购物车时,它会将您重定向到购物车页面.我想要做的是将它添加到购物车而不刷新页面.

Shopify在这里提供了一些如何执行此操作的说明：http://docs.shopify.com/support/your-website/themes/can-i-use-ajax-api,但我对AJAX非常不熟悉,所以它给了我一些麻烦.

它们提供了一个JavaScript文件(http://cdn.shopify.com/s/shopify/api.jquery.js?a1c9e2b858c25e58ac6885c29833a7872fcea2ba),其中包含一些函数,其原理是：

// -------------------------------------------------------------------------------------
// POST to cart/add.js returns the JSON of the line item associated with the added item.
// -------------------------------------------------------------------------------------
Shopify.addItem = function(variant_id,quantity,callBACk) {
  var quantity = quantity || 1;
  var params = {
    type: 'POST',url: '/cart/add.js',data: 'quantity=' + quantity + '&id=' + variant_id,dataType: 'json',success: function(line_item) { 
      if ((typeof callBACk) === 'function') {
        callBACk(line_item);
      }
      else {
        Shopify.onItemAdded(line_item);
      }
    },error: function(XMLhttprequest,textStatus) {
      Shopify.onError(XMLhttprequest,textStatus);
    }
  };
  jQuery.ajax(params);
};

和

// ---------------------------------------------------------
// POST to cart/add.js returns the JSON of the line item.
// ---------------------------------------------------------
Shopify.addItemFromForm = function(form_id,callBACk) {
    var params = {
      type: 'POST',data: jQuery('#' + form_id).serialize(),success: function(line_item) { 
        if ((typeof callBACk) === 'function') {
          callBACk(line_item);
        }
        else {
          Shopify.onItemAdded(line_item);
        }
      },textStatus) {
        Shopify.onError(XMLhttprequest,textStatus);
      }
    };
    jQuery.ajax(params);
};

我真的不肯定哪一个更适合我正在尝试做的事情,所以我试过了两个.
首先,我试图安排我的产品提交表格如下：

<form action="/cart/add" method="post" class="clearfix product_form" data-money-format="{{ shop.money_format }}" data-option-index="{{ option_index }}" id="product-form-{{ product.id }}">
    // yadda yadda
    <input type="submit" name="add" value="Add to Cart" id="add-to-cart" class="action_button" onclick="return false; Shopify.addItem({{variant.iD}},1,'okay')"/>
</form>

我刚刚添加onclick =“return false; Shopify.addItem({{variant.iD}},’okay’)”到输入(返回false以防止重定向和Shopify.addItem函数通过以下方式添加项目Ajax.)这些东西都没有实际工作.

我也尝试过：

<form action="/cart/add" method="post" class="clearfix product_form" data-money-format="{{ shop.money_format }}" data-option-index="{{ option_index }}" id="product-form-{{ product.id }}">
    // yadda yadda
    <input type="submit" name="add" value="Add to Cart" id="add-to-cart" class="action_button" onclick="Shopify.addItemFromForm({{variant.iD}},'okay')"/>
</form>

这似乎也没有效果.

他们在这里为他们的Ajax提供了一个演示页面：http://mayert-douglas4935.myshopify.com/pages/api

当我尝试复制他们的Shopify.addItemFromForm示例的代码时,当我尝试添加到购物车时它会给我这个错误警告：“购物车错误(400)：我们无法将此商品添加到您的购物车中,因为没有变体ID已传递给我们.(request_id：864f24c82d1bfbae4542a9603674861E)“

我究竟做错了什么？我使用了错误的功能吗？我传递了错误的论点吗？我现在已经尝试了2天以上的不同变体,我没有取得任何明显的进展.任何帮助是极大的赞赏.

更新
通过一些修补和斯蒂芬的回答解决了这个问题.有效的代码：

{% if product.options.size > 1 %}
       <a onclick="Shopify.addItem($('#product-SELEct-{{ product.id }} option:SELEcted').val(),1); return false" href="#">Add Item</a>
      {% elsif product.options.size == 1 and (product.variants.size > 1 or product.options[0] != "title") %}
       <a onclick="Shopify.addItem($('#product-SELEct-{{ product.id }} option:SELEcted').val(),1); return false" href="#">Add Item</a>
      {% else %}
       <a onclick="Shopify.addItem({{ product.variants.first.id }},1); return false" href="#">Add Item</a>
      {% endif %}

前两个条件检查产品是否有选项,如果是,则从所选选项中获取变量值. else用于没有选项的项目,{{product.variants.first.iD}}获取正确的变体ID.

<a onclick=" Shopify.addItem(jQuery('#product-SELEct option:SELEcted').val(),1); return false" href="#">Shopify.addItem</a>

<form id="add-item-form" method="post" action="#">
    variant: <input class="update" type="text" value="324748289" name="id" size="8">
    qty: <input type="text" value="1" name="quantity" size="3">
</form>
<p>
    <a onclick=" Shopify.addItemFromForm('add-item-form'); return false" href="#">Shopify.addItemFromForm</a>('add-item-form')
</p>