Añadir CSS y jQuery en Magento desde layout

Hay varias maneras de incluir librerías JavaScript en Magento. En este post se explica cómo añadir jQuery de manera que afecte a toda la estructura de Magento modificando los archivos layout.

En el archivo page.xml ubicado en: /app/design/frontend/default/TUTEMA/layout/page.xml se localizará la línea de código que hace referencia a la cabecera con la que se inicializa la etiqueta HEAD del tema activo de Magento :

<block type="page/html_head" name="head" as="head"> 

Se añadirá antes de su cierre:

<action method="addItem"><type>skin_css</type><name>css/estilo-jquery.css</name></action>
<action method="addItem"><type>skin_js</type><name>js/jquery.min.js</name></action>
<action method="addItem"><type>skin_js</type><name>js/jquery.ini.js</name></action>


Para evitar conflictos con otras librerías de JavaScript que Magento carga por defecto, se utilizará jQuery. noConflict(); Ver la documentación de jQuery en: http://api.jquery.com/jQuery.noConflict/

Ejemplo: var $j = jQuery.noConflict();

Después de haber realizado estos cambios se podrá utilizar jQuery en toda nuestra tienda Magento. Los archivos correspondientes a la librería de jQuery y CSS se cargarán ahora desde nuestro tema activo de Magento ubicados en:

skin/frontend/default/TU_TEMA/js  y  skin/frontend/default/TU_TEMA/css