Hoy te traigo un pequeño artículo en el que te explico cómo cargar CSS y JS en un componente (o donde necesites) para Joomla 4.
Cómo cargar archivos JS y CSS en tu componente con #Joomla4 - #MejorConJoomla Tuitéalo
Durante unos días he estado desarrollando una extensión para Joomla 4 y tenía la necesidad de cargar sus propios archivos de CSS y JS para su visualización y funcionamiento.
En versiones anteriores de Joomla había un par de formas de hacerlo, pero esto ha cambiado con la nueva versión.
Así que, a continuación, te explico la forma "oficial" de hacer esto.
En este proceso intervienen los siguientes elementos:
- Un directorio (carpetas) con los ficheros a cargar.
- Un fichero JSON con la información que tiene que cargar.
- El código PHP para hacer la llamada correspondiente y cargar el fichero que necesites en cada momento.
Vamos a continuación a ver cada uno de ellos por separado (partiendo de la base de que el componente de ejemplo con el que voy a explicarte todo esto se llama com_mi_componente).
Directorio de archivos CSS y JS
La estructura que debería tener este directorio para tener todo bien organizado es la siguiente:
- Fichero JSON con la información. Este fichero se llama:
joomla.asset.json - Carpeta "js" con los ficheros JS que necesites para tu componente.
- Carpeta "css" con los ficheros CSS que necesites para tu componente.
El directorio lo puedes encontrar (o debería estar) en media/com_mi_componente/
Fichero JSON para carga de CSS y JS en Joomla 4
Como te he comentado antes, este fichero se llama joomla.asset.json y tiene la siguiente apariencia:
{
"$schema": "https://developer.joomla.org/schemas/json-schema/web_assets.json",
"name": "com_mi_componente",
"version": "CVS: 1.0.0",
"license": "Licencia Pública General GNU versión 2 o posterior. Consulte LICENSE.txt",
"assets": [
{
"name": "com_mi_componente.confirm",
"type": "script",
"uri": "com_mi_componente/confirm.js",
"dependencies": [
"jquery"
],
"attributes": {
"defer": true
}
},
{
"name": "com_mi_componente.confirm",
"type": "style",
"uri": "com_mi_componente/confirm.css"
}
]
}
Te explico a continuación el apartado de assets del JSON, que es la importante:
Fichero JSON: definición para JS
En primer lugar vemos cómo definir la carga del fichero JS.
{
"name": "com_mi_componente.confirm",
"type": "script",
"uri": "com_mi_componente/confirm.js",
"dependencies": [
"jquery"
],
"attributes": {
"defer": true
}
}
Como puedes ver tenemos los siguientes atributos:
- name: nombre del fichero que se va a cargar. Es decir, lo que tendremos que poner en nuestro código PHP para poder cargarlo.
- type: tipo de fichero que se carga (en esta caso de tipo "script").
- uri: nombre del fichero que se cargará (confirm.js).
- dependencies: si necesita que algún otro fichero JS esté cargado para que funcione correctamente. En este caso, "confirm.js" necesita jQuery, por tanto, se lo comunicamos aquí.
- attributes: atributos que necesita el fichero. En este caso le decimos que la carga se de tipo "defer" o diferida. Podría ser normal o "async".
Si no sabes de qué van estos atributos aquí tienes un artículo donde lo explican muy muy bien.
Bien, pues esta sería la definición de carga del fichero "confirm.js" que está dentro de la carpeta "js" de la estructura del directorio que hemos visto anteriormente.
Fichero JSON: definición para CSS
Como te puedes imaginar, para los archivos CSS la cosa será muy similar.
{
"name": "com_mi_componente.confirm",
"type": "style",
"uri": "com_mi_componente/confirm.css"
}
Aquí o te explico nada ya que la estructura es la misma que para JS.
Lo que cambia es el tipo "type" que en esta cas para a ser "style" en lugar de "script".
Bueno, pues con esto, ya tenemos definido nuestro fichero JSON.
Vamos a ver ahora cómo cargar el JS y el CSS dentro del componnente.
Código PHP para cargar archivos CSS y JS en Joomla 4
Para la carga de ficheros en Joomla 4 hay que hacer uso del "gestor de Assets", getWebAssetManager, que se encuentra en getDocument, dentro de getApplication.
Nuestro código sería el siguiente:
$wa = Factory::getApplication()->getDocument()->getWebAssetManager();
$wa->useScript('com_mi_componente.confirm');
$wa->useStyle('com_mi_componente.confirm');
Creo que poco hay que explicar.
- Para el JS utilizaremos "useScript":
$wa->useScript('com_mi_componente.confirm'); - Para el CSS utilizaremos "useStyle":
$wa->useStyle('com_mi_componente.confirm');
Y ya estaría.
Esta sería la forma de cómo cargar archivos JS y CSS en tu componente con Joomla 4.
Si quieres más información sobre Web Assets en Joomla 4, puedes ver la documentación oficial: Web Assets (Joomla 4).
Como siempre, espero que te haya gustado, que te resulte útil y que si quieres, lo compartas con más usuarios ;-)
Cómo cargar archivos JS y CSS en tu componente con #Joomla4 - #MejorConJoomla Tuitéalo
