Verwenden von Kontrollkästchen zum Hinzufügen von Mengen zu Einkaufswagen mit

Question

Arbeiten auf einer Produktseite, auf der mehrere Produkte angeboten werden. Mit Checkboxen können bis zu 3 Produkte ausgewählt werden, an denen sie zum Warenkorb hinzugefügt werden können - indem Produkte aus dem Filialinventar gezogen werden.

Alles funktioniert gut - außer ich kann nicht die jquery herausfinden, um die Checkbox direkt an eine Menge von 1 für das Produkt zu verbinden, sobald das Hinzufügen zum Warenkorb gelöst ist.

Hier ist mein Code-Schnipsel in Flüssigkeit auf 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>

Und hier Produktseite Skript für die aktuelle Liste

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

ist

Scheint wie es nah ist. Im Moment - klickt man auf ein beliebiges Kästchen, werden alle Produkte in den Warenkorb gelegt.

Ich möchte auf eine Checkbox klicken und diese auf 1 Menge für dieses spezifische Produkt übersetzen lassen.

Hilfe sehr geschätzt.

Beste

Answer 1

Shopify standardmäßig eine Menge einer Zugabe, wenn keine Menge angegeben ist, und Shopify verfügt über eine integrierte Möglichkeit, auch mehrere Produkte in den Warenkorb zur gleichen Zeit hinzuzufügen!

Wenn Sie so etwas wie dies tun, um Ihre Checkboxen einzurichten:

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

• dann die name="id[]" (beachten Sie die eckigen Klammern) werden Shopify sagen alle diese Variante IDs hinzuzufügen. Beachten Sie, dass Shopify nur die Verwendung eines einzelnen Mengenfeldes erlaubt, das für alle Artikel gleichzeitig gilt - was in Ihrem Fall genau das klingt, was Sie wollen.

Sie können eine kurze Probe in meinem sehen test store - ich habe keine AJAX-ified es, aber wenn man Sie wollten würde nur tun müssen, um so etwas wie:

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

this helps !