Shopify Asynchronous Ajax Add to Cart - Working Partially?(Shopify Asynchronous AJAX加入购物车部分工作吗?)
本文介绍了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="aHR0cHM6Ly9jZG5qcy5jbG91ZGZsYXJlLmNvbS9hamF4L2xpYnMvanF1ZXJ5LzMuMy4xL2pxdWVyeS5taW4uanM="></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加入购物车部分工作吗?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持编程学习网!
沃梦达教程
本文标题为:Shopify Asynchronous AJAX加入购物车部分工作吗?


猜你喜欢
- 使用RSelum从网站(报纸档案)中抓取多个网页 2022-09-06
- Quasar 2+Apollo:错误:找不到ID为默认的Apollo客户端。如果您在组件设置之外,请使用ProvideApolloClient() 2022-01-01
- 400或500级别的HTTP响应 2022-01-01
- 失败的 Canvas 360 jquery 插件 2022-01-01
- Flexslider 箭头未正确显示 2022-01-01
- 如何使用 JSON 格式的 jQuery AJAX 从 .cfm 页面输出查 2022-01-01
- CSS媒体查询(最大高度)不起作用,但为什么? 2022-01-01
- Css:将嵌套元素定位在父元素边界之外一点 2022-09-07
- addEventListener 在 IE 11 中不起作用 2022-01-01
- Fetch API 如何获取响应体? 2022-01-01