Givewp: More efficient script loading

[helgatheviking]

The give script should only be loaded when the shortcode is on the page. All the scripts shoud be registered on the wp_enqueue_scripts hook and then enqueued in the shortcode so they are conditionally loaded in the footer and not loaded on every page when I only have 1 page with a donation form.

Loading the stylesheet is a bit trickier, but can be done by checking the post content for the presence of the shortcode.

global $post;

if( isset($post->post_content) && has_shortcode( $post->post_content, 'give' ) ) {
    wp_enqueue_style( 'give' );
}

In theory, you could also set a class variable so you don't keep checking the content once a stylesheet is loaded. Not sure how well this works with widgets and things, so you might _have_ to load the style, but the script can definitely be tweaked to be more efficient.

[DevinWalker]

Hey there,

In theory this sounds straight forward and the right thing to do. However, in practice I've found it very difficult to have scripts loaded conditionally based on whether a shortcode or widget is present. There are many uses that a website can load Give on their site both with custom implementations and out of the box. I've tried in other plugin to optimize scripts so that they are loaded only when a shortcode is present and it lead to a whole lot of support requests and people claiming the plugin is broken when in fact their theme or implementation was uncommon.

In version 1.0 we are combining and minifying all scripts into 1 stylesheet and 1 JS file which will make the load impact very minimal. We will also add a tutorial on our website givewp.com that explains how to conditionally load the scripts for more advanced users. I'll leave this ticket open until that article is written.

Please let me know if you have any questions!

[DevinWalker]

I suggest we add a new developer doc on How to conditionally load Give plugin JS and CSS

[mathetos]

Done!

https://givewp.com/documentation/developers/conditionally-load-give-styles-and-scripts/

[DevinWalker]

Nice! :+1:

[DevinWalker]

Opps didn't mean to repoen

[helgatheviking]

Actually, I was just thinking about this again and you can enqueue scripts directly from within a shortcode and they get loaded in the footer. That's what I'm doing in Name Your Price.

function foo_script(){
      wp_register_script( 'foo', plugins_url( '/js/script.js' , __FILE__ ), array(), '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'foo_script' );

function footag_func( $atts ) {
        wp_enqueue_script( 'foo' );
    return "foo = {$atts['foo']}";
}
add_shortcode( 'footag', 'footag_func' );

[mathetos]

Hi @helgatheviking

Yes, but we didn't want to go that route. I mention that in the article in the "Pro's and Cons" section

[Jany-M]

Is that doc actively kept up to date?
Because that snippet can't find any of the scripts it tries to load, currently.
It's really important that script loading is optimized and not loaded all over the place at all times, including all the intrusive Stripe scripts and callbacks.
@mathetos @DevinWalker

[DevinWalker]

Hi @Jany-M in all honesty that doc hasn't been kept up to date in regards to our recent iterations. Right now we are working on a way to create donation forms that will not require scripts loaded on all pages. This is currently in development.

Regarding Stripe JS, we include it on all pages based on their recommendation here: https://stripe.com/docs/js/including

To best leverage Stripe’s advanced fraud functionality, include this script on every page, not just the checkout page. This allows Stripe to detect anomalous behavior that may be indicative of fraud as customers browse your website.

I hope this clears some things up. Let me know if you have anymore questions.

[Jany-M]

@DevinWalker I thought so, I understand.
Great to see an effort in the performance direction, looking forward to it.
Thank you for the info about Stripe!