2

I want to add the alias to the body. I don't want to edit my template in case of template updates. So I'm going to create a plugin to overcome this issue.

So my query is... can I do this in PHP or should I just use jQuery. I know I need PHP to get the alias, and using jQuery is fine to add the class.

I'm just wondering which is the best way or if there is any downside.

So far I've come up with this but for some reason it is not working. The PHP part works but not the JavaScript

<?php

    $app       = JFactory::getApplication();
    $menu      = $app->getMenu();
    $active    = $menu->getActive();
    $alias     = $active->alias;


    $javascript='

    document.body.classList.add("' . $alias  . '");
    ';


    $document=JFactory::getDocument();
    $document->addScriptDeclaration($javascript);
?>
  • 1
    So you've checked the source code and it shows the rendered alias value and line of js code, but it is not applying the new class value to the body tag? What is an example $alias value? – mickmackusa Jan 3 at 2:29
  • Sorry, the code above is wrong. This code didn't work because it was added in the head before the body existed. I'll update it when I'm not on my phone. I was reading your other answer to try and find a new solution. Which I was trying by replacing </body> using JS. But so far that hasn't worked either. Then I can add the script in a normal <script> tag – Eoin Jan 3 at 2:32
  • 1
    I'll stay tuned for updates. – mickmackusa Jan 3 at 2:32
  • Glad to hear it, you post some great answers. – Eoin Jan 3 at 2:34
3

Remember that if you want to use vanilla JS, you need to use the equivalent of jQuery's document.ready() method.

So you want to use document.addEventListener('DOMContentLoaded'), like so:

<?php

    $app    = JFactory::getApplication();
    $menu   = $app->getMenu();
    $active = $menu->getActive();
    $alias  = $active->alias;

    JFactory::getDocument()->addScriptDeclaration('
        document.addEventListener("DOMContentLoaded", function() {
            document.body.classList.add("' . $alias  . '");
        });
    ');

?>

Because Joomla loads all Javascript in the <head>, without using an event listener, it will attempt to add the class to the <body> even though the page hasn't got as far as rendering the HTML yet, therefore it won't work.

  • Ah ha, you can't just move it down the page. I will still have to learn how to add things before </body> because that's good practice. – Eoin Jan 3 at 12:22
  • Glad it worked and hats off for joining "Team Vanilla" :) – Lodder Jan 3 at 12:44
  • Slowly slowly catchy monkey. But here's not enough difference to require jQiery any more. – Eoin Jan 3 at 12:49
  • Ok @lodder I've updated my question. I'm trying to make this a plugin. Your code works. But my plugin does not work – Eoin Jan 3 at 14:38
  • 1
    Please create a new question as the initial topic has been solved. – Lodder Jan 3 at 14:49
2

The jQuery part must be called in the document.ready() event.

Try this:

$javascript='
    jQuery(document).ready(function(){
         jQuery("body").addClass("' . $alias  . '");
    });        
    ';
  • It's not jQuery. It's vanilla JS – Eoin Jan 2 at 23:54
  • Depsite not needing jquery, this should delay the execution as required. – mickmackusa Jan 3 at 4:22
  • @Eoin Did you try my answer? What is the result if you tried it? – Mohamed Abdelaziz Jan 3 at 7:43
  • Mohamed I didn't try it as I don't want to use jQuery. I believe it would.work though, the code looks good. – Eoin Jan 3 at 12:20
  • @Eoin That's fine, although I see that you said in your question: I know I need PHP to get the alias, and using jQuery is fine to add the class – Mohamed Abdelaziz Jan 3 at 16:50

Your Answer

By clicking "Post Your Answer", you agree to our terms of service, privacy policy and cookie policy

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