在 Shopify 中使用 AJAX 添加到购物车答案

【问题标题】：Add to Cart using AJAX in Shopify在 Shopify 中使用 AJAX 添加到购物车
【发布时间】：2013-12-17 19:57:18
【问题描述】：

默认情况下，当您在 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',
      url: '/cart/add.js',
      data: jQuery('#' + form_id).serialize(),
      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);
};

我真的不确定哪一个更适合我正在尝试做的事情，所以我都尝试了。首先，我尝试这样安排我的产品提交表单：

<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}}, 1, 'okay')"（return 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。

【问题讨论】：

标签： jquery ajax shopify

【解决方案1】：

我认为你想使用Shopify.addItem 而不是Shopify.addItemFromForm（当然，除非你有你想要使用的形式的变体 ID 和数量）。

以下是两种方式的示例。我修改了您在问题中链接到的demo page 的代码。

Shopify.addItem：

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

Shopify.addItemFromForm：

<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>

检查代码的几件事：

{{variant.id}} 是否为当前选择的变体返回了正确的值？
Shopify.addItemFromForm 函数采用表单 id 作为参数，而不是变体 id。

【讨论】：

所以我从最初的问题中解决了一个问题，但您的回答实际上最终解决了出现的下一个问题。 {{variant.id}} 确实没有返回任何东西，所以我不得不使用 {{product.variants.first.id}} 代替。但是如果有多个选项，它只会添加第一个，而不管选择了什么。所以我设置了一个条件，如果有选项，请改用“#product-select-{{ product.id }} option:selected”。我将使用我现在使用的完整代码编辑我的问题。感谢您的远见:)

【解决方案2】：

只需按照以下步骤操作即可：第一步：在你的产品页面模板中添加这行代码，复制粘贴

<button type="submit" name="add" aria-label="Add to cart" class="btn product-form__cart-submit btn--secondary-accent ad_to_cart" id="ad_to_cart" aria-haspopup="dialog" data-add-to-cart="">

第 2 步：转到您的资产目录并打开它theme.js 并通过以下代码

$(document).on('click','.ad_to_cart',function(){ 
var ID = $(this).find('.ad_to_cart_id').attr("var_id"); 
$.ajax({
type: 'POST',
url: '/cart/add.js',
data: {
  quantity: 1,
  id: $(this).find('.ad_to_cart_id').attr("var_id")
},
  dataType: 'json', 
 success: function (data) { 
  $('#CartCount span:first').text(data.quantity);
  console.log(data.quantity);
 
 } 
 });
})

【讨论】：