Jquery 在Shopify中使用AJAX添加到购物车
默认情况下,当您在Shopify中将产品添加到购物车时,它会将您重定向到购物车页面。我想做的是将它添加到购物车中,而不刷新页面 Shopify在这里提供了一些关于如何做到这一点的说明:,但我对AJAX非常不熟悉,所以它给我带来了一些麻烦 它们提供了一个JavaScript文件(),其中包含一些函数,主要函数有:Jquery 在Shopify中使用AJAX添加到购物车,jquery,ajax,shopify,Jquery,Ajax,Shopify,默认情况下,当您在Shopify中将产品添加到购物车时,它会将您重定向到购物车页面。我想做的是将它添加到购物车中,而不刷新页面 Shopify在这里提供了一些关于如何做到这一点的说明:,但我对AJAX非常不熟悉,所以它给我带来了一些麻烦 它们提供了一个JavaScript文件(),其中包含一些函数,主要函数有: // ------------------------------------------------------------------------------------- // P
// -------------------------------------------------------------------------------------
// 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);
};
及
我真的不确定哪一个更好用在我想做的事情上,所以我两个都试过了。
首先,我试着这样安排我的产品提交表:
<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>
这似乎也没有效果
他们在这里为他们的Ajax提供了一个演示页面:
当我尝试复制Shopify.addItemFromForm示例的代码时,当我尝试添加到购物车时,它会向我发出此错误警报:“购物车错误(400):我们无法将此项目添加到您的购物车,因为没有向我们传递任何变体ID。(请求ID:864F24C82D1BFBAE45429603674861E)
我做错了什么?我是否使用了错误的函数?我是否传递了错误的论点?我已经尝试了两天以上的不同版本,但没有取得任何明显的进展。非常感谢您的帮助
更新 通过一些修补和斯蒂芬的回答解决了这个问题。有效的代码:
{% 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 %}
{%if product.options.size>1%}
{%elsif product.options.size==1和(product.variants.size>1或product.options[0]!=“Title”)%}
{%else%}
{%endif%}
前两个条件检查产品是否有选项,如果有,从所选选项中获取变量值。else用于没有选项的项目,并且
{{product.variants.first.id}
获取正确的变量id。我认为您希望使用Shopify.addItem
而不是Shopify.addItemFromForm
(当然,除非您有想要使用的表单中的变量id和数量)
这是两种方法的一个例子。我修改了您在问题中链接到的代码
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>
变体:
数量:
(“add-item-form”)
要在代码中签入以下内容:
是否返回当前所选变量的正确值{{variant.id}
函数将表单id作为参数,而不是变量idShopify.addItemFromForm
<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="">
所以我解决了我原来问题中的一个问题,但你的回答实际上解决了下一个问题。{{variant.id}确实没有返回任何内容,所以我不得不使用{{product.variants.first.id}。但如果有多个选项,不管选择了什么,它只会添加第一个选项。因此,我设置了一个条件,如果有选项,则改用“#product select-{{product.id}}option:selected”。我将用我现在使用的完整代码编辑我的问题。谢谢你的远见:)
<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>
<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="">
$(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);
}
});
})