Guia de Diseño para Magento

Last modified by César Gómez on Sat, January 24, 2009 19:57

Source|Old Revisions | Back To Group

TABLA DE CONTENIDOS
• Introducción Terminología de diseño en Magento
• Terminologia de diseño en Magento
Para comprender la documentación, es crucial que comprendas bien los
• Website y Tienda
términos usados para describir aspectos del sistema Magento. Los
• Interfaz
• Temas términos introducidos en este capítulo seguramente son nuevos para ti,

• Bloques
• Trabajando con temas de Magento
• Construyendo tu propio tema
• Introducción a los Layouts
así que tómate tu tiempo y lee minuciosamente. Pero lo más importante,
no te preocupes si no puede comprender a fondo el concepto de todos
estos nuevos términos. Este capítulo sirve sólo para presentártelos
todos juntos de una vez y los siguientes profundizarán y expandirán

esas definiciones. Puedes acceder a la terminología cubierta en este capítulo desde la tabla de contenidos, o haciendo

scroll.
Website y Tienda
Un Website es una colección de tiendas que comparten los mismos clientes y la información de las compras que hacen,

así como su carrito de compras. Por otro lado una Tienda es una colección de Vistas de Tienda. Estos términos son

muy generales y pueden adoptarse para definir las necesidades únicas de cada comerciante.

Algunos escenarios para definir los diferentes usos de un website, tienda y vistas de tienda son los siguientes:
Escenario 1
Supongamos que una compañía llamada Dubloo SA. comienza a tener presencia online con 3 tiendas de ropa

separadas, cada una atendiendo a un mercado de diferente nivel de precios. Dubloo SA. quiere que sus tres tiendas

compartan la información de clientes y pedidos.

- Entiéndase Store como Tienda y Store View como Vista de Tienda

Solución: En este escenario, Dubloo SA. tendrá un Website y tres tiendas. “Tienda” (Store) definiría el nivel de precio y

“Website” sería el paraguas de Dubloo SA.

Escenario 2
Ahora una compañía llamada Mis Laptops quiere abrir dos Websites separados. Ambos venden laptops pero a

diferentes precios. También quieren ofrecer en cada sitio la opción de idioma: inglés y español. Cada producto será
mostrado en el idioma que los visitantes hayan seleccionado. Necesitarán sincronizar la información de clientes y

pedidos por sitio.

Solución: En este escenario, la compañía Mis Laptops tendría dos “Websites”: “Mis Laptops” y “Laptops Baratas”. Cada

Website, tendrá una tienda llamada del mismo nombre (una donde se venderan laptops de costo medio y otras donde

se venderán solo las de bajo costo). Cada tienda a su vez tendrá dos “Vistas de Tienda”: “Tienda en Ingles” y “Tienda

en Español”.
Escenario 3
Una compañía llamada Instrumentos Bongo quiere tener presencia online. Sin otras ramas de tiendas internas.

Solución: Instrumentos Bongo es la “tienda” (Store) y también el “Website”.

Interfaz
Una interfaz es una colección de temas que determinan el aspecto visual y funcionalidades del frontend de tu tienda.

Una interfaz puede ser asignada tanto en el nivel de Website y/o en el nivel de Vista de Tienda por medio del panel de

administración. (En inglés por el momento: Learn how to assign an interface to the website/store)

Si asignas una interfaz en el nivel de Website, todas tus tiendas la heredarán. Pero después puedes asignar una

interfaz en el nivel tienda, sobrescribiendo la del Website.

Digamos que operas cuatro tiendas diferentes bajo un Website llamado “Remedios John”. Estudiando los efectos de

cada método como se muestra abajo, podrás determinar fácilmente el método a emplear para las necesidades de

diseño de tu negocio.
Nivel de "Website"

Si quieres crear un look and feel unificado para tus 4 tiendas, asignarás una interfaz en el nivel de Website, en cuyo

caso las 4 tiendas la heredarán.

Nivel "Tienda"(Store)
Si quieres incorporar un look and feel para CADA tienda, puedes asignar una interfaz por tienda, en cuyo caso las 4

tiendas tendrán cada una un único look and feel.

Temas
Un tema es cualquier combinación de archivos de distribución (Layouts), plantillas (Templates) y/o estilos (Skins) que

crean la experiencia visual de tu tienda. Magento está construido con la capacidad de cargar múltiples temas al mismo

tiempo, aunque los distingue en dos grandes tipos:

Tema predeterminado (Default Theme)
Cada interfaz viene con un tema predeterminado (por defecto) llamado “default” el cual es el tema principal de una

interfaz. Cuando asignas una interfaz a una tienda, la aplicación automáticamente busca el tema con el nombre

“default” y lo carga en el front-end. Para personalizar el diseño de tu tienda, puedes modificar este tema o crear un

tema no predeterminado (Non-default Theme) adicional y cargarlo junto con el default. El tema “default” debe contener

todos los “layouts” requeridos, “templates” y “skins” para funcionar sin errores y, por lo tanto, es el tema más bajo en la

jerarquía de temas.
Tema no predeterminado (Non-default Theme)
Un tema no predeterminado o non-default puede contener tantos o tan pocos archivos como necesites. Este tipo de

tema está pensado para darle un diseño de temporada a una tienda sin tener que recrear todos los archivos por

completo. Creando unas pocas imágenes y actualizando algún archivo de estilo en CSS, puedes hacer que tu tienda

deje verse como siempre, para convertirse, por ejemplo, en una tienda adornada para la temporada de Navidad.

Un tema consiste en cualquiera o todo lo siguiente:

Layouts (estructuras):
Ubicado en “app/design/frontend/your_interface/your_theme/layout/”. Estos son archivos XML que definen la

estructura de bloques para diferentes páginas así como controlan la información META y la codificación de páginas.

Para ver en profundidad los “layouts”, lee Intro to Layouts)

Templates (plantillas):
Ubicados en “app/design/frontend/your_interface/your_theme/template/”. Son archivos PHTML que contienen

marcas XHTML y cualquier código PHP necesario para crear la lógica de la presentación visual.
Skins: (máscaras)
Ubicados en “skin/frontend/your_interface/your_theme/”. Son imágenes, estilos en CSS y archivos de Javascript

para bloques específicos que complementan tus XHTML.

Bloques
Diagrama 2. Bloques de contenido (en
Diagrama 1. Bloques estructurales (en azul)
naranja)
Los bloques son la forma en que Magento distingue la colección de funcionalidades en el sistema y crea una forma

modular para manejarla desde ambos puntos de vista: el visual y el funcional. Hay dos tipos de bloques y funcionan

juntos para crear la salida visual.

Bloques de estructura
Son bloques creados con el único propósito de asignar una estructura visual a una página de una tienda. Por ejemplo,

definir que el bloque de encabezado se ubicará en la parte superior del Website, definir una columna izquierda para el

listado de categorìas, una columna principal para mostrar los productos y un pie de pagina al final inferior del Website

(Diagrama 1).
Bloques de contenido
Son bloques que producen el contenido real dentro de cada bloque estructural. Son representaciones de cada elemento

que funciona en una página, es decir, representaciones del buscador, el mini carrito de compra, el listado de categorìas,

las etiquetas de productos, etc (Diagrama 2). Emplean archivos de templates para generar XHTML a ser insertados en

sus bloques de estructura padres.

En vez de incluir template tras template como en cualquier aplicación típica de comercio electrónico (eCommerce),

Magento reúne y ordena el contenido de las páginas a través de bloques.