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