Para añadir ficheros javascript y css a una página Magento desde el layout, podemos utilizar el siguiente fragmento:
<reference name="head"> <action method="addItem"><type>js</type><name>js/miscript.js</name></action> <action method="addItem"><type>skin_css</type><name>css/estilos.css</name></action> </reference>
El problema que se nos puede plantear es que los archivos siempre son añadidos detrás de todos los existentes. Si además seguimos la recomendación de nuestros amigos de Magento de realizar todas las modificaciones del layout en el archivo local.xml de nuestro tema activo, entonces tenemos asegurada la última posición de la lista para ambos tipos de archivo.
Entonces, que ocurre si tenemos que ‘insertar’ un archivo de javascript o estilos css al inicio de la lista, por ejemplo para evitar conflictos con otras librerías.
Magento no permite indicar el orden en el que se insertan los elementos javascript y css y por tanto, no podemos hacerlo de una forma ‘estandar’.
Sin embargo, podemos realizar la siguiente modificación.
En primer lugar deberemos copiar el archivo:
app/code/core/Mage/Page/Block/Html/Head.php
a la carpeta local:
app/code/local/Mage/Page/Block/Html/Head.php
A continuación podemos añadir la siguiente función al archivo (hay una similar llamada addItem):
/** * Insertar un archivo javascript o css al principio de la lista */ public function addItemBefore($type, $name, $params=null, $if=null, $cond=null) { if ($type==='skin_css' && empty($params)) { $params = 'media="all"'; } $items = $this->_data['items']; $newItems[$type.'/'.$name] = array( 'type' => $type, 'name' => $name, 'params' => $params, 'if' => $if, 'cond' => $cond, ); $this->_data['items'] = array_merge($newItems, $items); return $this; }
Con este archivo modificado, ahora podemos añadir nuestros ficheros js o css al inicio de la lista, mediante el siguiente fragmento de layout:
<reference name="head"> <action method="addItemBefore"><type>js</type><name>js/miscript.js</name></action> <action method="addItemBefore"><type>skin_css</type><name>css/estilos.css</name></action> </reference>
Hey! Qué opinas sobre el artículo?