Christophe Lance marketing internet et web designChristophe Lance marketing internet et web design (Mobile version)Logo Christophe Lance (Mobile)

Javascript est un langage incontournable, lorsque l'on veut dynamiser et optimiser un CMS en PHP comme Joomla. Par exemple, il est possible de créer un calculateur (BMI, devis, etc.) en PHP, mais l'intégrer dans le CMS en Javascript évitera un rechargement de page ou limitera l'interaction au chargement d'un flux de données de type Ajax.

Javascript est bien entendu déjà utilisé par le coeur du CMS et par toutes sortes d'extensions ou de fonctionnalités pour réaliser des diaporamas d'images, des filtres d'articles ou des effets d'animation. Sur un site important, cet agglomérat de codes a vite tendance à transformer le CMS en usine à gaz, s'il est mal géré.

La version 4 de Joomla améliore l'intégration de Javascript en proposant un gestionnaire d'assets pour contrôler plus finement le chargement des fichiers CSS et Javascript. Voici une petite introduction utile à celui ou celle qui voudrait allier ses compétences en Javascript avec la puissance, la stabilité et les possibilités d'évolution d'un CMS mature comme Joomla 4.

Intégrer globalement Javascript et CSS avec les fichiers user.js et user.css

Il est possible d'intégrer globalement sur le site du code Javascript en créant un fichier user.js à l'emplacement: templates/votre_template/js/user.js ou un fichier CSS personnalisé à l'emplacement templates/votre_template/css/user.css. Les fichiers doivent être créés manuellement, mais l'intégration sera automatique. Si vous avez une version avec du code minifié, les fichiers avec les terminaisons user.min.css et user.min.js auront la priotité du CMS.

Intégrer Javascript dans les articles et les modules

Dans un CMS, il n'est pas conseillé d'intégrer le code Javascript en utilisant l'éditeur de contenu dont le réglage par défaut le supprime automatiquement pour des raisons de sécurité. Il peut être en revanche facilement injecté par un webmaster de manière ciblée au niveau des articles et des modules sans passer par aucune extension. Pour cela, il faut se rendre dans la partie System > Template, cliquer sur le nom du template actif, puis l'onglet Create Override et choisir un élément, composant, module, plugins ou layout (partie de la mise en page) à surcharger. Cliquer sur un lien va créer automatiquemnt une surcharge (Override) d'un fichier PHP qu'il sera possible de modifier dans le dossier templates/votre_template/html. Par exemple cliquer sur la vue article du composant com_content va dupliquer le fichier du template PHP responsable de l'affichage des articles et il sera possible de le modifier ou d'ajouter du code Javascript et PHP.

Créer un override
Créer un override

Voici un exemple simplifié sur la base du module contenu personnalisé qui a l'avantage de pouvoir être attribué facilement à une page particulière du site dans l'onglet Menu assignment. La surcharge va créer un fichier ici: templates/votre_template/html/mod_custom/default.php. Renommez le fichier default.php en script.php, puis créez une instance du module contenu personnalisé dans le gestionnaire de modules, enfin dans paramètres personnalisés > Type de mise en page du module, choisissez script, le nom de la surcharge que l'on vient de créer. N'oubliez pas de publier le module.

Créer une instance de module
Créer une instance de module avec un override

Intégrer jQuery ou un composant Bootstrap 5

Imaginons que l'on veuille utiliser la librairie Javascript jQuery, qui n'est plus chargée par défaut dans Joomla 4, mais reste disponible dans le framework pour des raisons de compatibilité. On placera alors le code PHP suivant au début de la surcharge PHP que l'on vient de créer:

\Joomla\CMS\HTML\HTMLHelper::_('jquery.framework');

Joomla 4 est livré avec la librairie Bootstrap 5. On pourra intégrer séparément chaque composant Javascript de la manière suivante en indiquant dans le premier paramètre le type de composant et dans le deuxième un sélecteur.

\Joomla\CMS\HTML\HTMLHelper::_('bootstrap.alert', '.alert');

Intégrer un fichier dépendant de jQuery

Le fichier Javascript doit être préalablement référencé par le gestionnaire d'assets du CMS, puis être explicitement appelé dans la page prévue en s'assurant qu'il sera positionné après la librairie jQuery dont il dépend (en position after). On peut indiquer à la volée une dépendance dans le gestionnaire d'assets de la manière suivante:

$wa = \Joomla\CMS\Factory::getApplication()->getDocument()->getWebAssetManager();
$wa->registerScript('script1', 'templates/cassiopeia/js/script1.js', ["position" => "after"], [], ["jquery"]);

Il faut appeler le fichier avec la méthode useScript. Il est possible de chaîner plusieurs fichiers avec cette syntaxe:

$wa->useScript('script1')->useScript('script2');

On peut appeler un code inline de cette manière en réglant les paramètres en array pour le positionner après le script dépendant de jquery (syntaxe heredoc optionnelle):

$customScript = <<<EOF
jQuery(document).ready(function() {
console.log("Intégration d'un script JS");
});
EOF;
$wa->addInlineScript($customScript, ['position' => 'after'], [], ['script1']);

À tout moment, il est possible d'examiner l'état du gestionnaire d'assets par un simple:

var_dump($wa);

Intégrer des règles CSS

On peut intégrer du code inline ou dans un fichier CSS de la même façon.

$wa = \Joomla\CMS\Factory::getApplication()->getDocument()->getWebAssetManager();
$wa->registerStyle('customcss', 'templates/cassiopeia/css/custom.css');
$wa->useStyle('customcss');
$customStyle = <<<EOF
.test p {
color: red;
}
EOF;
$wa->addInlineStyle($customStyle);

Supprimer un fichier

Pour supprimer des fichiers chargés dans le gestionnaire d'assets, il faut utiliser ces méthodes:

// Script JS particulier
$wa->disableScript('jquery-noconflict');
// Script Bootstrap 5 particulier
$wa->disableScript('bootstrap.popover');
// Style
$wa->disableStyle('customcss');

Créer son propre template

Pour un contrôle optimal sur les assets et le code HTML, il est toujours possible de dupliquer le template Cassiopeia dans la partie System > Site Template, afin de de le renommer. Le template de base est simple (4 fichiers PHP) et peut être mis à jour sans trop de difficultés. Les assets peuvent alors être référencés directement dans le fichier templates/votre_template/joomla.asset.json, puis intégrés individuellement dans les overrides.

Dupliquer le template
Dupliquer le template

Le gestionnaire d'assets permet aussi d'inclure du code Javascript en tant que module JS ou Web component. Je vous invite à consulter la documentation ci-dessus pour en savoir plus.

Sources: Web Assets, Joomla Overrides, Bootstrap et Joomla 4

Devis et renseignement gratuits