チェックボックスを使用して数量をカートに追加

Question

複数の製品が提供されている製品ページで作業する。チェックボックスは、最大3つの製品を選択するために使用されます。その時点で、店舗の在庫から製品を引き出すことができます。

すべてがうまくいきます - カートに追加された商品の数量1にチェックボックスを直接接続するjqueryはわかりませんが、ここで

はShopify

<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 }}); 
 
\t 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() { 
 
\t $("#quantity-0").focus();  
 
\t $("#submit-table").click(function(e) {  
 
\t \t e.preventDefault(); 
 
\t \t //array for Variant Titles 
 
\t \t var toAdd = new Array(); 
 
     var qty ; 
 
\t \t for(i=0; i < length; i++){ 
 
     
 
\t \t \t toAdd.push({ 
 
\t \t \t \t variant_id: $("#variant-"+i).val(),   
 
\t \t \t \t quantity_id: $("#quantity-"+i).val() || 0 
 
\t \t \t }); 
 
\t \t } 
 
    
 
     
 
     
 
      
 
    
 

 
     
 
     
 
     
 
\t \t function moveAlong(){ 
 
\t \t \t if (toAdd.length) { 
 
\t \t \t \t var request = toAdd.shift(); 
 
\t \t \t \t var tempId= request.variant_id; 
 
\t \t \t \t var tempQty = request.quantity_id; 
 
\t \t \t \t var params = { 
 
\t \t \t \t \t type: 'POST', 
 
\t \t \t \t \t url: '/cart/add.js', 
 
\t \t \t \t \t data: 'quantity='+tempQty+'&id='+tempId, 
 
\t \t \t \t \t dataType: 'json', 
 
\t \t \t \t \t success: function(line_item) { 
 
\t \t \t \t \t \t //console.log("success!"); 
 
\t \t \t \t \t \t moveAlong(); 
 

 
\t \t \t \t \t }, 
 
\t \t \t \t \t error: function() { 
 
\t \t \t \t \t \t //console.log("fail"); 
 
\t \t \t \t \t \t moveAlong(); 
 
\t \t \t \t \t \t 
 
\t \t \t \t \t } 
 
\t \t \t \t }; 
 
\t \t \t \t $.ajax(params); 
 
\t \t \t } 
 
\t \t \t else { \t \t \t \t 
 
\t \t \t \t document.location.href = '/cart'; 
 
\t \t \t } 
 
\t \t }; 
 
\t \t moveAlong(); 
 
\t }); 
 
}); 
 

 
</script>

そして、ここでの液体の私のコードスニペットは、実際のリスト

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

の製品ページのスクリプトであります

このような感じです。現時点では、チェックボックスをクリックすると、すべての商品がカートに追加されます。

チェックボックスをクリックしてその特定の製品の1つの数量に換算します。

大変助けになりました。

ベスト

何の量が指定されていない場合は、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[]"は、（角括弧に注意してください）、それらのバリアントIDのすべてを追加するShopifyを教えてくれます。 Shopifyでは、1つの数量フィールドのみを使用することができます。これは、すべてのアイテムに同時に適用されます。

あなたは私の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 */ 
    } 
    }); 
}); 

希望を！