0

I am in the process of writing a custom theme for a client and am having issues with the Web Asset Manager. I have been following examples of other templates that are built for Joomla 4+, but I must be doing something incorrectly as the defined template CSS and JS files are not being loaded into the template's index file.

index.php - Simplified for readability

defined('_JEXEC') or die;

use Joomla\CMS\Factory;
use Joomla\CMS\HTML\HTMLHelper;
use Joomla\CMS\Language\Text;
use Joomla\CMS\Layout\FileLayout;
use Joomla\CMS\Uri\Uri;
use Joomla\CMS\Menu\SiteMenu;

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

/**
 * Load template style and functionality assets
 *
 */
$wa->useStyle( 'template.[redacted]' )
   ->useScript( 'template.[redacted]' );

<!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>

templateDetails.xml

<?xml version="1.0" encoding="UTF-8"?>
  <extension version="4.0" type="template" client="site">
    <name>[redacted]</name>
    <version>1.0.0</version>
    <creationDate>2023-10-17</creationDate>
    <author>Mike Hermary</author>
    <authorEmail>[email protected]</authorEmail>
    <authorUrl>https://imaginecreative.ca</authorUrl>
    <description>Joomla 4 template for [redacted]</description>
    <copyright>Copyright 2007 - Now Imagine Creative. All rights reserved.</copyright>
  <files>
    <filename>index.php</filename>
    <filename>joomla.asset.json</filename>
    <filename>templateDetails.xml</filename>
  </files>
  <languages folder="language">
    <language tag="en-GB">en-GB/tpl_[redacted].ini</language>
    <language tag="en-GB">en-GB/tpl_[redacted].sys.ini</language>
  </languages>
  <media destination="templates/site/[redacted]" folder="media">
    <folder>css</folder>
    <folder>scss</folder>
    <folder>images</folder>
    <folder>js</folder>
  </media>
  <positions>
    <position></position>
  </positions>
</extension>

joomla.asset.json

{
  "$schema": "https://developer.joomla.org/schemas/json-schema/web_assets.json",
  "name": "[redacted]",
  "version": "4.0.0",
  "description": "This file contains details of the assets used by [redacted]",
  "license": "GPL-2.0-or-later",
  "assets": [
    {
      "name": "template.[redacted]",
      "description": "The file containing the CSS for this template.",
      "type": "style",
      "uri": "template.min.css"
    },
    {
      "name": "template.[redacted]",
      "description": "The file containing the JavaScript for this template.",
      "type": "script",
      "uri": "template.js",
      "attributes" : {
        "type": "module"
      }
    }
  ]
}

The assets media directory exists in the template and in the media/templates/site/<template_name> directory on the server.

I am using Git to push the files to the template directory. The ownership for the template directory is git:git. I tried changing to www-data:www-data for testing purposes, but it did not help.

The asset files in the media/templates/site/<template_name> directory are using www-data:www-data.

Any suggestions on what I do not have setup correctly.

Improve this question

1 Answer 1

Reset to default
2

Templates need to be "inheritable" to implicitly load assets from media/templates/[client]/[template] directory. Making a template inheritable allows users to create "child templates" of your template. To make a template inheritable, add inheritable tag to manifest file:

<inheritable>1</inheritable>

An alternative to this is using the old directory structure, i.e. loading the assets from templates/[template] or media/[template] directory.

Improve this answer
4
  • I tried adding <inheritable>1</inheritable> to the templateDetails.xml file, but it did not work. I noticed you wrote media/templates/[client]/[template] instead of media/templates/site/[template]. Is this one in the same? Alternately, is this the proper, old structure way of calling the CSS: HTMLHelper::stylesheet( Uri::base() . 'path/to/css/file', array( 'version' => '1.0', 'media' => 'screen' ) );?
    – Mike Hermary
    Commented Oct 23, 2023 at 14:01
  • 1
    You need to reinstall the template. Actually, because of a bug in Joomla code, you need to uninstall the template first and then install it again for the change to be reflected. I just used [client] as placeholder here. It will be site for frontend templates and administrator for backend template. So it is the same as what you have now.
    – Sharky
    Commented Oct 24, 2023 at 5:34
  • You don't need to use HTMLHelper. You should use web asset manager going forward. It's just that the paths need to be altered (or template made inheritable). In theory, you could keep the same file path but explicitly declare it in the schema like so: "uri": "media/templates/site/test/css/template.min.css". To answer your question, it's not entirely correct. Base URI should not be prepended, the lookup should work against local filesystem. Secondly, HTMLHelper is a service registry of sorts. Technically you should be using the underscore method instead of calling stylesheet directly.
    – Sharky
    Commented Oct 24, 2023 at 5:46
  • Uninstalling and installing the template again has resolved this issue. The web asset manager is now functioning as expected. Thanks!
    – Mike Hermary
    Commented Oct 24, 2023 at 13:54

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.