Añadir javascript y css en joomla

Las referencias a archivos javascript y css (hojas de estilo) deben estar bien puestas en el código html entre los tags <style> o <script> en el head del documento para generar un documento XHTML válido. En joomla es la aplicación del CMS la que genera todo el html que forma una página antes de darle salida al navegador de los visitantes de la web. En este post veremos como añadir las referencias a archivos y sentencias tanto de javascript como de css en joomla 1.5 o superior. Es tan sencillo como utilizar las siguientes funciones del framework de joomla:

//Añadir referencia a un archivo javascript
// La ruta por defecto es 'media/system/js/'
JHTML::script($filename, $path, $mootools);

// Añadir referencia a un archivo CSS
// La ruta por defecto es 'media/system/css/'
JHTML::stylesheet($filename, $path);

Con estas funciones joomla tomará todos los requerimientos para incluir de forma adecuada las referencias a un archivo javascript o css. Solo hay que incluir el nombre del archivo, la ruta o path donde se encuentra el archivo y, para el caso de javascript, podemos especificar la variable $mootools como true si el archivo javascript a incluir necesita esta biblioteca, joomla incluirá mootools en caso de que no se haya incluido ya.

Estas funciones pueden no ajustarse a nuestras necesidades o no ser lo suficientemente flexibles. Pero no hay que preocuparse, joomla tiene los métodos adecuados para incluir javascript y css de forma más flexible. Estos métodos consisten en ir más abajo en las funciones descritas anteriormente. Para ello primero hay que obtener el puntero que hace referencia al documento actual:

$document = JFactory::getDocument();

Ahora podemos incluir javascrpt y css. Para incluir un archivo javascript usaremos:

$document->addScript($url);

Esta función no comprobará la inclusión de mootools en caso necesario, por tanto si necesitas cargar mootools y quieres asegurarte que es cargado por el core de joomla debes incluir, de forma previa a la sentencia anterior, la siguiente línea:

JHTML::_("behavior.mootools");//Joomla 1.5

JHTML::_("behavior.framework");//Joomla 1.6+

Para añadir la referencia a un archivo css se usa el siguiente código:

$document->addStyleSheet($url);

Si aún necesitas más flexibilidad, como por ejemplo incluir declaraciones inline de css y javascript que son generadas con php, no desde un archivo, se puede hacer a través de la referencia al documento y las siguientes funciones que incluirán el css y el javascript inline en el head del documento html generado por joomla:

//Añadir javascript
$document->addScriptDeclaration($javascript, $type);

// Añadir estilos css
$document->addStyleDeclaration($styles, $type);

Por ejemplo, el siguiente código se usa para definir una función customizada para crear tool tips usando la biblioteca mootools:

function getToolTipJS($toolTipVarName, $toolTipClassName){
 $javascript = 'window.addEvent(\"domready\", function(){' ."\n";
 $javascript .= "\t" .'var $toolTipVarName = new Tips($$("' . $toolTipVarName .'"), {' ."\n";
 $javascript .= "\t\t" .'className: "' .$toolTipClassName .'",' ."\n";
 $javascript .= "\t\t" .'initialize: function(){' ."\n";
 $javascript .= "\t\t\t" .'this.fx = new Fx.Style(this.toolTip, "opacity", {duration: 500, wait: false}).set(0);' ."\n";
 $javascript .= "\t\t" .'},' ."\n";
 $javascript .= "\t\t" .'onShow: function(toolTip){' ."\n";
 $javascript .= "\t\t\t" .'this.fx.start(1);' ."\n";
 $javascript .= "\t\t" .'},' ."\n";
 $javascript .= "\t\t" .'onHide: function(toolTip) {' ."\n";
 $javascript .= "\t\t\t" .'this.fx.start(0);' ."\n";
 $javascript .= "\t\t" .'}' ."\n";
 $javascript .= "\t" .'});' ."\n";
 $javascript .= '});' ."\n\n";
 return $javascript;
}
 
$document = JFactory::getDocument();
$document->addStyleSheet("/joomla/components/com_mycustomcomponent/css/mytooltip.css",'text/css',"screen");
$document->addScriptDeclaration(getToolTipJS("mytool","MyToolTip"));

(Para que este javascript funcione debe incluirse el nombre de clase apropiado en el html así como los estilos para la clase, pero esto queda fuera del objetivo de este articulo).

Aún hay más flexibilidad disponible usando la función addCustomTag que permite añadir los tags que uno quiera en el head del documento. En determinados casos puede ser necesario usar esta función para añadir css y javascript, por ejemplo la inclusión de css entre comentarios que sólo procesa Internet Explorer 6 y anteriores:

Ejemplo:

$stylelink = '<!--[if lte IE 6]>' ."\n";
$stylelink .= '<link rel="stylesheet" href="/../css/IEonly.css" />' ."\n";
$stylelink .= '<![endif]-->' ."\n";
 
$document = JFactory::getDocument();
$document->addCustomTag($stylelink);

Con todo esto se pueden incluir css y javascript en el head del html en todas las situaciones que se nos presenten a la hora de desarrollar una aplicación o plantilla para joomla.