phphtmljoomlajoomla-templatejoomla4

Joomla 4 doesn't load assets of custom template

I've created a simple template for Joomla 4:

Structure of *.zip:

index.php:

<?php

defined('_JEXEC') or die;

use Joomla\CMS\Factory;
use Joomla\CMS\HTML\HTMLHelper;
use Joomla\CMS\Language\Text;

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

// Add Favicon from images folder
$this->addHeadLink(HTMLHelper::_('image', 'favicon.ico', '', [], true, 1), 'icon', 'rel', ['type' => 'image/x-icon']);

// Detecting Active Variables
$sitename = htmlspecialchars($app->get('sitename'), ENT_QUOTES, 'UTF-8');

// Get this template's path
$templatePath = 'templates/' . $this->template;

//Register our web assets (Css/JS)
$wa->useStyle('template.tofu.mainstyles');
$wa->useStyle('template.tofu.user');
$wa->useScript('template.tofu.scripts');

//Set viewport
$this->setMetaData('viewport', 'width=device-width, initial-scale=1');

$logo = HTMLHelper::_('image', 'brand.png', $sitename, ['class' => 'd-inline-block align-text-top', 'width' => '32', 'height' => '32', 'loading' => 'eager'], true, 0);

?>
<!DOCTYPE html>

<html xmlns = "http://www.w3.org/1999/xhtml" xml:lang = "<?php echo $this->language; ?>" 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>
      <div class="container">
         <header>
            <nav class="navbar navbar-light bg-light">
               <div class="container-fluid">
                  <a class="navbar-brand" href="#">
                     <?php echo $logo; ?>
                     <?php echo $sitename ?>
                  </a>
               </div>
            </nav>
         </header>
         <jdoc:include type = "modules" name = "top" />
         <jdoc:include type = "component" />
         <jdoc:include type = "modules" name = "bottom" />
      </div>
      <!-- Include any debugging info -->
       <jdoc:include type="modules" name="debug" style="none" />
   </body>
    
</html>

templateDetails.xml:

<?xml version = "1.0" encoding = "UTF-8"?>

<extension type="template" client="site" method="upgrade">
   <name>tofu</name>
   <creationDate>2023-06-12</creationDate>
   <author>Denis Sologub</author>
   <authorEmail></authorEmail>
   <authorUrl>https://mysite.ru</authorUrl>
   <copyright>@ My site. All rights reserved</copyright>
   <license>MIT</license>
   <version>1.3</version>
   <description>Light theme for Joomla</description>
    
   <files>
      <filename>index.php</filename>
        <filename>joomla.asset.json</filename>
      <filename>templateDetails.xml</filename>
   </files>

   <media destination="templates/site/tofu" folder="media">
        <folder>js</folder>
        <folder>css</folder>
        <folder>images</folder>
    </media>
    
   <positions>
      <position>breadcrumb</position>
      <position>left</position>
      <position>right</position>
      <position>top</position>
      <position>user1</position>
      <position>user2</position>
      <position>user3</position>
      <position>user4</position>
      <position>footer</position>
   </positions>
    
</extension>

joomla.asset.json:

{
  "$schema": "https://developer.joomla.org/schemas/json-schema/web_assets.json",
  "name": "tofu",
  "version": "4.0.0",
  "description": "This file contains details of the assets used by Tofu, the default Joomla 4 site template.",
  "license": "MIT",
  "assets": [
    {
      "name": "template.tofu.mainstyles",
      "description": "The default css style to use.",
      "type": "style",
      "uri": "template.min.css"
    },
    {
      "name": "template.tofu.user",
      "description": "The custom css style to use. Must be placed in media/templates/site/j4starter/css/user.css",
      "type": "style",
      "uri": "",
      "dependencies": [
        "template.tofu.mainstyles"
      ]
    },
    {
      "name": "template.tofu.scripts",
      "description": "The file containing the javascript for this template.",
      "type": "script",
      "uri": "template.min.js",
      "attributes" : {
        "defer": true
      },
      "dependencies": [
        "core"
      ]
    },
    {
      "name": "template.active",
      "description": "A dummy asset to allow extensions to use it as a dependency to the active template.",
      "type": "script",
      "uri": "",
      "dependencies": [
        "template.tofu.scripts"
      ]
    }
  ]
}

After installing Joomla 4 put all files of the template in right folders:

However it doesn't load my assets:

<!DOCTYPE html>

<html xmlns = "http://www.w3.org/1999/xhtml" xml:lang = "ru-ru" lang = "ru-ru" dir="ltr">

   <head>
      <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="Some description">
    <meta name="generator" content="Joomla! - Open Source Content Management">
    <title>Home</title>
    <link href="/index.php?format=feed&amp;type=rss" rel="alternate" type="application/rss+xml" title="Home">
    <link href="/index.php?format=feed&amp;type=atom" rel="alternate" type="application/atom+xml" title="Home">
    <link href="/media/system/images/favicon.ico" rel="icon" type="image/x-icon">

      
      <script type="application/json" class="joomla-script-options new">{"system.paths":{"root":"","rootFull":"https:\/\/mysite.ru\/","base":"","baseFull":"https:\/\/mysite.ru\/"},"csrf.token":"b74ed1eb5b2faea874f3b332eb276f28"}</script>
    <script src="/media/system/js/core.min.js?576eb51da909dcf692c98643faa6fc89629ead18"></script>

   </head>

   <body>
      <div class="container">
         <header>
            <nav class="navbar navbar-light bg-light">
               <div class="container-fluid">
                  <a class="navbar-brand" href="#">
                     <img class="d-inline-block align-text-top" width="32" height="32" loading="eager" src="/" alt="My site">                     My site                  </a>
               </div>
            </nav>
         </header>
         <jdoc:include type = "modules" name = "top" />
         <jdoc:include type = "component" />
         <jdoc:include type = "modules" name = "bottom" />
      </div>
      <!-- Include any debugging info -->
       
   </body>
    
</html>
Solution

  • The Cassiopeia template shows this is possible, but the template needs to be "inheritable" or at least have <inheritable>1</inheritable> in the templateDetails.xml.

    You need to remove the template and reinstall, before the option takes effect. Just adding the tag and updating doesn't seem to make a difference.