1

I am trying to use JavaScript to add a class to the body which is the same as the current menu items alias.

I have echoed $prefix and it is correct. So I know that part works.

I have dumped the JS into the console (minus the dynamic variable) and that works. So I think that works too.

So now it appears it simply doesn't work in this plugin. But I copied the plugin from another one I made, and that works.

Can anyone explain why this doesn't add the alias to the body class?

jimport( 'joomla.plugin.plugin' );

class plgSystemKouAliasAsBodyClass extends JPlugin
{   
    function __construct( $subject, $params )
    {
        parent::__construct($subject, $params);

    }

    function onBeforeCompileHead()
    {

        $app            = JFactory::getApplication();

        // If we are on admin don't process.
        if (!$app->isClient('site'))
        {
            return;
        }

        $document       = JFactory::getDocument();
        $menu           = $app->getMenu();
        $active         = $menu->getActive();
        $alias          = ucfirst($active->alias);      

        if (!empty($prefix))
        {
            $alias = $prefix . $alias;
        }

// Does not work, although $alias is correct when echoed.
        $document->addScriptDeclaration('
            document.addEventListener("DOMContentLoaded", function() {
                document.body.classList.add("' . $alias  . '");
            });
        ');

// Does not work, although document.body.classList.add("EoinsClass");
// works when used in the console.  And the rest works when 
// used in a different plugin.
        $document->addScriptDeclaration('
            document.addEventListener("DOMContentLoaded", function() {
                document.body.classList.add("EoinsClass");
            });
        ');     
    }
}
1
  • Your code works for me on menu item pages but doesn't work on pages that don't resolve to menu items. $active is null on such pages.
    – Sharky
    Jul 19, 2019 at 22:03

2 Answers 2

1

I'm not sure why you're using onBeforeCompileHead. As per the docs, https://docs.joomla.org/Plugin/Events/System, this is triggered before the head is even created. Maybe you thought this would be the best time to add your content, but it wont work, there's nothing there to add to.

Try changing your trigger to onBeforeRender. This is the point where your app(page) has been built but not yet displayed.

1
  • Your answer will be more valuable to the OP and future researchers if you explain the difference between the two events, perhaps link to documentation for each, and explain in plain English why your suggest should be used. This is a great opportunity to educate. (The system flagged your answer as low-quality. Please be generous with your knowledge.) Jul 19, 2019 at 22:20
0

You're going to want to use the OnAfterRender event listener as opposed to onBeforeCompileHead.

Basically, you're trying to add a class to the <body> tag before it has been rendered, thus it's not working.

OnAfterRender will be triggered once the framework has rendered the application, meaning once the DOM has been rendered.

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.