Joomla 4 Templating. Part 6: Templating component.php

In the last article in the Joomla 4 Templating series, we coded the error template for the simple theme in : /templates/simple/error.php

In this article, we'll deal with the last of the templating files: /templates/simple/component.php

component.php is mainly used by Joomla's print function. It can also be used for any url that has ?tmpl=component appended to it which gives it an edge case for popups and modals. I say edge case because you're more likely to use modals and popups from a modern CSS library then you would be from component.php. But never say never.

If you're using Joomla's print function, you should add a print.css file into /media/templates/site/simple/css, put an entry for it into joomla.asset.json and have the Web Asset Manager use this stylesheet in the component.php file. You'd do this the same way we added an error.css to the error.php page in the previous article.

Bottom Line

The simple template won't be making use of component.php so I'm going to quick and dirty style this one similar to the the main template: index.php. Note that because component.php has no module positions, the body code always consists of just two jdoc template tags:

 <body>
  <jdoc:include type="message" />
  <jdoc:include type="component" />
</body>

component.php


<?php
 defined( '_JEXEC' ) or die;
 
 use Joomla\CMS\Factory;
 use Joomla\CMS\HTML\HTMLHelper;

 $app = Factory::getApplication();
 $wa = $this->getWebAssetManager();

 //Perform DNS handshake for Bootstrap js files from CDN
 $this->getPreloadManager()->dnsPrefetch('https://cdn.jsdelivr.net');

 //get sitename
 $sitename = htmlspecialchars($app->get('sitename'), ENT_QUOTES, 'UTF-8');
 
 //add the favicon
 $this->addHeadLink(HTMLHelper::_('image', 'favicon.png', '', [], true, 1), 'icon', 'rel', ['type' => 'image/png']);

 //google fonts - did user paste in google fonts url?
 $googlefonts = trim($this->params->get('googlefonts', '', 'string')); 
 //if so, preload scripts and register/use google fonts
 if($googlefonts !=='') {  
  $this->getPreloadManager()->preconnect('https://fonts.googleapis.com/', ['crossorigin' => 'anonymous']); 
  $this->getPreloadManager()->preconnect('https://fonts.gstatic.com/', ['crossorigin' => 'anonymous']); 
  $wa->registerAndUseStyle('googlefonts', $googlefonts, [], ['crossorigin' => 'anonymous'], []); 
 }

 //add a meta tag for the stylesheet
 $this->setMetaData('viewport', 'width=device-width, initial-scale=1');

 //use the main stylesheet with Web Asset Manager
 $wa->useStyle('template.site.simple');
 //you might want to add a print css depending on your use case 
 //if you do, make sure it's in joomla.asset.json
 $wa->useStyle('template.print.simple');
 //use the external Bootstrap js from CDN
 $wa->useScript('bootstrapjs');
?>
 <!DOCTYPE html>
 <html lang="<?php echo $this->language; ?>" dir="<?php echo $this->direction; ?>">
 <head>
   <jdoc:include type="metas" />
   <jdoc:include type="styles" />
   <jdoc:include type="scripts" />
 </head>
 <body>
  <jdoc:include type="message" />
  <jdoc:include type="component" />
 </body>
</html>

Notes

I omitted the simple template's own small javascript file ('template.script.simple') since it won't be used in component.php. In the article dealing with the main template (index.php) we called template.script.simple without having to explicitly call the external Bootstrap JS (bootstrapjs). Yet both files were called in index.php because of dependency. To explain:

File 1 - no dependency
File 2 - with a dependency on File 1
Therefore, if I call File 2, it means that File 1 will be automatically called because of the stated dependency

In the case of component.php, we have to tell the Web Asset Manager to use bootstrapjs, since we are omitting the dependent file.

What's Next

In the final article of the Joomla 4 Templating series, we'll package the simple template so it's ready for install into Joomla 4.