我在Shopify上创建了一个大型快速订购表单,涉及约200种产品。每个产品都有一个文本框,用户可以在其中输入所需的数量。当他们在文本框中输入数字时,将项目添加到购物车所需的数据将添加到数组中。当用户按下“添加到购物车”时,一个函数将在数组中运行,通过Ajax将每个数据传递到购物车。
我遇到的问题是,在用户添加大量产品的情况下,假设为50,该过程需要很长时间才能运行。添加50个产品将涉及50个Ajax调用。我试过在一次调用中传递整个数组,但问题是Shopify不允许我访问Ajax的PHP部分,因此我无法更新它以容纳作为数组传入的数据。
还有另一种方法可以加快这个过程吗?一种在一次Ajax调用中发送数据的方法,无需编辑PHP。
这是我的JS:
$(document).ready(function () {
var updated = new Array();
/**
** Creates array of textboxes that have input.
** Updates the array, if a textbox's input is changed.
**/
$("input[type=number]").on("input", function() {
var new_item = true;
var variant = $(this).parent().children("input[type=hidden]").val();
var quantity = $(this).val();
if(updated.length <= 0) {
updated.push({
variant_id: variant,
quantity: quantity
});
}
else if (updated.length > 0) {
for (var key in updated) {
if(parseInt(updated[key].variant_id) == variant) {
updated[key].quantity = quantity;
new_item = false;
return false;
}
}
if(new_item == true) {
updated.push({
variant_id: variant,
quantity: quantity
});
}
}
});
/**
** On press of "Add to Cart", runs through array of textboxes and posts values to cart.
**/
$("#submit-table").click(function(e) {
e.preventDefault();
$(this).val("Adding to Cart...");
var toAdd = new Array();
for(i=0; i < updated.length; i++){
if(updated[i].quantity === "") {
updated[i].quantity = 0;
}
toAdd.push({
variant_id: updated[i].variant_id,
quantity: updated[i].quantity
});
}
function moveAlong(){
if (toAdd.length) {
var request = toAdd.shift();
var tempId= request.variant_id;
var tempQty = request.quantity;
var params = {
type: 'POST',
url: '/cart/add.js',
data: 'quantity='+tempQty+'&id='+tempId,
dataType: 'json',
success: function(line_item) {
moveAlong();
},
error: function() {
moveAlong();
}
};
$.ajax(params);
}
else {
document.location.href = '/cart';
}
};
moveAlong();
});
});