Magento es una plataforma de comercio electrónico increíblemente poderosa. En esta miniserie, aprenderemos cómo comenzar con la plataforma, conocer las terminologías, configurar una tienda y todos los aspectos relacionados de ella y, finalmente, aprender a personalizarla para hacerla nuestra propia..

En esta cuarta parte, sentaremos las bases de nuestro tema, que construiremos completamente desde cero. ¿Emocionado? Empecemos!

La serie completa

• Parte 1: Instalación y configuración
• Parte 2: Productos, impuestos, categorías, pasarelas de pago, etc..
• Parte 3: Theming
• Parte 4: Construyendo el tema
• Parte 5: Creación de la página de información del producto

Un resumen rápido

En las últimas partes, aprendimos cómo hacer que su tienda Magento se instale y esté lista para su implementación, lo que incluye cómo configurar sus productos, categorías de productos, impuestos, envíos, pasarelas de pago y muchos más..

También echamos un vistazo a los conceptos básicos de la temática de Magento. Aprendimos la idea general detrás de los temas de Magento, las diversas terminologías detrás de él y la estructura básica de un tema..

Objetivos para nuestro tema

Nuestro objetivo para crear este tema es bastante sencillo: comprender de manera práctica cómo crear un tema de Magento. Con eso en mente, voy a mantener el tema lo más simple posible..

• Todo menos las características esenciales desnudas despojadas
• No hay otras imágenes que no sean las imágenes del producto y el logotipo.
• Una sola columna para que sea visualmente simple.

¿Qué estamos construyendo hoy??

Dado que el proceso de codificación de Magento es razonablemente complicado para alguien que está acostumbrado a WordPress, lo vamos a tomar extremadamente lento. Hoy, construiremos solo la parte central de nuestro tema, el esqueleto que se usa en cada vista del sitio. También explicaré el principio general detrás del proceso para que podamos pasar a cada vista individual en partes futuras..

Los archivos de origen, tanto el extremo frontal como el final, están incluidos, pero intente no utilizarlos todavía. Definiremos solo las partes principales sin definir qué contenido se mostrará, cómo se mostrará y de dónde se extraerá el contenido. Entonces, si intentas usar esto ahora mismo, verás un montón de galimatías ya que Magento extrae todos los archivos ausentes de su tema predeterminado, arruinando completamente nuestra apariencia. Así que mi consejo es, espere un poco..

La plantilla basica

La plantilla básica se ve así. Tenemos un logotipo genérico en la parte superior, junto con un menú sencillo que le permite al usuario acceder a su cuenta, lista de deseos y carrito, así como permitirle realizar el pago o cerrar sesión..

Debajo de eso, tenemos una barra de herramientas que contiene una navegación de estilo de ruta de navegación para que el usuario conozca la jerarquía contextual del sitio. También permitimos que el usuario busque en nuestra tienda a través de la entrada de búsqueda a la derecha.

El área de contenido está actualmente vacía ya que su contenido variará según la vista que Magento esté cargando. Por lo tanto, vamos a mantenerlo vacío por ahora y lo manejaremos más adelante cuando construyamos cada página individual..

El pie de página es bastante genérico con un enlace para informar errores e información de derechos de autor..

Paso 1 - El HTML

Primero veremos el HTML para el esqueleto del tema. Supongo que usted es bastante fluido en HTML y CSS, así que me saltaré a las partes más importantes.

         
 
 
 
 
Bienvenido sid
 
 
Mi cuenta
 
Mi lista de deseos
 
Mi carrito
 
Revisa
 
Cerrar sesión
 
 
 
 
 
Inicio "Estado del miedo
 
 
 
 
Contenido aqui
 
 
 Ayúdenos a mantener saludable a Magento: informar sobre todos los errores (versión 1.4.0.1) © 2008 Magento Demo Store. Todos los derechos reservados. 
 
  

En primer lugar, tenga en cuenta que he envuelto todo en una envoltura div para que sea más fácil administrar las cosas. También tenga en cuenta que el encabezado, el contenido y la sección del pie de página obtienen sus bloques individuales.

La entrada de búsqueda es bastante inútil en este punto. Lo conectaremos correctamente durante la integración con Magento. Lo mismo con los distintos enlaces. Actualmente, los he puesto allí como marcadores de posición. Una vez que cavemos en Magento, los haremos trabajar.

Paso 2 - El CSS

 * margen: 0; relleno: 0; frontera: ninguna; esquema: ninguno; color: # 333; Familia tipográfica: "Lucida Sans Unicode", "Lucida Grande", sans-serif; tamaño de fuente: 14px; estilo de lista: ninguno; línea de altura: 1.3em;  a color: # 7db000;  h1, h2, h3, h4 font-weight: normal;  h1 font-size: 32px; margen inferior: 10px;  h2 font-size: 24px; margen: 10px 0 12px 0;  h3 font-size: 20px; margen inferior: 5px;  h4 font-size: 20px;  .border border: 1px solid # 666;  / * Elementos base * / #wrapper ancho: 920px; margen: 10px auto; relleno: 20px;  #header margen: 0 0 20px 0; desbordamiento: auto;  #content margen: 20px 0; desbordamiento: auto;  #footer padding: 10px; borde: 1px sólido # E1E1E1; fondo: # F3F3F3; text-align: center;  / * Contenido del encabezado * / #logo float: left;  #hud float: derecha; ancho: 320px; altura: 50px; relleno: 10px; borde: 1px sólido # E1E1E1; fondo: # F3F3F3;  #hud li a float: left; tamaño de fuente: 12px; margen: 0 10px 0 0;  #utilities clear: both; margen: 20px 0; desbordamiento: auto; relleno: 7px 10px; borde: 1px sólido # E1E1E1; fondo: # F3F3F3;  #breadcrumbs float: left;  # header-search float: right; 

Nada de lujos aquí. CSS muy básico para colocar los elementos en posición y estilo solo un poquito. Vamonos.

Paso 3 - Creando nuestro archivo page.xml

Esta parte es un poco complicada, así que quédate conmigo aquí. Magento usa archivos XML para manejar el diseño de una página y también para definir qué elementos están disponibles para ser renderizados. El objetivo es que, en lugar de mezclarse con el código arcano, solo puede editar el archivo XML y terminar con él sin preocuparse por las dependencias..

Cada vista / pantalla / módulo obtiene su propio archivo XML junto con un archivo maestro para definir el diseño general del sitio. Ese archivo maestro es el page.xml archivo que vamos a crear ahora.

El archivo completo para hoy se ve así. Te explico cada bit parte por parte abajo.

    Todas las páginas   css / cirrus.css           

Ignore las declaraciones iniciales de XML y de la versión de diseño. No tienen ningún significado para nosotros ahora.

Primero, creamos un bloque maestro para todos los datos. Considere esto como el equivalente del elemento DIV contenedor que usamos en nuestro HTML. A continuación, le indicamos que utilice page / 1column.phtml como la plantilla para nuestra página. No te preocupes, todavía no hemos creado el archivo. Lo haremos más adelante en este tutorial..

  css / cirrus.css 

A continuación, definimos los elementos a incluir en el cabeza sección de la página. Magento, de forma predeterminada, incluye una carga de archivos CSS y JS, pero hoy no necesitaremos ninguna de sus funciones. Entonces, solo incluiremos nuestro archivo CSS.

Estamos definiendo lo que entra en el encabezado de nuestro sitio. Queremos el menú / enlaces en la parte superior, así como las migas de pan y la búsqueda.

Necesitaremos la parte de contenido, por supuesto, por lo que incluiremos la parte de contenido. Aquí no definiremos nada sobre esta sección ya que Magento simplemente carga todo el contenido necesario en este bloque.

Y finalmente, hemos incluido nuestro pie de página. También le decimos a Magento dónde cargar su plantilla desde.

Probablemente se esté preguntando por qué especificamos una ruta de plantilla para algunos bloques y la omitimos para otros. Es un tema de nivel bastante superior, pero ¿notó que cada bloque tiene una tipo ¿atributo? Cuando su tipo coincide con uno de los predefinidos por Magento, no necesita especificar una plantilla. Se carga automáticamente. Ingenioso no?

Y con esto, nuestra base. page.xml el archivo esta completo.

Paso 4 - Creando nuestra plantilla de esqueleto

Ok, ahora que hemos especificado nuestro diseño podemos pasar a crear el 1column.phtml archivo que especificamos en el XML anterior.

Este archivo no es más que una plantilla de esqueleto que llama al encabezado, al área de contenido y al pie de página según sea necesario. Nuestro archivo se ve así:

     getChildHtml ('head')?>   
 getChildHtml ('header')?> 
 getChildHtml ('contenido')?> 
 getChildHtml ('footer')?> 
  

Este es nuestro archivo HTML original, excepto que usamos el getChildHtml Método para adquirir el contenido de cada bloque. La plantilla debe ser bastante independiente de la página, ya que es la página maestra desde la que se representa cada página..

Paso 5 - Creando las plantillas para nuestros bloques

Ahora viene la parte un poco difícil: cortar nuestros bloques HTML principales por funcionalidad, crear los archivos de plantillas necesarios para cada funcionalidad y luego rellenar esos archivos.

Abordaremos cada uno en orden de aparición.

Sección principal

getChildHtml ('head') mapas directamente a page / html / head.phtml. Nuestro archivo se ve así:

    getCssJsHtml ()?> getChildHtml ()?> getIncludes ()?>

Verás que permitimos que Magento cree los títulos dinámicamente. Aparte de eso, note el getCssJsHtml Método que se llama. Este método importa todos los archivos CSS y JS que especificamos en el page.xml expediente.

Encabezado de página

getChildHtml ('encabezado') mapas directamente a page / html / header.phtml. Nuestro archivo se ve así:

 
 
getUrl (")?>" title = "getLogoAlt ()?> ">
 
 
Bienvenido
 getChildHtml ('topLinks')?> 
 
 
 getChildHtml ('breadcrumbs')?> getChildHtml ('topSearch')?> 

Usamos la API de Magento para adquirir el logotipo primero. Luego, para modularizar aún más las cosas, obtenemos el HTML para las rutas de navegación, los enlaces y la función de búsqueda..

Tenga en cuenta que el nombre es puramente semántico. Como puede ver, no está limitado al encabezado en su sentido técnico más puro y estricto. También puede agregar otros elementos según sea necesario..

Pie de página

getChildHtml ('pie de página') mapas directamente a page / html / footer.phtml como se especifica en el archivo XML. Nuestro archivo se ve así:

 
 __ ('Ayúdenos a mantener a Magento saludable')?> - __ ('Informar de todos los errores')?> __ ('(ver.% s)', Mage :: getVersion ())?> getCopyright ()?> 

Con el pie de página, eres libre de incluir cualquier información que consideres adecuada. Acabo de incluir el contenido predeterminado, ya que no se me ocurrió nada inteligente que decir..

Con los elementos centrales terminados, podemos pasar a los bloques funcionales más pequeños especificados en la sección del encabezado ahora, es decir, las rutas de navegación, los enlaces y la función de búsqueda.

Top enlaces

getChildHtml ('topLinks') mapas directamente a page / html / template / links.phtml. Nuestro archivo se ve así:

 getLinks (); ?> 0):?> getName ()):?>>  getIsFirst () || $ _link-> getIsLast ()):?> getLiParams ()? >>getBeforeText ()?> getUrl ()?> "title ="getTitle ()?> " getAParams ()? >>getLabel ()?> getAfterText ()?>   

Sé que parece un poco complicado, pero todo lo que hace es recorrer una serie de enlaces y luego escupirlos, mientras se agrega una clase especial si es el primer o último elemento de la lista. Si lo prefiere, puede desechar todo esto y simplemente codificar su menú superior.

Migas de pan

getChildHtml ('breadcrumbs') mapas directamente a page / html / breadcrumbs.phtml. Nuestro archivo se ve así:

  
 $ _crumbInfo):?>  "title ="htmlEscape ($ _ crumbInfo ['title'])?> ">htmlEscape ($ _ crumbInfo ['label'])?>  htmlEscape ($ _ crumbInfo ['label'])?>  htmlEscape ($ _ crumbInfo ['label'])?>   "    
 

Al igual que antes, simplemente recorre las migajas para representar el texto. Los bits traviesos allí comprueban si la migaja es un enlace, para formatearlo como tal, y comprueban si es el elemento final para que no tenga que representar un separador. No hay nada más en este bloque..

Buscar

getChildHtml ('topSearch') mapas directamente a catalogsearch / form.mini.phtml. Nuestro archivo se ve así:

Magento hace todo el levantamiento de pesas aquí. Todo lo que necesita hacer es llamar al método API adecuado para las URL y demás.

Si has notado que la cadena pasa a la getChildHtml método se asigna directamente a la como atributo utilizado en el page.xml archivo, luego felicidades, eres un lector astuto y obtienes una deliciosa galleta!

Lo que vamos a construir en la siguiente parte

Ahora que hemos construido un núcleo muy fuerte, ahora podemos continuar con la construcción de las vistas individuales de la tienda. En la siguiente parte, vamos a construir una de las vistas principales de cualquier tienda, la vista del producto. Manténganse al tanto!

La última palabra

¡Y hemos terminado! Hoy, dimos el primer paso para crear nuestro tema personalizado de Magento, Cirrus. Esperemos que esto te haya sido útil y que te haya parecido interesante. Ya que este es un tema bastante nuevo para muchos lectores, estaré observando atentamente la sección de comentarios, así que acuda si tiene alguna duda..

Preguntas? Cosas bonitas que decir? Criticas? Pulsa la sección de comentarios y déjame un comentario. Feliz codificacion!