Magento

Guía de diseño para Magento (Designer's Guide to Magento)

Indice de Capítulos

1. Terminología de diseño en Magento (único capítulo traducido hasta el momento)
2. Working with Magento Themes
3. Building Your Theme
4. Intro to Layouts

1. 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 de descorazones 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 simples. La terminología cubierta en este capítulo incluye:

• Website y Store (website y tienda)
• Interface (interface)
• Themes (temas)
  • Layouts (distribución)
  • Templates (plantillas)
  • Skins (estilos)
• Blocks (bloques)
  • Structural Blocks (bloques estructurales)
  • Content Blocks (bloques de contenido)

Website y Store

Un website es una colección de tiendas que comparten los mismos clientes e información de pedido, así como también el carrito de compras. Es un término amplio que se puede adoptar para definir las necesidades únicas de comerciantes individuales. Algunos escenarios para definir los diferentes usos de “website” y “tienda” (store) son los siguientes:

Escenario 1

Una compañía llamada Dubloo Inc crea una presencia online con 3 tiendas separadas de ropa, cada una atendiendo a un mercado de diferente nivel de precios. Dubloo Inc quiere que sus tres tiendas compartan la información de clientes y pedidos. En este escenario, Dubloo Inc tendrá un website y tres tiendas. “Tienda” (Store) definiría el nivel de precio y “website” sería el paraguas de Dubloo Inc.

Escenario 2

Una compañía llamada My 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 uno con sus propios ítems seleccionados de acuerdo a la selección de idioma. Necesitan sincronizar la información de clientes y pedidos por sitio. En este escenario, “tienda” (store) definiría cada idioma bajo su respectivo website. “Website” definiría “My laptops” y “Cheap laptops” (baratas).

Escenario 3

Una compañía llamada Bongo’s Instruments quiere crear una presencia online. Sin otras ramas de tiendas, Bongo’s Instruments es la “tienda” (store) tanto como el “website”.

Interface

Interface es una colección de temas que determinan el aspecto visual de las funcionalidades del frontend de tu tienda. Una interface se puede asignar tanto al nivel de “website” O “store” como también de “website” Y “store” en el Panel de Administración. (En inglés por el momento: Learn how to assign an interface to the website/store)

Si asignas una interface en el nivel de website, todas tus tiendas la heredarán. Pero después puedes asignar una interface en el nivel tienda, sobrescribiendo la del website. Digamos que operas cuatro tiendas diferentes bajo un website llamado “John’s Panacea”. 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.

1. Declaración a nivel de “Website”

Si quieres crear un look and feel unificado para tus 4 tiendas, asignarás una interface en el nivel de website, en cuyo caso las 4 tiendas la heredarán.

1. Declaración a nivel “Store”

Si quieres incorporar un look and feel para CADA tienda, puedes asignar una interface 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 (layout), plantillas (templates) y/o estilo (skin) que crean la experiencia visual de tu tienda. Magento está construido con la capacidad de cargar múltiples temas al mismo tiempo, aunque distingue temas en dos grandes tipos:

• Tema default

Cada interface viene con un tema llamado “default” que es el tema principal de una interface. Cuando asignas una interface a una tienda, la aplicación automáticamente busca este tema “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-default 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-default

Un tema no-default puede contener tantos o tan pocos archivos del tema como necesites. Este tipo de tema está pensado para crear diseños de temporada (estacionarios) a una tienda sin tener que crear un set entero de un tema. Creando unas pocas imágenes y actualizando algún CSS, puedes hacer que tu tienda deje de ser rutinaria para convertirse en una tienda adornada para la temporada de Navidad.

Un tema consiste en cualquiera o todo lo siguiente:

• Layout (ubicada 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 (ubicada 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 (ubicada en skin/frontend/your_interface/your_theme/)

Son archivos de bloques específicos, Javascript, CSS e imágenes 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 estructurales

Son bloques creados con el solo propósito de asignar una estructura visual a una página de una tienda como el encabezado, columna izquierda, columna principal, pie (Diagrama 1).

• Bloques de contenido

Son bloques que producen el contenido real dentro de cada bloque estructural. Son representaciones de cada característica de funcionalidad en una página y emplean archivos de templates para generar (X)HTML a ser insertados en sus bloques estructurales padres. Lista de categorías, mini carrito, etiquetas de productos... son en sí mismas bloques de contenido (Diagrama 2). En vez de incluir template tras template como en cualquier aplicación típica de eCommerce, Magento reúne y ordena el contenido de las páginas a través de bloques.

— asfaltagmail 2008/03/01 06:42