Me encontraba buscando una solución para un proyecto en el cual necesitaba añadir código javascript a una tienda de magento, ya que no conocía el método para agregar código sin tanto rollo, me encontré con manuales muy largos sobre como hacer esto, la verdad es que no tengo mucho conocimiento de la estructura de magento como para poder modificar demasiados archivos, directorios, librerias, controladores etc.
Después de unos 20-30 min me tope con la solución la cual les voy a compartir el día de hoy para cuando estes en esta situación encuentres la respuesta de una manera mucho más rápida.
La Adición y eliminación de Javascript o CSS se maneja por separado dentro de Magento.
El CSS se añade de la manera habitual, pero los archivos Javascript se agregan a través de un archivo de PHP que lee a través de la carpeta “js” en el directorio raíz (root / js / index.php es responsable de esto) .
Todo esto esta muy bien y es bueno para Magento. La verdadera pregunta es ¿cómo nosotros, como desarrolladores, agregamos estos elementos cuando los necesitamos?.
Añadir Javascript a Magento en Todas las Páginas
Para css o js que desees añadir a cada página, edita el archivo page.xml ubicado en la carpeta de diseño (app / design / frontend / default / tu_tema / layout / page.xml). Dentro de este archivo, en la parte superior se encuentra la zona con el bloque que tiene un child llamado “head”, que contiene los elementos CSS y JS incluidos.
<pre><block type="page/html_head" name="head" as="head">
<action method="addJs">
<script>prototype/prototype.js</script>
</action>
<action method="addJs" ifconfig="dev/js/deprecation">
<script>prototype/deprecation.js</script>
</action>
<action method="addJs">
<script>prototype/validation.js</script>
</action>
<action method="addJs">
<script>scriptaculous/builder.js</script>
</action>
…
</block></pre>
Aquí puedes añadir tus javascript y css. Ten en cuenta que todos los archivos JS que se agreguen deben estar ubicados en la carpeta “js” en el directorio raíz. Los archivos CSS se incluyen a partir de los archivos del skin de la plantilla actual y la predeterminada (skin / frontend / default / tu_template / default / css).
Añadir Javascript a Magento en Áreas Específicas
Si desea incluir css o js sólo en ciertas áreas (tales como en el checkout o en las páginas de catálogo), esto es posible también. Por ejemplo, si quieres agregar solo en la vista del producto, puede abrir catalog.xml en lugar de page.xml, encuentra la misma área de código que usamos en el método de arriba. Añade tu código ahí – toma cuenta de que estamos utilizando una etiqueta en lugar de etiquetas. Utilizamos la etiqueta de “reference” para hacer referencia a otros bloques que se encuentran en otras áreas de la plantilla.
<pre><reference name="head">
<action method="addJs"><script>varien/product.js</script></action>
<action method="addItem">
<type>js_css</type>
<name>calendar/calendar-win2k-1.css</name><params/>
<!–<if/><condition>can_load_calendar_js</condition>–>
</action>
<action method="addItem">
<type>js</type>
<name>calendar/calendar.js</name>
<!–<params/><if/><condition>can_load_calendar_js</condition>–>
</action>
<action method="addItem">
<type>js</type>
<name>calendar/lang/calendar-en.js</name>
<!–<params/><if/><condition>can_load_calendar_js</condition>–>
</action>
<action method="addItem">
<type>js</type>
<name>calendar/calendar-setup.js</name>
<!–<params/><if/><condition>can_load_calendar_js</condition>–>
</action>
</reference></pre>
Para cualquiera de los dos métodos solo ocupamos agregar otro bloque de código como cualquiera de los otros que vienen ahi, cambiar la ruta por la ruta donde se encuentra nuestro archivo JS (directorio raíz/js/archivo.js) y listo.