Guia de Diseño para Magento

Last modified by campsjos on Fri, March 2, 2012 03:12
Source|Old Revisions  |  Back To Group

Magento - Wiki - Guia de Diseño para Magento

Trabajando con temas de Magento

En este capitulo entraremos en detalles sobre cómo Magento manipula los temas y te enseñaremos cómo crear y gestionar el tuyo. Recuerda siempre usar la tabla de contenidos si deseas saltarte a algún punto específico.

Temas diferentes entre sí

El término “tema” probablemente te suene familiar. Ya sea como audiencia, como creador, o ambos, has experimentado el mar de aplicaciones disponibles por medio de sus temas. Un tema generalmente tiene dos tipos de usuario:

1. El público: aquellos que experimentan desde el punto de vista de la estética y usabilidad, navegando por medio de la tienda.

2. El creador (administrador): la persona que trabaja mediante una capa adicional del tema y forma parte de la construcción del mismo.

Para el primer tipo de usuario, la experiencia en una tienda está definida por la habilidad de la aplicación para cumplir con sus demandas tácticas y emocionales. Para el segundo, quien debe tomar el rol de creador, la experiencia en una tienda es la eficiencia con la que puede completar un conjunto de tareas de desarrollo.

Reconocemos que la rentabilidad de una tienda está determinada por la experiencia acumulada de ambos tipos de usuarios, por lo tanto, la experiencia de usuario no puede darse el lujo de ser pasada por alto.

Contamos con que como diseñador o diseñadora, ya tienes cubierta de la mejor manera el trabajo gráfico de tu tienda, por tanto, imaginamos que podríamos ayudarte en el proceso construyendo un gestor de temas impresionante para maximizar la eficiencia de tu flujo de trabajo y llevar tu creatividad al siguiente nivel. Aquí tienes algunas prestaciones que te dejaran babeando:

1. Máximo poder de personalización

Con magento puedes mejorar el aspecto de tu tienda en el nivel de categorías y en el nivel de productos, brindándote un mejor poder de marketing y promoción, así como una tienda con un diseño único. ¿Alguna vez imaginaste poder presentar cada producto en su propia página de información personalizada? Magento te da el poder de hacer eso y más, proporcionandote una rápida forma de personalizar la presentación por producto y la presentación por categorías

2. Temas múltiples

Magento le da la posibilidad de cargar múltiples temas a su tienda, permitiendo cambiar entre el diseño normal y aquellos que sólo usa en eventos o temporadas específicas. Todo esto por mediante unos pocos clics.

3. Flujo de trabajo ininterrumpido

Con la completa programación orientada a objetos de Magento, todos los modulos pueden ser usados en los archivos de un tema por medio de “etiquetas de temas”. Y como Magento viene lleno de prestaciones, nunca tendrás que depender de un programador para finalizar tareas tán simples para ti. Magento tambien se nutre de de una extenza red de conocimientos alimentada por los miembros de la comunidad (incluyendo al Equipo Oficial de Magento), asi que no tendrás que pensarlo dos veces si necesitas orientacion a lo largo del camino.

4. Minimiza el tiempo de depuración

Todo diseñador puede recordar aquellas preciosas horas y minutos que gasta buscando etiquetas sin cerrar encontradas por su validador de código. El validador puede decirte qué esta mañ, pero nunca te dirá dónde está pasando. El backend modular de Magento trae consigo un sistema de plantillas modular que minimiza la cantidad de código (X)HTML que necesitas manejar. Menos desorden significa menos alboroto y más integridad para cosas importantes en la vida.

Sin embargo, realmente la mejor parte de lo Magento ofrece, es el hecho de ser una aplicación que crece en su propia flexibilidad, dejándote sin nada de qué preocuparse, salvo de elaborar tu siguiente grandioso diseño. Recuerda que “el cielo es el límite para esta aplicación” y esperamos que te diviertas aplicando esta frase a tu tienda.

¿Cómo crear un Tema?

Primero, vamos a abrir algunos directorios. Abre los siguientes directorios del root de Magento y échale una mirada:

  • Directorio 1: app/design/frontend/default/default/ — Este directorio contiene el material de layout(diagramación), traducción (locale) y plantillas.
  • Directorio 2: skin/frontend/default/default/ — Este directorio contiene las imagenes, archivos CSS y bloques específicos en Javascript.

Cuando se trabaja con temas, estos dos directorios siempre serán tu punto de partida.

Como debes haber notado, hemos dividido los archivos de temas en dos partes: separando los archivos que deben ser accesibles vía web(como Imágenes y archivos Javascript) de aquellos que pueden estar ocultos. De esta forma, Magento te ofrece medidas de alta seguridad en cada parte de tu tienda.

Bien, sigamos y examinemos los dos directorios. A primera vista notarás el uso de los nombres de directorio “default/default” en ambos, directorio 1 y 2, así:

  • Directorio 1: app/design/frontend/default/default/
  • Directorio 2: skin/frontend/default/default/

En ambos casos, * indica el nombre de la interfaz y * indica el nombre del tema. Así que si estuvieses trabajando en un tema llamado “mi_tema” dentro de una interfaz llamada “mi_interfaz”, te encontrarías trabajando dentro del directorio “app/design/frontend/mi_interfaz/mi_tema/”

Puedes guardar la cantidad de temas que desees dentro de tu directorio de interfaz, pero al momento de cargarlos al sistema, tu tienda solo puede manejar el tema llamado “default” y un tema adicional de tu elección (Nota: la capacidad de cargar un número ilimitado de temas estará disponible en las próximas versiones). Entonces puedes trabajar con dos temas, así que puedes mantener el tema predeterminado(default) para tu tienda durante todo el año y usar el tema adicional para alguna temporada o evento específico, la llegada de navidad o fiestas patrias serían razones muy convincentes para cambiar el tema de tu tienda ( Para aprender sobre cómo trabajan los temas múltiples y como sacarle provecho, lee “Saludemos a los temas múltiples” )

Creando un nuevo tema predeterminado

Diagrama 1

imagen

Para crear un nuevo tema predeterminado(default), primero debes copiar uno desde donde comenzarás el tuyo. Crea un duplicado del directorio app/design/frontend/default/default/ y dale un nuevo nombre (recuerda que los nombres el nombres de interfaz y tema deben ser alfanuméricos, comenzar con una letra del abecedario [a-z] y no puede contener espacios. Por ejemplo: “Mi tema nuevo” y “02123_mi_tema” están mal. “Mi_tema_nuevo” esta bien ya que no contiene espacios ni comienza con un número). La aplicación reconocerá tu tema por este nombre de directorio,

Ahora haz lo mismo con el directorio skin/frontend/default/default. Y ya está! Acabas de crear exitosamente un nuevo tema. Para aprender sobre cómo asignar este tema a tu tienda, lee “Asignando un nuevo tema”, más abajo.

correctamente.

Asignando una interfaz y tema a la tienda

Ahora que ya haz creado tu propio tema, sea predeterminado (default) o no predeterminado (non-default), necesitarás asignarlo a tu website/tienda para que se realicen los cambios. Navega a tu panel de administración de Magento (por ejm: www.midominio.com/admin), luego a la pestaña de configuración de diseño (Sistema → Configuración → Pestaña de diseño) o (System → Configuration → Design tab) en la versión en inglés.

Diagrama 2 image

En la esquina superior de la columna de la izquierda del Diagrama 2, notarás una caja llamada “Nivel de configuración actual” o “Current Configuration Scope”. Tienes dos opciones:

  • Para gestionar el diseño en el nivel Website, selecciona el nombre de tu website del combo, luego aplica los cambios que siguen.
  • Para gestionar el diseño en el nivel Tienda, selecciona el nombre de tu Vista de Tienda del combo, luego aplica los cambios que siguen.

Paso 1

De la pestaña de diseño, in “Nombre de paquete actual” o “Current package name”, escribe el nombre de la “interfaz” en la que reside tu nuevo tema. Si dejas esta caja de texto vacía, Magento automáticamente cargará la interfaz llamada “default”

Paso 2

En Default (debajo de Cabeceras de Tema o Themes heading), ingresa el nombre del nuevo “tema” que quisieras cargar en tu website/tienda. Si dejas esta caja de texto vacía, Magento automáticamente cargará solo el tema llamado “default” (Recuerda que no importa cómo configures la pestaña de diseño, Magento automáticamente cargará el tema llamado “default”, eso quiere decir que si asignas un tema en el administrador, será cargado en la cima de la jerarquía, pero siempre cargará junto al tema default. Sin embargo, esto cambiará en las próximas versiones del sistema para brindarte un control total sobre qué temas son cargados en tu tienda). En caso de que elijas cargar el tema por separado en función del tipo de archivo(layout, tema, skin o archivos de traducción), escribe el nombre del tema del cual se obtendrán aquellos tipos de archivo.

Paso 3

Cuando todo esté listo, haz clic en el botón “Guardar config” o “Save config” y recarga tu tienda en el navegador – Vola! Ahora verás tu tema reflejado en el frontend.

Ahora que sabemos cómo crear y gestionar temas, pasemos a conocer cómo puedes manipular esos temas con Magento.

Saludemos a los temas múltiples!

Nota: la capacidad para temas ilimitados estará disponible en los próximos versiones. Aunque al momento de escribir esta guía sólo se podían cargar dos temas, en futuras versiones se mantendrá el mismo, así que puedes sacarle provecho a esta parte de la documentación.

Las temporadas que rondan los días de fiesta son de lejos las que ofrecen la más amplia oportunidad de venta para una tienda de comercio electrónico (eCommerce). Los clientes hacen cola para comprar un regalo de Navidad para su familia y amigos, y las madres hacen cola para comprar trajes de Halloween para la noche de “truco o trato” de sus hijos. Con el fin de adaptarse a los compradores de temporada, tu tienda debe reflejar fielmente la ocasión y así inspirarles ganas de explorar tu tienda. Una tienda como el Diagrama 3 simplemente no causa gracia durante la Navidad - Lo que una tienda necesita para esta fiesta es un poco de rojo, nieve y al infaltable Santa Claus, tal como la tienda del Diagrama 4.

Diagrama 3

imagen

Diagrama 4

imagen

Con Magento hemos creado la capacidad de que una tienda manipule múltiples temas de tu elección, justo para esos momentos en los que un arreglo extra es muy necesario. Siempre preservarás el diseño predeterminado de tu tienda (el que usas para el resto del año), pero cargando otros temas podrás mejorarlo a uno navideño.

Viendo de cerca ambas capturas presentadas arriba, notarás similitudes en el diseño subyacente. La fachada a pasado a Navideña en el Diagrama 4, pero debajo de ella todavía puedes ver la estructura predeterminada que se usa fuera de temporada. Las únicas diferencias reales entre ambos diseños de tienda son sólo un poco de Estilos en CSS, imágenes navideñas y cambios en el texto de los archivos de tema. Dado que los cambios son, en realidad, pequeños, no hay necesidad de un tema completamente nuevo. Lo único que necesitas es reemplazar unos pocos archivos para lograr ese toque de Diciembre en tu tienda. La funcionalidad de temas múltiples de Magento fue creada precisamente para esa necesidad, poniendo en tus manos el poder para activar o desactivar los temas de temporada, preservando tu tema predeterminado.

Jerarquía de temas

Magento maneja la carga de varios temas asignando lo que se llama jerarquía de temas. De esta forma los archivos de un tema que se encuentra en la cima de la jerarquía se mantendrán y reemplazarán a los archivos de temas que se encuentren debajo. Por ello es que en el tema navideño la distribución seguía siendo la del tema fuera de temporada ya que en la temporada navideña no hemos creado un archivo que lo reemplace.

La jerarquía es determinada por ti en la pestaña de Gestión de Diseño y en las próximas versiones tendrás capacidad de manejarla a tu antojo completamente. Recuerda que por ahora el tema predeterminado o default sigue cargándose siempre al principio (en la base inferior de toda la jerarquía) y sobre él se carga el segundo tema asignado en el Administrador (colocándolo en la cima de la jerarquía).

Cuando asignas múltiples temas a tu tienda, estás tomando ventaja del hecho que, mientras tu objetivo al construir un tema es crear la más usable y visualmente placentera interfaz gráfica, el objetivo de Magento es asegurarse que la aplicación es capaz de localizar y cargar todos los archivos que el tema requiere para mantener corriendo a la aplicación sin errores.

Por ejemplo, si tu página de listado de categorías llama a una plantilla llamada “view.phtml” (en cuyo caso esta plantilla se convierte en un archivo requerido), pero la aplicación es incapaz de encontrar el archivo en el tema de mayor jerarquía, lo buscará en el tema que le sigue en la jerarquía. Si esto falla, la aplicación seguirá buscando en jerarquías cada vez más inferiores hasta que pueda localizar el archivo llamado “view.phtml” y cargarlo dentro de la tienda, dando por finalizada la búsqueda. Este método de construir un diseño es llamado “recurso de emergencia” (más conocido por su nombre técnico “fallback”) porque la aplicación, al no encontrar el recurso necesario, da una mirada al siguiente posible para cargarlo en la tienda. (Nota: al momento de escribir esta guía, el tema con mayor jerarquía es el tema que asignes por el administrador y el de menor jerarquía es el tema default que Magento automáticamente carga en la tienda. En próximas versiones, Magento te brindará la capacidad de tener un control total sobre la jerarquía de tus temas)

Digamos que tienes 3 temas asignados a tu tienda y cada uno de esos temas contienen los siguientes archivos:

Tabla 1 imagen

También vamos a asumir que los tres temas han sido asignados en esta jerarquía:

Tabla 2 imagen

Si vemos de cerca, notaremos que hay unos pocos archivos redundantes como templates/templates/3-col-layout.phtml y css/base.css en la Tabla 1. Ahora vamos a organizar la tabla para que los archivos redundantes queden ordenados en paralelo uno con otro.

Tabla 3 imagen

Estarás pensando “Ok, perfecto. ¿Pero esto qué significa?”. Bueno, déjanos recordarte que los archivos en la Tabla 3 son cómo “tu” ves los archivos en cada folder y no es cómo Magento los ve.

Entonces observemos cómo Magento ve la misma estructura de archivos en la Tabla 4

Tabla 4 imagen

Habrás notado cómo Magento ignora la versión del archivo redundante de baja jerarquía y reconoce sólo la versión de alta jerarquía. Esto es porque ya ha encontrado el archivo requerido y no necesita buscarlo más abajo, por tanto termina la búsqueda de ese archivo mientras continua buscando los demás que no ha encontrado aún.




 

Magento 2 GitHub Repository

Magento Job Board - Some sort of tag line goes here

Latest Posts| View all Jobs