Estructura del template
Los templates se componen de 3 partes:
1. Los estilos css con sus imágenes (carpeta Skin)
2. Los xml que cargan bloques en la estructura de la pagina (carpeta Layout)
3. Los templates phtml que son bloques o la pagina misma (carpeta Templates)
Los estilos deben tener los nombres de clases que utiliza magento, ya que hay muchos elementos que se generan dinámicamente y no se pueden editar fácil. Conviene adaptar nuestros estilos a magento.
Los xml definen que divs son la estructura del sitio, y llama a bloques que se cargan dentro de cada uno de estos divs. Dentro de la estructura podemos:
– Colocar un php que cargue un modulo, en el html de un bloque o de la pagina
– Hacer que este módulo se cargue desde el xml. Esta opción es la más limpia aparentemente, pero ocurre que desde varios xml diferentes puedo estar cargando bloques al header. Por ejemplo, en la columna derecha tenemos el carrito que se carga desde checkout.xml, la suscripción al newsletter que se carga desde newsletter.xml y modulo de publicidad que se llama desde callout.xml.
Los bloques pueden estar, como templates en una carpeta, o ser bloques cms cargados en el administrador, trata de usar mas que nada esta última opción para que después se puedan editar desde el admin. Tanto uno como otro pueden ser llamados mediante el xml.
Configurar el tema
Al colocar un tema, lo primero que tenemos que hacer es que magento lea nuestro tema. Desde el admin en Sistema > Configuracion > Diseño, vamos a dejar como carpeta de templates la default, pero en templates, layouts y skins, vamos a colocar el nombre de la carpeta de nuestro tema.
Magento tiene además una caché, que incluye a los css, templates, productos, etc. Recomiendo deshabilitarla para no pasar horas delirando porque no se ven los cambios, se encuentra en Sistema > Gestor de la cache.
Agregar o encontrar un bloque
Los ficheros XML que se encuentran dentro de la carpeta “layout” hacen refencia a diferentes secciones del diseño , por ejemplo el fichero catalog.xml hace referencia a todas las secciones de tipo catálogo.
Si analizamos el fichero encontraremos todas las páginas que forman parte del diseño del catálogo: <catalog_product_compare_index>, <catalog_product_view>… y el más importante <default>
Si queremos definir un bloque para toda la estructura general lo incluiremos dentro de <default>, si queremos que nuestro bloque sólo se muestre dentro de la vista del producto lo incluiremos dentro de <catalog_product_view>.
Para cambiar la posición del bloque nos fijamos en la etiqueta <reference> a la que tiene que pertenecer el bloque. En esa etiqueta encontraremos un atributo name que puede contener diferentes valores: left, right, header, footer, content… que como su nombre indica hace referencia a una zona
Es posible que al cambiar los bloques de columna estos no aparezcan donde nos interesa. Modificar el orden de los bloques de una zona se realiza indicando uno de los atributos “before” o “after” o los dos a la vez.
Para mostrar el bloque como el primero de todos: before=”-”.
Para mostrar el bloque como el último: after=”-”.
Para mostrar el bloque antes de otro bloque: before=”nombre-del-bloque”.
Para mostrar el bloque después de otro bloque: after=”nombre-del-bloque”.
Remover bloques y jerarquias
Para quitar un bloque, o incluso una columna entera, se coloca en un xml: <remove name=”nombre-del-bloque”/>.
Como para quitar o agregar bloques, hay que buscarlos en cada xml del template, es una gran ayuda, desde el administrador en: Sistema > Configuracion > Main Website > Desarrollador > Depurar > Ayuda de rutas de la plantilla, elegir Si, que activa una opción que nos muestra en el frontend, desde donde está siendo llamado cada módulo, incluyendo la ruta del template para saber si es del nuestro o el default.
Estructuras base
En nuestro tema, en templates > pages, nos encontramos archivos phtml que son la estructura de nuestro sitio, estos se llaman, por ejemplo, 3columns.phtml.
Acá están los divs principales, dentro de los cuales se cargaran luego los bloques, cada uno de estos archivos es la estructura del sitio, y pueden ser varios. 3columns es un ejemplo de la versión de 3 columnas del sitio, podemos crear para algunas paginas, una versión de 2 columnas o de una sola, y desde el administrador, al editar las paginas cms, o las categorías, podemos elegir con que template se verán. Así también podemos asignar un tema o una estructura en particular, a una pagina o una categoría, o incluso a un producto.
En templates > pages, nos encontramos también con una carpeta html, donde están el header, footer y otras partes esenciales del sitio. En estos templates podemos agregar bloques, o texto estático, pero además, los archivos xml del sitio pueden estar cargando bloques en estos templates.
Con esto ya podemos tener claro donde poder encontrar y mover bloques y gestionar contenidos.
