Skins, paquetes y temas en Magento

Ya antes expliqué cómo se organizan dentro de la aplicación los skins.

Ubicando esos archivos, podríamos comenzar a modificar el skin para adaptarlo a nuestra prefrencia.

Habiendo ahora alcanzado cierta capacidad para modificar el skin de nuestra tienda, vamos a ver cómo hacer para tener múltiples skins, y no sólo para el frontend, sino para toda la aplicación.

Vamos a tomar como caso a modificar, el del, por ahora, nuestro único frontend.

Como comento en el post mencionado al comienzo, los archivos de cualquier skin, se encuentran en dos directorios: /app/design y /skin.

Ahora bien, la estructura propuesta por Magento para la gestión de skins, permite un cómodo manejo y una facilidad de organización a la cual uno se acostumbra rapidamente.

Ya sea que desarrolles todos tus skins y los archives en un único repositorio junto al código de la aplicación, o bien, que tengas tu tienda funcionando pero te guste ir cambiando la apariencia del mismo; es posible mantener todos esos skins juntos, sin que por ello traiga algún problema.

En primer lugar, tanto en la carpeta /app/design como /skin, Magento separa al material en:

  • adminhtml: para el backend.
  • frontend: para el o los frontends (ya vamos a ampliar sobre múltiples vistas de una misma tienda)
  • install: para la apariencia que tendrá el instalador.

¿Qué es lo que podemos hacer entonces?.

Volviendo a las carpetas en dónde se almacena todo el material del cual disponemos, podemos ver la siguiente diferenciación:

/default/default

El primer default corresponde al nombre de lo que se denomina paquete. El segundo, corresponde al… bueno, la traducción no hará justicia; corresponde al tema.

Los paquetes funcionan como colecciones de temas que podemos usar.

Dicho esto, podríamos tener organizados nuestros temas de la siguiente forma.

/default/blank
/default/blue
/default/default
/default/modern

Tanto default, como blank, blue o modern; son temas que se encuentran disponibles dentro del paquete default.

De acá en más, dependerá de la forma en que nos guste más organizar nustros skins. Podríamos crear otro paquete, y agrupar ahi nuestro temas, quedandonos algo como esto.

/paquete1/tema1
/paquete1/tema2

Esto nos permitiría separar claramente nuestros diseños de los provistos por la aplicación, y nos sería más facil de resguardar o evitar que se pise con una actualización.

Si juntara lo comentado hasta ahora, tendríamos la siguientes carpetas.

/default/blank
/default/blue
/default/default
/default/modern
/paquete1/tema1
/paquete1/tema2

Para terminar de graficar ésta organización de los archivos, les dejo el path completo de cómo se verían en nuestra estructura de archivos, todos estos skins. Vale aclarar que los indico, a manera de ejemplo, para el frontend, pero se podría aplicar tanto al adminhtml como al install; permitiéndonos esto, cambiarle por completo la cara a la plataforma.

Nuestras carpetas quedarían así.

/app/design/frontend/default/blank
/app/design/frontend/default/blue
/app/design/frontend/default/default
/app/design/frontend/default/modern
/app/design/frontend/paquete1/tema1
/app/design/frontend/paquete1/tema2
/skin/frontend/default/blank
/skin/frontend/default/blue
/skin/frontend/default/default
/skin/frontend/default/modern
/skin/frontend/paquete1/tema1
/skin/frontend/paquete1/tema2

En el próximo post, vamos a ver cómo indicarle a Magento que utilize uno, u otro, o incluso, una mezcla de varios.

A lo mejor te interese leer

4 thoughts on “Skins, paquetes y temas en Magento

  1. Hola…estoy tratando de cambiar el default theme por el blank, y me gustaria saber si solo mediante magento connect lo puedo descargar, y si es así, es necesario actualizar antes los modulos del core a pesar de que tenga la ultima version de magento? (asi lei en un articulo).
    Intente bajar por magento connect pero cuando fui a revisar en la ruta /app/design/frontend/default/ solo estaba el default; en vista de q no me salio busque en el foro en ingles y encontre un link para descargar el theme blank de manera comun, lo coloque en la ruta que es, lo aplique al website, pero igual no se visualizan cambios…

    chao… disculpa la molestia

    gracias totales Xd

  2. @Gabriela

    Lo correcto sería bajarlo vía MagentoConnect. Esposible que en algunos casos, al descargar el skin, se te actualize algo del core de la plataforma (pero dependerá de la versión que uses).
    Si ya tenés la última versión, no pasa nada.
    Es raro que no lo veas, ¿tenés certeza que el proceso de descarga finalizó correctamente?.
    Un truco para ver si tenés más de un skin, es ir, por ejemplo, a las páginas estáticas o a los bloques (en el backend), y editar alguna de ellas. En la solapa de diseño, vas a poder seleccionar un diseño específico para esa página o bloque, y vas a tener un dropdown con las opciones posibles. (Cada opción es un skin).
    Si sólo ves el default/default, es que efectivamente no hay nada más.

    Una vez que hayas configurado tu nuevo skin, acordate de borrar el cache de Magento desde System -> Cache managment.

    Saludos.

  3. Hola.

    Tengo una duda que me tiene atascado en mi trabajo. He comprado u. Theme y me vienes dos carpetas. App y skin. Bien, en desarrollador me indica que solo la tengo que subir al directorio principal d mi tienda y listo.

    Si la pego donde me indica se van remplazar los directorios existentes. Es esto correcto? O debo acceder a las sub carpetas y pegar solo al final del árbol app y skin?

    No se si me explico bien. Lo que no quiero es machacar nada que sea vital para la tienda.

    Si me pueden aguar estaría muy agradecido.

    Un saludo

  4. @José Lopez

    Si han armado el skin correctamente, con pisar esas carpetas no deberías tener problemas.
    Fijate que, por ejemplo, dentor de /app, no hay una subcarpeta llamada /app/design/frontend/default/default. En el caso de skin sería /skin/frontend/default/default.
    El primer defulat corresponde al paquete y el segundo al tema en si mismo.
    Dentro del paquete default podria exister tu skin (el que compraste). La única condición es qeu tenga otro nombre.
    He visto skins comprados que directamente vienen con otro nombre de paquete, por ejemplo: /skin/frontend/paquetenuevo/temanuevo.
    Saludos.