How to display Joomla System Messages in Popup

  • Published in Blog by Tassos Marinos on Saturday, 25 March 2017

How to display Joomla System Messages in Popup

Joomla System Messages provide valuable feedback for various actions performed in your Joomla websites. Your visitors can be informed for:

  • An occasion where they can not access a certain article or some other resource.
  • They tried to log in with wrong credentials.
  • Any other custom message that might come from any extension which utilizes Joomla System Messages.

For all these occasions, Engage Box can be used to display those messages with all the comforts that Engage Box already has.

Although, Engage Box can not accomplish this task without the necessary functionality of another extension, Regular Labs Sourcerer (Free) Plugin. With Sourcerer you can inject actual PHP code inside almost any textbox and then it gets to be parsed normally.

Display Joomla System Messages through Engage Box

As long as you have Engage Box and Sourcerer then you are good to start this process.

1. Install Engage Box

Go to your Joomla! Administrator panel and click on Extensions > Manage > Install. Right after that, you need to click the Upload Package File Tab and finally click the Upload & Install button below.

engage box upload and install

2. Install Sourcerer Free Plugin

To install Sourcerer you follow the exact same process as you did with Engage Box.

3. Create the box

Now we are ready to create the box which will contain the Joomla System Messages. To do that follow the steps below:

Navigate to Components > Engage Box.

navigate to engage box

Click the New button.

create a new engage box

Make sure that the box type is set to Freetype and you have written a title for this box at the right part of your screen.

engage box freetext system messages

Before copying and pasting the code below, make sure that you hide the editor first otherwise it won't work.

<p>{source}<?php echo $doc->getBuffer("message"); ?>{/source}</p>
<div class="boxSMFooter">
	<a class="btn" href="#" data-ebox-cmd="close">Close</a>
</div>

engage box system messages snippet

The last thing we need to do before assigning the box is to configure its trigger settings and cookie settings to make sure that it is available always when it is needed.

engage box system messages trigger settings

As you can see in the screenshot above the most important settings are:

Trigger

  • Position: Center
  • Point: on Page Load

Cookie

  • After Close Stay Hidden: Never

4. Assign the box

The final step is to configure the box to show up when there are messages to be shown. To accomplish that Engage Box gives you the ability to assign a box once a block of code, or just a line in this situation, is evaluated as true.

So, click the Publishing Assignments Tab and scroll down until you see the Custom PHP assignment which you need to set to Include.

Once you click the Include button in that row, a small textfield will slide down in which you need to copy and paste the code below exactly as you see it.

return $app->getMessageQueue();

engage box system messages assignments

5. Custom CSS Settings

Finally, since we are displaying the system messages inside a box, we need to hide the system messages from appearing inside the template and on top of that add some beautifying CSS so that it doesn't show out of place.

engage box system messages custom css

You can add Custom CSS to any box by clicking the "Advanced" Tab. As you can see in the screenshot above apart from the Custom CSS which you can copy and paste from below, we have also added the Class Suffix "boxSM" so that we can target this specific box.

.boxSM .alert .close {
   display:none;
}
.boxSMFooter {
    text-align: right;
    border-top: solid 1px #e3e3e3;
    padding-top: 15px;
}
.boxSM #system-message-container {
    display: block;
}
#system-message-container {
    display: none;
}

Of course you are free to tweak this CSS or create your own if you feel that it doesn't exactly fit your website's template or color palette.

Download a ready box and save time

With Engage Box's Import and Export Functionality you can skip all the configuration process! Steps 3 and 4 have been made ready so that you can save precious time. All you have to do is download the Joomla system messages box and import it through Engage Box by following the steps below.

Navigate to Engage Box and click the Import button on the dashboard.

engage box import

Click the Browse button to search for the box you downloaded previously in your filesystem. You can leave the Publish items option to "As Exported".

engage box browse

Click Import and you are done!

Summarizing

On top of all the marketing aspects of Engage Box, it should be refreshing to see that it can be used for utilitarian purposes as well.

Providing feedback to your users with the visual cues you can achieve through Engage Box can create a pleasant user experience. A pleasant user experience results to returning users and returning users result to a dedicated user base. Who could say no to that?

Join over 7,000

Subscribers to get Free Joomla! tips, extension updates and deals!
SUMMER SALE Use coupon code SUMMER17TASSOS to get 30% off on any Tassos.gr extension  Coupon Policy