Require Customer Input only when 'Add to Cart' is clicked.

[gbkovacs]

I have just purchased the eStore and am using it for a non-profit educational conference website. We offer classes at our annual conference and I need to collect the student’s names when someone pays for a class. I have the ‘Customer Input’ field setup and found a post on how to modify the js file to require the field.

Can I require or make mandatory the Collect Customer Input field?

It works fine, the only issue is that with variations on the product (i.e. Time – AM, PM, Classtype etc.) every time you click a dropdown you get the required information dialog. Is there a way to have this code execute only when the ‘Add to Cart’ Button is pushed? I am not a php or java programmer (or a web programmer for that matter) but do have some coding background.

Thanks.

[admin]

In that case I would recommend that you undo the previous tweak. Then add something like the following to the top of that JavaScript file:

jQuery(document).ready(function($) {

$(‘.eStore-button-form’).submit(function(e) {

//check if the custom input field has a value. If not show an error and return false

});

});

If you post a link to the page where you are using it, I should be able to give you a complete example.

[gbkovacs]

Wonderful, I have never used jquery. Thanks for your help.

[http://fabaconference.org/conference-registration/]

[admin]

Add the following block of code at the beginning of the “lib/eStore_read_form.js” file and that will do the job.

jQuery(document).ready(function($) {

$('.eStore-button-form').on('submit', function() {

var $thisbuttonform = $(this);

var custom_input = $thisbuttonform.find('.eStore_collect_input').val();

if(!custom_input.trim()){

alert('Please enter a value in the custom input field');

return false;

}

});

});

Alternatively, you can use the following JS code (this one listens for the “click” event on the add to cart button instead of “submit”:

jQuery(document).ready( function($) {

$('.eStore-button-form .eStore_add_to_cart_button').on('click', function() {

var addcartinput = $(this);

var buttonform = addcartinput.closest('form');//Get the parent form for this input

var custom_input = buttonform.find('.eStore_collect_input').val();

if(!custom_input.trim()){

alert('Please enter a value in the custom input field');

return false;

}

});

});

[gbkovacs]

Simple clean code, worked wonderfully. Thank you.

[Author]

Posts