2

I am writing some custom javascript in Joomla 4 Beta 6 to control various aspects of my custom front-end template's menus. It needs to load after the page has been rendered, so I want to add it at the bottom of the template's index.php file.

If I add the script in full it works fine. If I add the code to /js/user.js and then add the full URL link to the file - as if it was an external file - in the bottom of the index.php file, it also works, fine, e.g:

<script src="https://my.website.com/templates/my_template/js/user.js"></script>

However, I'd rather not have the full link visible, but if I try to add it via a local reference (using both double and single quotes), it doesn't work, e.g.:

<script src="/js/user.js"></script>

I have also tried adding a php instruction like this:

<?php $doc = JFactory::getDocument(); $doc->addScript('templates/'. $this->template . '/js/user.js'); ?>

Which works for the template.js at the top of the file, but it doesn't work in this position at the bottom, either.

What am I doing wrong? Thanks.

Improve this question

2 Answers 2

Reset to default
4

Unfortunately Casseopeia (default Joomla 4 frontend template) uses the following:

<jdoc:include type="scripts" />

inside the <head> tags at the top of the DOM, so any script added via $doc->addScript(), HTMLHelper::script() or WebAssetManager will be added up there.

That said, loading the file at the top doesn't really matter. You can simply defer the load and use the correct event listener, like so:

use Joomla\CMS\HTML\HTMLHelper;

HTMLHelper::_('script', 'user.js', ['version' => 'auto', 'relative' => true], ['type' => 'module']);

Note the 'type' => 'module'. This does NOT mean a Joomla module. It means a Javascript module which is deferred automatically.

Inside your user.js, you can then execute your code once the DOM has loaded:

document.addEventListener('DOMContentLoaded', () => {
  // Your code here
})

or once the entire page has loaded

window.addEventListener('load', () => {
  // Your code here
})
Improve this answer
6
  • Thank you. I can't seem to get it to work. I added the code to the user.js file and then copied and pasted the line you provided, i.e. "HTMLHelper::...etc" inside the head tags before <jdoc:include type="metas" />. Was that the right place? Is there anything else I need to add into the index.php? Thanks.
    – Gillian
    Oct 30, 2020 at 17:27
  • That line is PHP, so you need to wrap it inside <?php ... ?> tags. You can add it near the top of the index.php
    – Lodder
    Oct 30, 2020 at 21:51
  • I have added exactly this: <?php HTMLHelper::_('script', 'user.js', ['version' => 'auto', 'relative' => true], ['type' => 'module']); ?> - and no other new code - just above the <!DOCTYPE html> declaration, another attempt just below it but above the <head> tag, a third under the <head> tag and finally in the <body>. In all cases it just returns the J4 error message "Oops! An Error Occurred. The server returned a "500 Whoops, looks like something went wrong.".
    – Gillian
    Oct 31, 2020 at 9:12
  • Ahh, sorry, make sure you have use Joomla\CMS\HTML\HTMLHelper; at the top of the file before adding that bit of code.
    – Lodder
    Oct 31, 2020 at 10:21
  • Great! It works perfectly, now. Many thanks :-)
    – Gillian
    Oct 31, 2020 at 10:30
0

Instead I suggest you to use the Child Template feature following the guide and adapt it to your case. This answer may help you: https://joomla.stackexchange.com/a/31954/15836

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.