I am looking to create an override of a component to add a button, however for each page that uses the override, I need the button to have a different ID as by clicking the button it will open a sidebar menu using engagebox. Engagebox uses classes/Id's to identify the action required. So for example, of the source code for the button was:

<a href="#" class="sidemenu" id="**dynamic class based on page class**"></a>

then if the page class is .industry, is it possible to set the id="industry"?

***** Update ******

Each page has a sidebar menu - at present this gets in the way of the page content, thus the website owner wants these sidebar menu's to become off canvass menu's. The menu's also need to be open on original page load. These can be closed by the user manually using the menu's close button however, there will also need to be a button to open and close the menu manually. For engage box to do this the button needs to include the data-ebox value within the div/button tags. I can add this button as an override however this will not allow the data-ebox value to change depending on the page that the menu is on (the menu is different on every page) so every page needs a different data-ebox value.

My original though was to create an array of data-ebox values which will link the correct offcanvas menu to the correct page.

<a href="#" data-ebox="1" class="sidemenu" id="generated page class"></a>

From this point I would need to select the correct ebox number from what I am guessing would be an array of all available data-ebox numbers - I'm guessing this part would need to be JS. So for example:

data-ebox 1 = .industry data-ebox 2 = .services data-ebox 3 = .business

And so on. Is this possible?

Any idea's/suggestions would be most welcome.

# Update

I have created the following code, which is getting there, however the ebox variable is not updated based on the pageclass variable. Any suggestions would be most appreciated. I have added the doc write to export the variable values for testing purposes. I have also set up a staging site here and created an article override and added the code which I have set up the page classes for the Home/About/Contact pages. Any help would be most appreciated.

            $menu  = JFactory::getApplication()->getMenu()->getActive();
            $class = $menu->params->get('pageclass_sfx');

            var pageclass = "'<?php echo $class ;?>'";
            var ebox = 0;
            document.write(pageclass, ebox);

        if (pageclass == "home") {
            ebox = 1;
        else if (pageclass == "about") {
            ebox = 2;
        else if (pageclass == "contact") {
            ebox = 3;

        document.write('<a class="btn" data-ebox="' + ebox + '" href="#">Menu</a>');

Best Regards Donna


You can get the page class suffix, like so:

$menu  = JFactory::getApplication()->getMenu()->getActive();
$class = $menu->params->get('pageclass_sfx');

and then add it as an ID so your anchor, like so:

<a href="#" class="sidemenu" id="<?php echo $class; ?>"></a>
  • Thanks Lodder, I have updated my question as have received some additional information from the extension developer which means I need to add an additional element to the div (data-box="related number") – Dtorr1981 Apr 16 '18 at 15:56
  • @Dtorr1981 - You say the number will be based on the page class, but how exactly? I dont really understand this part – Lodder Apr 16 '18 at 17:48
  • I have added some additional information to my original question. – Dtorr1981 Apr 17 '18 at 7:17
  • Are the div/buttons rendered in a loop at all? – Lodder Apr 17 '18 at 9:05
  • These will be put into an override of a directory component so that the button is included on each page, however as the menu is different on each page the data-ebox will need to be different. Only one dynamic button will be on each page. – Dtorr1981 Apr 17 '18 at 10:26

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.