Siguiendo un poco con el tema de las buenas prácticas en cuanto a maquetación, módulos y esas yerbas; vamos a ver cómo incluir un nuevo archivo css dentro de nuestro template.

Básicamente tenemos dos formas (algunas más en realidad si queremos hacer las cosas poco prolijas).

La primera y más extendida, sería tomar page.xml de nuestro layout y repetir, por ejemplo la siguiente línea.

<action method="addCss"><stylesheet>css/mi_css.css</stylesheet></action>

Le cambiamos el nombre del archivo (que deberá estar ubicado en el path correcto) y con eso vamos a tener nuestro archivo css listo para ser leído.

La segunda forma de hacerlo, que nos sirve para nuestras extensiones, es hacer esto mismo pero desde la definición de layout del módulo.

Esto nos permitirá que sólo en los casos en los que el módulo se instancie, o incluso sólo en una sección, se agregue nuestro archivo css.

Dado que el archivo css ya lo tenemos ubicado dentro de las carpeta de skin correspondiente, vamos a agregar la definición a nuestro módulo.

Vamos a suponer que el módulo se llama Noticias. Normalmente, encontraríamos dentro de la carpeta de layout del frontend un archivo noticias.xml.

Dentro de ese archivo tenemos que agregar las siguientes líneas.

<?xml version="1.0"?>
<layout version="0.1.0">
 
    ...
 
    <default>
        <reference name="head">
            <action method="addCss">
                <name>noticias.css</name>
            </action>
        </reference>
    </default>
 
    ...
 
</layout>

De ésta forma le decimos que tome el bloque “head” (que se encuentra definido en page.xml) y agregue un archivo css. Luego se le pasa el path al archivo que puede ser cualquiera dentro de la carpeta de skin the nuestro theme.

Una de las grandes bondades (y de los grandes problemas en el comienzo de la curva de aprendizaje) es el manejo de los templates a través de las definiciones xml del layout.

Normalmente, cuando trabajamos con un skin desde el comienzo, más allá de las líneas de diseño que puedan existir, tenemos bastante libertad de elección en la forma en que se va estructurar ese theme.

Ahora bien, cambia radicalmente el escenario cuando nos dedicamos a crear extensiones o cuando ciertas customizaciones que hayamos desarrollado se tornan parte de la batería de módulos y ajustes que usamos en cada proyecto.

Si para cada caso debiéramos estar modificando los archivos phtml, los xml, el css… bueno, sería bastante molesto y estaríamos dejando de tener código reutilizable.

A través de las definiciones de layout podemos aplicar cambios al momento de renderear el template sin hacer modificaciones a los archivos que ya se estén usando. En realidad, hay unas cuantas cosas que pueden hacerse, pero dada la cantidad de funciones con las que contamos para el manejo del layout, sólo me voy a centrar en el reemplazo de llamadas a los phtml.

Como ejemplo, vamos a tomar el selector de moneda. Vamos a suponer también que tenemos definido el update de layout en el módulo.

Continue reading →