Injecting JS at footer.html

Administrators
1

Hi,

I am implementing a mobile-friendly navigation menu and would like to place some JS at the end of each page.

Previously I got it to work by replacing the whole footer.html template and including it into tags at the end.

After updating to 2.2, I had a look again at footer.html and noticed that it does mention some kind of injected_js at line 45

{{- g.get('injected_js', []) | join('\n') | safe -}}

but I cannot figure out how to use this to inject my own JS.

Any pointers?

Thanks,
Ying

2

The inject_js thing isn’t really new; maybe it was just used from somewhere else before. Anyway, It’s not meant to be used from plugins.

To properly inject custom JS on specific pages, use a plugin and call self.inject_bundle(). If you only need it for customizations and want to include it on all pages, you could also use the js folder inside the CUSTOMIZATION_DIR and put it there.

1 Like
3

Thanks, some of the JS I needed (addEventListener) needed to be placed at the end of the page, while the js folder places it into the header. I haven’t figured out how to write a plugin, so I will just continue with replacing the footer.html for now.

4

Doesn’t need to be at the bottom if you wrap it like this:

document.addEventListener('DOMContentLoaded', () => {
  // put your code here
});
2 Likes