Guia de Diseño para Magento

Last modified by Laren on Tue, September 30, 2008 04:08
Source|Old Revisions  |  Back To Group

This is an old revision of the document!


Magento - Wiki - Guia de Diseño para Magento

Terminología de diseño en Magento

Para comprender la documentación, es crucial que comprendas bien los términos usados para describir aspectos del sistema Magento. Los términos introducidos en este capítulo seguramente son nuevos para ti, 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. La terminología cubierta en este capítulo incluye:

  • Website y Tienda
  • Interfaz
  • Temas
    • Layouts (distribución)
    • Plantillas
    • Skins (estilos)
  • Bloques
    • Bloques de estructura
    • Bloques de contenido

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á dos “Tiendas”: “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 (X)HTML 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 (X)HTML.

Bloques

Diagrama 1. Bloques estructurales (en azul) Diagrama 2. Bloques de contenido (en 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 (X)HTML 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.




 

Magento 2 GitHub Repository

Magento Job Board - Some sort of tag line goes here

Latest Posts| View all Jobs