Conociendo el sistema de plantillas de Magento Commerce

Con este post pretendemos introduciros al sistema de plantillas de Magento Commerce, es un sistema complejo pero con una gran flexibilidad para adaptarlo a nuestras necesidades.

Los templates de Magento se crean a partir de los archivos ubicados en dos directorios, en uno de ellos se encuentran los archivos que definen la estructura y los contenidos y en el otro se encuentran los recursos de la plantilla es decir imágenes, javascript y hojas de estilo.

Los directorios de los que hablamos son estos:

  • Directorio estructura: app/design/frontend/default/default/ En este directorio se encuentra el layout, traducciones y los archivos .phtml usados por el template.
  • Directorio recursos: skin/frontend/default/default/ En este directorio encontrarás las imágenes, CSS y archivos javascript usados por la plantilla.

Las dos ultimas carpetas de ambas rutas, “default/default” hacen referencia a “paquete/tema”, el sistema te permite crear uno o varios paquetes con una o varias plantillas dentro de cada paquete y condicionar el uso de uno u otro en el catalogo.

Como veras, los archivos de los temas están divididos en dos partes. Al separar los archivos que son accesibles desde el navegador (imágenes y javascripts) de los que deben estar ocultos, se asegura una óptima protección a la tienda desde cualquier parte accesible al público.

En ambos casos, estos se refieren al nombre del paquete y al  nombre del tema respectivamente. Así que si te encuentras trabajando en un tema llamado “mi_tema” en un paquete llamado “mi_paquete”, tendrías que trabajar en “app/design/frontend/mi_paquete/mi_tema”.

Es posible guardar cuantos temas necesites en el directorio del paquete, sin embargo al momento de editarlos, tu tienda solo podrá “cargar” el tema “default” y un tema adicional a tu tienda. Así que Magento te da la posibilidad de trabajar sobre varios temas, esto es útil por ejemplo cuando se tiene alguna fecha especial o el lanzamiento de alguna campaña.

Creando un nuevo tema

Para crear un tema nuevo basado en el tema “default”, lo mas sencillo es copiar un default existente en el que puedas basar el nuevo tema que estás por crear. Crea una copia de app/design/frontend/default/default/ y cámbiale el nombre al que tu quieras (ej. app/design/frontend/default/mi_tema/). El nombre dado al directorio del tema es el nombre por el cual la aplicación reconocerá el tema. Ahora realiza lo mismo para el directorio skin/frontend/default/default. Y eso será todo, ahora has creado exitosamente un nuevo tema basado en el “default”.

Asignando el nuevo tema en la administración de Magento

Una vez que hayas creado tu tema, es necesario asignarlo a tu tienda para que este sea cargado por Magento. Para ello, dirígete al panel de administración de Magento (www.tutienda.com/admin), e ingresa a la pestaña de configuración (Sistema->Configuración->General - Pestaña diseño).

Paso 1

De la pestaña de diseño, en el campo Paquete, escribe el nombre del paquete en el que se encuentra tu tema. Si dejas el campo vacio, Magento cargara por defecto el paquete “default” 

Paso 2

Define tu tema en los campos: Plantillas, Skin (imágenes / CSS), Diseño y Por defecto, en ellos escribe el nombre del tema que hayas creado ej.: mi_tema

Paso 3

Una vez realizados los pasos anteriores, pulsa en el botón de “Guardar la configuración” y refresca la página de tu tienda – ¡Ya está! ahora verás el nuevo tema que has creado reflejado en el frontend de tu tienda online.