Adding print pop-up functionality to a component

This page is applicable to the following Joomla versions:

Adding Print Pop-Up Functionality to a component is fairly straight-forward.

Typically, when one lands on a page there are an arbitrary number of buttons and/or links that allow the surfer to negotiate within the page, or to access another page. Providing print pop-up functionality is just another example of such a link. Normally, when someone wants to print the contents of a page, they do not want the surrounding context (such as menus, header logos etc.) to be printed as well.

The way to direct Joomla! to display only the contents of a page without the surrounding context, is to simply add "tmpl=component" to the url. You can test this by accessing the Joomla! home page, which you might normally access with:

http://joomla.org/index.php

by entering the following modified url:

http://joomla.org/index.php?tmpl=component

As you can see, only the content of the page is displayed without the surrounding context. So the first principle to keep in mind is that if you want to provide your users with just the page contents, you'll need to add "tmpl=component" to the url that you craft.

In order to invoke the built-in print functionality, you also need to add "print=1" to your url.

So assuming that our user has landed on a page with the following url:

http://mysite.com/index.php?option=mycomponent

and we want to incorporate a link that when clicked will present a pop-up box with only the content of the page for subsequent printing, we would craft a url that looks like this:

http://mysite.com/index.php?option=mycomponent&tmpl=component&print=1

In order to present this as a clickable link to our user we have to wrap the url in a HTML anchor tag. So (in keeping with MVC design philosophy), we might add to our tmpl file (default.php for example), the following code:

<a href="index.php?option=mycomponent&tmpl=component&print=1">Click For Printing</a>

This however is only the partial solution, as we need to supplement this href anchor, with parameters for the popup window that will be produced. Our complete anchor code in default.php might look like this:

<?php
	$href = 'status=no,toolbar=no,scrollbars=yes,titlebar=no,menubar=no,resizable=yes,width=640,height=480,directories=no,location=no';
	$href = "window.open(this.href,'win2','".$href."'); return false;";
?>
 	<a href="index.php?option=mycomponent&tmpl=component&print=1" <?php echo $href; ?> >Click for Printing</a>

If you include the above code in your template file, and navigate to the page with a browser and then click on the "Click for Printing" link that appears then you will be presented with a popup window. However, if you click on the "Click for Printing" link in the pop-up window, nothing much happens except that the popup window is redrawn. The reason for this is that in the popup window, the href anchor needs to be changed so that clicking on it, called the javascript function for invoking the browser's print dialog window. So we need to modify the code presented above so it can differentiate between the creation of the popup window and the subsequent printing request. Here's how this can be done:

<?php
	$isModal = JRequest::getVar( 'print' ) == 1; // 'print=1' will only be present in the url of the modal window, not in the presentation of the page
	if( $isModal) {
		$href = '"#" onclick="window.print(); return false;"';
	} else {
		$href = 'status=no,toolbar=no,scrollbars=yes,titlebar=no,menubar=no,resizable=yes,width=640,height=480,directories=no,location=no';
		$href = "window.open(this.href,'win2','".$href."'); return false;";
		$href = ''"index.php?option=mycomponent&tmpl=component&print=1" '.$href;
	}
?>
 	<a href=<?php echo $href; ?> >Click for Printing</a>

Including the code in your template file, will result in the following behavior. When a user lands on your page they will be presented with a link that says "Click for Printing". Clicking on that link will bring up a popup window, which if the user clicks on the "Click for Printing" link again, will display the browser's print dialog and allow them to direct the contents of the popup window to their printer.

There are of course many refinements to this basic code, such as changes to the size of the popup window (adjusted by changes to the parameters in the href call), and if you intend to use the feature a lot you may wish to develop a function that slaps together the code presented around any url you may wish to pass it.