Question

在提供多种产品的产品页面上工作。复选框用于选择最多3个产品，此时可以将它们添加到购物车中 - 从商店库存中提取产品。

一切正常 - 除非我无法找出jquery，一旦解决了添加到购物车的情况，将复选框直接连接到产品的数量为1。

以下是我在Shopify上的Liquid代码段

＆＃13;

<script type="text/javascript" charset="utf-8">
//<![CDATA[
// Including jQuery conditionnally.
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>

<script>
  $('input[type=checkbox]').change(function(e){
   if ($('input[type=checkbox]:checked').length > 3) {
        $(this).prop('checked', false)
        alert("Sorry you may only select up to three!");
   }
 
});
 
  
  
  
{% assign linklist = linklists['order-form'] %}
var length = {{ linklist.links.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) { 
						//console.log("success!");
						moveAlong();

					},
					error: function() {
						//console.log("fail");
						moveAlong();
						
					}
				};
				$.ajax(params);
			}
			else {				
				document.location.href = '/cart';
			}  
		};
		moveAlong();
	});
});

</script>

＆＃13;

这是实际列表的产品页面脚本

＆＃13;

{% assign linklist = linklists['order-form'] %}
<form>
	<table cellspacing="0" cellpadding="0" border="1">  
		<tbody>
			<tr id="cart-headlines">
				<td class="cart-thumb">&nbsp;</td>
				<td class="cart-title">Product Title</td>     
				<td class="cart-unitprice">Price</td>                       
				<td class="cart-quantity">Select</td>                 
			</tr>
			{% for link in linklist.links %}    
			<tr>
				<td >
					<a href="" title="View Page">
						<img src="{{ link.object.featured_image | product_img_url: 'thumb' }}" alt="{{ link.object.title | escape }}" />
					</a>
				</td>
				<td >
					<a href="{{ link.object.url}}" title="View {{item.title | escape }} Page">
						{{ link.object.title | truncatewords:5 }}
					</a>
				</td>
				<td>
					{{ link.object.variants.first.price | money }}
				</td>
				<td>
					<input type="hidden"  value="{{ link.object.variants.first.id }}" id="variant-{{ forloop.index0 }}"/>
                 
					<input type="checkbox"  id="quantity_id" class="single-checkbox" 
       />				</td>
			</tr>
			{% endfor %}
		</tbody>
	</table>
	<p style='text-align:right;'>
		<input type="submit" value="Add to cart" id="submit-table"/>
	</p>
</form>

＆＃13;

似乎很接近。目前 - 点击任意复选框可将所有产品添加到购物车。

我想点击一个复选框，将该转换为该特定产品的1个数量。

非常感谢。

最佳

Answer 1

如果没有指定数量，Shopify默认添加一个数量，Shopify也有同时向购物车添加多个产品的内置方式！

如果您执行以下操作来设置复选框：

{% for variant in product.variants %}
  <p><label><input type="checkbox" name="id[]" value="{{ variant.id }}">{{ variant.title }}</label></p>
{% endfor %}

然后name="id[]"（注意方括号）将告诉Shopify添加所有这些变体ID。请注意，Shopify仅允许使用单个数量字段，这将同时应用于所有项目 - 在您的情况下，听起来就像您想要的那样。

你可以在test store看到一个简短的样本 - 我没有AJAX-ified它，但如果你想要你，只需要做一些像：

jQuery(/* appropriate selector */).on( /* submit or click, as appropriate */, function(evt){

  evt.preventDefault();

  var form = jQuery(evt.target).closest('form');

  /* Any DOM or validation stuff that needs to happen */

  jQuery.ajax({
    url:'/cart/add.js',
    type:'post',
    dataType:'json',
    data:form.serialize(),
    success:function(line_item){
      /* Whatever needs to happen on product add */
    }
  });
});

希望这有帮助！

使用复选框通过

1 个答案: