mercredi 18 janvier 2017

Using checkboxes to add quantity to cart with

Working on a product page where multiple products are offered up. Checkboxes are used to select up to 3 products at which point they can be added to the cart - pulling products from the store inventory.

All is working fine - except I cannot figure out the jquery to connect the checkbox directly to a quantity of 1 for the product once the add to cart is resolved.

Here is my code snippet in Liquid on Shopify

<script type="text/javascript" charset="utf-8">
//<![CDATA[
// Including jQuery conditionnally.
if (typeof jQuery === 'undefined') {
    document.write(http://ift.tt/eSWUvL);
        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!");
   }
 
});
 
  
  
  

var length = ;

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

And here is product page script for the actual list


<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>
                        
                </tbody>
        </table>
        <p style='text-align:right;'>
                <input type="submit" value="Add to cart" id="submit-table"/>
        </p>
</form>

Seems like it's close. At the moment - clicking any checkbox adds all products to cart.

I want to click a checkbox and have that translate to 1 quantity for that specific product.

Help much appreciated.

Best




Aucun commentaire:

Enregistrer un commentaire