I am trying to load google api's that requires their script to be placed on the bottom of the page to load properly (since the document.body will only be available once the page loads completely)

on the front end, its as simple as using twig's script:

    <script src="{{ [
        'assets/scripts/googleapi_ver(2.1.3).js',
        'assets/scripts/jquery.bxslider.min.js',
        'assets/scripts/custom-script.js'
    ]|theme }}"></script>

and placing it before the tag ends on the theme's layout file.

if i have to run a javascript on my plugin's backend controller, how do i make the scripts load at the bottom?

Last updated 8 years ago

Every heard of $(document).ready()?

$(document).ready(function() { 
         var s = document.createElement( 'script' );
         s.setAttribute( 'src', 'http://google.com/scriptsomething');
         s.onload=callback;
         document.body.appendChild( s );
 });

gee thanks for this, really helped a lot

if i may also ask, how do you pass a variable from the component into the injected javascript?

like if my component has a defined boolean property load_map_canvas, how do i assign its value to a javascript variable like: var load_canvas = {{ load_map_canvas }}