How can I insert js scripts before </body>

Question

I know this question is been asked again, but i tried their solution and it doesn't work so please don't rate it down. I have an authentication script (auth.js) that needs to be placed before the tag, but even when I apply the solution offered in the topic, it is still added in the header file instead of the body file. Here is the existing code. I am using Gantry5:

$document=JFactory::getDocument();
$document->addScript('/templates/rt_kraken/js/auth.js', 'text/javascript',false,true);

As I am a beginner please explain thoroughly as I still don't have the reputation here to comment back hahahha

Also this the link on the previous post,I am trying to achieve the same exact thing as them: Load javascript script before </body> closing tag

Answer 1

I think there are at least 4 options.

• In gantry5 templates go extension>templates, select your template, and on the page settings tab there is a textbox labeled "Before </body>". This will be included on all frontend pages so if your need it only in some places you could use an assign a template outline.
• Use javascript to insert the script tag on page load. Might working depending on you auth script.
• Insert it directly into the template. This would be fine for those running their own template, but this doesn't apply to you, but y'know I want to be thorough.
• Do a string replace on the rendered html in a system plugin. See code below. I am assuming you're using Joomla 3.8 and also that you want to insert the auth code on all frontend html pages. If the latter isn't true then just add some more conditions to the plugin as appropriate.

Gotchas

Plugins run in the order that the plugins are ordered, hence if another plugin is using the same technique, it may insert code after yours. Also if you're using system page cache then your plugin will need to be before it so that your script gets inserted before the html is cached. Hopefully that both makes sense and doesn't apply to your situation.

Code for a system plugin

The php code for a suitable system plugin would be eg. /plugins/system/scriptbeforebody/scriptbeforebody.php

<?php 
defined('_JEXEC') or die('Restricted access');

class plgSystemScriptbeforebody extends JPlugin {

  public function onAfterRender()
  {
      $app = JFactory::getApplication();

      // only insert the script in the frontend
      if ($app->isClient('site')) {

          // retrieve all the response as an html string
          $html = $app->getBody();

          // replace the closing body tag with your scripts appending to the closing body tag
          $scripts = [
              '/templates/rt_kraken/js/auth.js',
              '/templates/rt_kraken/js/something-else.js',
          ];

          $tags = "";
          foreach($scripts as $s){
              $tags .= '<script src="' . $s . '"></script>';
          }

          $html = str_replace('</body>',$tags . '</body>',$html);

          // override the original response
          $app->setBody($html);
        }
    }
}

and the accompanying manifest would be eg. /plugins/system/scriptbeforebody/scriptbeforebody.php

<?xml version="1.0" encoding="utf-8"?>
<extension version="3.8" type="plugin" group="system">
    <name>Script Before Closing Body Tag</name>
    <creationDate>Dec 2017</creationDate>
    <version>1.0</version>
    <description>Hardcoded insertion of script tag into html response</description>
    <files>
        <filename plugin="scriptbeforebody">scriptbeforebody.php</filename>
    </files>
</extension>

To install either zip both files and use regular joomla extension installer, or upload to the paths specified and install using the administration > extentions > manage > discover tool.

Answer 2

You can create a new custom HTML module and using the code editor add the text

<script src="/templates/rt_kraken/js/auth.js"></script>

Then put it in a module position and disable the title. The code will be placed in the position where the module would be displayed. Some templates have positions reserved for non-content data like Google analytics, which would be a good choice for this module.

Answer 3

For gantry 5, extensions>templates>styles> page settings

Then just put whatever script you want eg for me :

<script type="text/javascript" src="/templates/rt_kraken/js/auth.js"></script>

Thank you a lot though @jamesgarrett. I will definitely apply your approach in more advanced topics.

Answer 4

When you want the script on only one (or more) articles(s) and when using Gantry5 Framework, go to Components, Outlines, create a new Outline using the Default Outline, go to Page Settings, add the javascript in the Body Attributes, in the Before window then assigned the new Outline in Assignments to the article(s).