Just adding js script to typo3

Question

I have the following problem. I have a typo3 page without any template I made by myself, but it gets in some way the style and the behavior of the other pages (I mean navigation, footer and so on). Now I have written some HTML inside the page by creating an HTML element.

In this HTML element, I included some js-code, which uses jQuery. The problem is, that the page loads the jquery at the footer and my scripts are loading before (in the HTML element). So my script does not recognize jQuery. How can I add my scripts at the whole end of the page? I know, that it has something to do with templates, but when I create a new template for the page, the whole content disappears.

Would be nice to get any help.

Cheers,

Andrej

Answer 1

It is usually good practice to read all your JS from a single file placed in the footer of the page. Add this to the setup section of your page template:

page.includeJSFooter.scripts = fileadmin/js/scripts.js

Then remove the JS from the HTML template and put into this file. This file could hold all your custom JS and possibly even all the libraries you use on the page (if you are not loading them from a CDN).

Bonus: the JS doesn't have to be re-loaded on every page view but can be read from cache.

For reference: https://docs.typo3.org/typo3cms/TyposcriptReference/Setup/Page/Index.html#includejsfooter-array

Answer 2

I hope by template you mean a template record where you store your TypoScript? Otherwise this answer is not what you are looking for. :)

You can just add an extension template on your page that only adds to the rest of the TypoScript but does not override anything. To do so, go to the template module, choose "info/modify" in the dropdown at the top and use this button

Explanation: an extension template has the checkboxes for clearing the constants and the setup not checked and will not mess with the rest of your site's TypoScript: