Support

Home Forums Event Espresso Premium Conditional question and question groups

Conditional question and question groups

Posted: August 19, 2013 at 5:00 am


d37toastmasters

August 19, 2013 at 5:00 am

For my event: http://d37.staging.wpengine.com/event-registration/?ee=11

1) Can you provide custom CSS code so the radio button labels show on one line (no wrapping). For example increase width to 500 pixels

2) Hide subsequent individual question and question groups based on the selection. For example, when user selects Full Conference Package radio button option then display Full Conference Package question group and hide A la Carte Conference Options question group. When user selects A La Carte Options in the first question group then hide Full Conference Package displayed below and display only A La Carte Options question group. Can this be done via custom CSS or do I need modify core Event Espresso php file. Any pointers on this topic are appreciated.

3) I’m using Price Modifier adds-on with base price events set to $0.00. The form now says the event is FREE. Is there a way to hide verbiage FREE ?

4) When you select Add More Attendees button then the Attendee #2, #3 do not follow the same styling on the form. For example: Conference Package, Full Conference Package, A la Carte Conference Options are displayed in bold font for the primary attendee, but in regular font for the additional attendee.

Thank you,

Jake


Dean

August 19, 2013 at 6:15 am

Hi,

1)
<pre class=”brush: css; gutter: true; first-line: 1; highlight: []; html-script: false”>.options-list-radio.event_form_field li {
float: left;
}

That will make them appear on one line, however you will likely need to fiddle with the rest of the CSS as it doesn’t look great, for example adding:

<pre class=”brush: css; gutter: true; first-line: 1; highlight: []; html-script: false”>.single-radio {
clear: both;
padding-top: 20px !important;
}

might help space things out, but your will likely still need to play with the CSS.

2) We don’t yet have conditional questions. As such the only workaround would be to either separate the event into more than one or use javascript and css to show hide the questions.

3) Unless you want to completely remove all the event prices from the event list, you are best off using a function like this http://www.viper007bond.com/2011/07/13/changing-core-wordpress-strings/, or the translate guide https://eventespresso.com/wiki/how-to-change-wording-with-poedit/ to translate “Free Event” into a space or no characters.

4) The theme is over rulling the default CSS, try adding this to your style.css file

<pre class=”brush: css; gutter: true; first-line: 1; highlight: []; html-script: false”>.section-title, .span_event_time_label, .event_price_label, .span_event_date_label {
font-weight: bold !important;
}


d37toastmasters

August 19, 2013 at 11:18 am

Hi Dean,

Thank you for your quick response

1) I tinkered with your code and what I really needed was this:

/* make the radio button label wider so it doesn’t wrap */
.options-list-radio label {
width: 500px;
}

2)I would like to try Javascript / CSS route. Do you have a Wiki article that outlines this approach? Do you modify an existing javascript file or do you add your own Javascript file? What is the name of php file to call the Javascript file from? Etc….

3)I have done changes with poedit before. Thank you for the pointer.

4) I was able to enforce the styling changes for the additional attendee with this code:

.section-title, .span_event_time_label, .event_price_label, .span_event_date_label {
font-weight: bold !important;
}

Again, thanks for the code samples. In summary, I just need some pointers for #2.

Jake


Sidney Harrell

August 19, 2013 at 1:36 pm

You could add the js to plugins/event-espresso/scripts/espresso_add_reg_attendees.js
You could try something like:

jQuery('#your_radio_question').change(function() {
    (jQuery(this).val() == "A") ? 
    jQuery("#question_group_one").show() : jQuery("#question_group_two").hide();

You would need to modify the selectors, of course, to match your question groups and radio button question.


d37toastmasters

August 19, 2013 at 3:41 pm

Hi Sidney,

I can successfully hide the first or second question group by adding the following code to espresso_add_reg_attendees.js file:

jQuery(“#full-conference-package-1376772100”).show();
jQuery(“#a-la-carte-conference-options-1376772962”).hide();

jQuery(“#full-conference-package-1376772100”).hide();
jQuery(“#a-la-carte-conference-options-1376772962”).show();

This works great! However, when I plug in the entire code nothing happens:

jQuery(‘SINGLE_36’).change(function() {
(jQuery(this).val() == “Full Conference Package”) ?
jQuery(“#full-conference-package-1376772100”).show() :jQuery(“#a-la-carte-conference-options-1376772962”).hide();
(jQuery(this).val() == “A La Carte Options”) ?
jQuery(“#full-conference-package-1376772100”).hide() :jQuery(“#a-la-carte-conference-options-1376772962”).show();
}

The calendar event can be found here: http://d37.staging.wpengine.com/event-registration/?regevent_action=register&event_id=11

Jake


Dean

August 20, 2013 at 12:28 am

Hi Jake,

Not to disagree with Sidney, but I would consider using the Custom Files addon. You could add a function to the custom_functions.php file that will enqueue a javascript file that you can also place in the uploads/esporesso folder. This would make sure your custom code isn’t overwritten by updates.

Regarding it not working, the console says you have an “unexpected token function”, and I believe that the closing bracket was missed off here

jQuery("#required.ee-reg-page-questions.SINGLE_36").change(function() {
	(jQuery(this).val() == "Full Conference Package") ? 
	jQuery("#full-conference-package-1376772100").show() :jQuery("#a-la-carte-conference-options-1376772962").hide();
	});


d37toastmasters

August 25, 2013 at 1:53 am

Hi Dean,

I like the idea of using Custom Files Add On. I followed your Wiki article and copied custom php files and templates on the server. What do I need to do to move my jQuery custom code out of espresso_add_reg_attendees.js file? Let’s say I create one custom function call my_jQuery in custom_functions.php. I still need to call this function from espresso_add_reg_attendees.js, correct? If yes, then I’m still going to lose my customization with the next upgrade?

Thank you,

Jake


Dean

August 26, 2013 at 1:36 am

Hi Jake,

I would create a js file in the uploads/espresso folder and in the custom_function.php file create a function to register and enqueue the JS file like you would any other scripts.

This is an example for one I did, it isn’t the best example as I am not the best developer but it should give you an idea

function eecheckin_loadscripts() {
	
	$uploadpath = wp_upload_dir();
	 
	wp_enqueue_script('eecheckin', $uploadpath['baseurl'] . '/espresso/eecheckin.js');

	wp_register_style( 'eecheckincss', $uploadpath['baseurl'] . '/espresso/eecheckin_css.css');
	wp_enqueue_style( 'eecheckincss' );		


	wp_localize_script('eecheckin-script', 'eecheckin_nonce_object', array(
		  'ajaxurl' => admin_url('admin-ajax.php', $protocol),
		  'eecheckin_nonce' => wp_create_nonce('eecheckin_nonce'),
		)
	
	);

}
add_action('wp_enqueue_scripts', 'eecheckin_loadscripts');

The $uploadpath[‘baseurl’] is kind of important due to the location of the file.

You can check out how I have done a similar thing here, https://github.com/Apina/ee-checkin, as I say I’m not a professional developer so only use this as a rough guide.


d37toastmasters

September 7, 2013 at 5:02 am

Dean,

I followed your example above and wow – it worked! I have a quick question – is there a way to limit loading the custom jQuery code only if a specific event or page is displayed? My custom jQuery code is to support a specific event (ID=32) and it does not need to be loaded automatically at all times.

Thank you,

Jake


Dean

September 9, 2013 at 4:58 am

Hi,

Havent tested this for a specific event, but it should work with the event registration pages at lest. Use this function in an if statement

http://codex.wordpress.org/Function_Reference/is_page

The support post ‘Conditional question and question groups’ is closed to new replies.

Have a question about this support post? Create a new support post in our support forums and include a link to this existing support post so we can help you.

Event Espresso