I am trying to execute some code when the Shopify checkout form is submitted but it is not firing.
$(document).ready(function () {
$(document).on('submit', '.ajax-cart__cart-form', function(e) {
e.preventDefault(); // Prevent the default form submission
alert('testing');
if ($('#add-product-checkbox').is(':checked')) {
// Use Shopify AJAX API to add the product to the cart
$.ajax({
type: 'POST',
url: '/cart/add.js',
data: {
quantity: 1, // Adjust the quantity as needed
id: 12345 // Variant ID of the product to add
},
dataType: 'json',
success: function(response) {
// Redirect the user to the checkout page
window.location.href = '/checkout';
},
error: function(jqXHR, textStatus, errorThrown) {
console.log('Error adding the product to the cart');
console.log(textStatus);
}
});
} else {
// If the checkbox is not checked, proceed to the regular checkout
window.location.href = '/checkout';
}
});
});
My classes are correct and other jQuery code fires within the document.ready block but this doesn’t get touched.
Thanks!