本文介绍了Shopify Asynchronous AJAX加入购物车部分工作吗？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在构建一个特殊的Shopify页面，其中可以通过Shopify的Ajax API将多个项目添加到购物车。我在这里设置了页面的测试版本：https://monstermuffin.com/pages/ajax-test
下面是我当前用来设置异步调用/添加到购物车的js代码：
Shopify.queue = [];
Shopify.moveAlong = function() {
if (Shopify.queue.length) {
var request = Shopify.queue.shift();
Shopify.addItem(request.variantId, request.quantity, request.properties, Shopify.moveAlong);
}
else {
//document.location.href = '/cart';
}
};
Shopify.addItem = function(id, qty, properties, callback) {
var params = {
quantity: qty,
id: id,
properties: properties
};
$.ajax({
type: 'POST',
url: '/cart/add.js',
dataType: 'json',
data: params,
success: function(){
if(typeof callback === 'function'){
callback();
}
},
error: function(){
}
});
}
function push_to_queue(variantID, quantity, properties,callback) {
Shopify.queue.push({
variantId: variantID,
quantity: quantity,
properties: properties
});
if(typeof callback === 'function'){
callback();
}
}
$('#add-helmet-panties').click(function() {
$('.quantity-field:visible').each(function() {
var thisVariant = $(this).prop('id');
var thisQuantity = parseInt($(this).val(), 10) || 0;
var theseProps = {
'Base Colour': $('#base-colour').val()
}
push_to_queue(thisVariant, thisQuantity, theseProps, Shopify.moveAlong);
});
});奇怪的是，它目前一次只向购物车添加3到4种产品。
我真的为此而苦苦挣扎！任何建议都将不胜感激。如果需要，我可以提供更多信息！
推荐答案
var length = {{ product.variants.size }};
$(document).ready(function () {
$("#quantity-0").focus();
$("#submit-table").click(function(e) {
e.preventDefault();
//array for Variant Titles
var toAdd = new Array();
var qty ;
for(i=0; i < length; i++){
toAdd.push({
variant_id: $("#variant-"+i).val(),
quantity_id: $("#quantity-"+i).val() || 0
});
}
function moveAlong(){
if (toAdd.length) {
var request = toAdd.shift();
var tempId= request.variant_id;
var tempQty = request.quantity_id;
var params = {
type: 'POST',
url: '/cart/add.js',
data: 'quantity='+tempQty+'&id='+tempId,
dataType: 'json',
success: function(line_item) {
alert("Product Added to Cart");
moveAlong();
},
error: function() {
//console.log("fail");
moveAlong();
}
};
$.ajax(params);
}
else {
document.location.href = '/cart';
}
};
moveAlong();
});
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form class="page-width">
<table>
<tr>
<th>Name</th>
<th>Quantity</th>
<th>Stock</th>
</tr>
{% for variant in product.variants %}
<tr>
<td>{{ variant.title }} - {{ variant.price | money }}</td>
<td>
<input type="hidden" value="{{ variant.id }}" id="variant-{{ forloop.index0 }}"/>
<input type="number" value="0" id="quantity-{{ forloop.index0 }}"/>
</td>
<td>{{ variant.inventory_quantity }} in stock.</td>
</tr>
{% endfor %}
</table>
<div class="purchase-section{% if product.variants.size > 1 %} multiple{% endif %}">
<div class="purchase">
{% unless product.available %}
<p>Sold Out</p>
{% else %}
<br />
<input type="submit" value="Add!" class="btn" id="submit-table"/>
{% endunless %}<input type="reset" class="btn" value="Reset">
</div>
</div>
</form>
</div>
<script type="text/javascript" charset="utf-8">
//<![CDATA[
// Including jQuery conditionally.
if (typeof jQuery === 'undefined') {
document.write({{ "http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" | script_tag | json }});
document.write('<script type="text/javascript">jQuery.noConflict();</script>');
}
//]]>
</script>这篇关于Shopify Asynchronous AJAX加入购物车部分工作吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！
本站部分内容来源互联网,如果有图片或者内容侵犯您的权益请联系我们删除！