Support

Home Forums Event Espresso Premium EE4 Add Custom Javascript to Embedded Ticket Selector

EE4 Add Custom Javascript to Embedded Ticket Selector

Posted: May 14, 2019 at 9:33 pm


jmahan

May 14, 2019 at 9:33 pm

I found the Forum Topic to add Custom CSS to the Embedded Ticket Selector, how can I add custom Javascript to the Embedded Ticket Selector? I want my custom .JS code running in the embedded iFrame. THX.


Tony

  • Support Staff

May 15, 2019 at 4:41 am

Hi there,

Do you mean this thread? https://eventespresso.com/topic/embed-ticket-selector/

There’s a very similar filter available to add your own JS files:

FHEE__EED_Ticket_Selector__ticket_selector_iframe__js

It’s passed an associative array where the key is the script name and the value is the path.


jmahan

May 15, 2019 at 5:40 am

Thanks Tony,

Are you saying use the CSS filter as a template for JS? If yes, is this OK:

add_filter( ‘FHEE__EED_Ticket_Selector__ticket_selector_iframe__js’, ‘my_custom_ticket_selector_js’ );
function my_custom_ticket_selector_js() {
return array(
/* optionally include your custom js URL here */
TICKET_SELECTOR_ASSETS_URL . ‘https://www.xxx.com/js/yyy.contentWindow.min.js?ver=’ . EVENT_ESPRESSO_VERSION
);
}


Tony

  • Support Staff

May 15, 2019 at 5:58 am

Are you saying use the CSS filter as a template for JS?

You can use it as a base to work from, yes.

If you adding your own JS using hooks, it’s assumed you are comfortable with using them.

If yes, is this OK:

No, TICKET_SELECTOR_ASSETS_URL isn’t needed in this case (you’re not loading your own custom file from within the default ticket selector assets location, right?) and is incorrectly used within the array.

To ADD additional functionality and keep the default ticket selector JS loading as well as yours, you can use something like:

add_filter( 'FHEE__EED_Ticket_Selector__ticket_selector_iframe__js', 'tw_ee_my_custom_ticket_selector_iframe_js' );
function tw_ee_my_custom_ticket_selector_iframe_js( $assets_array ) {
   	$assets_array['ee_custom_ticket_selector_iframe_js'] => {your JS location here};
    return $assets_array;
}

What I would do is use the above within a custom fucntions plugin, we have documentation on how to create one here:

https://eventespresso.com/wiki/create-site-specific-plugin-wordpress-site/

Then add a directory called ‘assets’ for example and place my js file in that, then you can do something like:

$assets_array['ee_custom_ticket_selector_iframe_js'] => plugin_dir_path( __FILE__ ) . 'assets/tw_ee_my_custom_js_file.js';


jmahan

May 15, 2019 at 7:15 am

Tony,
I used my custom functions plugin (which was doing text translations), the JS file was already in JS. But, adding the new filter is breaking the site. Is this coded OK:

add_filter( ‘FHEE__EED_Ticket_Selector__ticket_selector_iframe__js’, ‘tw_ee_my_custom_ticket_selector_iframe_js’ );

function tw_ee_my_custom_ticket_selector_iframe_js( $assets_array ) {
$assets_array[‘ee_custom_ticket_selector_iframe_js’] => ‘https://www.xxx.com/js/yyy.contentWindow.min.js’;
return $assets_array;
}


Tony

  • Support Staff

May 15, 2019 at 7:58 am

I used my custom functions plugin (which was doing text translations), the JS file was already in JS.

In ‘JS’ where though? Your code above isn’t loading the JS file from within your custom plugin.

Either way, the error your getting with the above is my bad, you need to use = rather than =>

$assets_array['ee_custom_ticket_selector_iframe_js'] = 'https://www.xxx.com/js/yyy.contentWindow.min.js';


jmahan

May 15, 2019 at 11:39 am

JS Works Great … THX

I will now try some tweaks in CSS to make the embedded ticket selector more responsive in MOBI. Is there any more responsive feedback other than the above referenced CSS Post?


Tony

  • Support Staff

May 16, 2019 at 2:26 am

Currently, just the above post.

If you’d like to post any additional feedback we can look into adding a doc to the site.

The support post ‘EE4 Add Custom Javascript to Embedded Ticket Selector’ 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