使用复选框将数量添加到购物车

Question

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

一切正常 - 除了解决添加到购物车后，我无法弄清楚 jQuery 将复选框直接连接到产品的数量 1。

这是我在 Shopify 上的 Liquid 中的代码 sn-p：

<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>

<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>

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

{% 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>

好像很接近了。目前 - 单击任何复选框会将所有产品添加到购物车。

我想点击一个复选框并将其转换为该特定产品的 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 化，但如果您愿意，您只需要执行以下操作：

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 */
    }
  });
});

希望这会有所帮助！