() translation by (you can also view the original English article)
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 que sea nuestra.
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: Plantilla
- Parte 4: Desarrollando la plantilla
- Parte 5: Desarrollando la página de información del producto
Un resumen rápido
En las últimas partes, aprendimos cómo hacer que tu tienda Magento se instale y esté lista para su implementación, lo que incluye cómo configurar tus productos, categorías de productos, impuestos, envíos, pasarelas de pago y mucho más.
También echamos un vistazo a los conceptos básicos de las plantillas 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 desarrollando 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, la estructura que se usa en cada vista del sitio. También explicaré el principio general detrás del proceso para que podamos avanzar a cada vista individual en partes futuras.
Los archivos de origen, tanto el extremo frontal como el final, están incluidos, pero intenta 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. Así que, 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. Por lo tanto, mi consejo es, espera 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ú simple que le permite al usuario acceder a su cuenta, la lista de deseos y al carrito, y también le permite realizar el pago o cerrar sesión.
Debajo de eso, tenemos una barra de herramientas que contiene una navegación con 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 del cuadro de búsqueda que está en la derecha.
El área de contenido está actualmente vacía ya que el contenido variará según la vista que Magento esté cargando. Por lo tanto, mantendremos el espacio vacío por ahora y lo manejaremos más adelante cuando construyamos cada página individualmente.
El pie de página es bastante genérico con un enlace para informar sobre errores e información de derechos de autor.
Paso 1 - El HTML
Primero veremos el HTML para la estructura del tema. Supongo que eres bastante fluido en HTML y CSS, así que me saltaré a las partes más importantes.
1 |
|
2 |
<!-- Lumos! :) -->
|
3 |
<!DOCTYPE html>
|
4 |
<html lang="en-GB"> |
5 |
<head>
|
6 |
<title>Cirrus - Magento Theme</title> |
7 |
<link rel="stylesheet" href="css/cirrus.css" /> |
8 |
</head>
|
9 |
|
10 |
<body>
|
11 |
<div id="wrapper" class="border"> |
12 |
|
13 |
<div id="header"> |
14 |
<div id="logo"><img src="images/logo.gif" /></div> |
15 |
<div id="hud"> |
16 |
<h3>Welcome, Sid</h3> |
17 |
<ul class="links"> |
18 |
<li><a href="#" title="My Account">My Account</a></li> |
19 |
<li ><a href="#" title="My Wish list">My Wish list</a></li> |
20 |
<li ><a href="#" title="My Cart">My Cart</a></li> |
21 |
<li ><a href="#" title="Checkout">Checkout</a></li> |
22 |
<li><a href="#" title="Log Out" >Log Out</a></li> |
23 |
</ul>
|
24 |
</div>
|
25 |
</div>
|
26 |
|
27 |
<div id="utilities"> |
28 |
<div id="breadcrumbs">Home » State of Fear</div> |
29 |
<div id="header-search"><input type="text" class="border" value="Search our store" /></div> |
30 |
</div>
|
31 |
|
32 |
<div id="content" class="product"> |
33 |
<h1>Content here</h1> |
34 |
</div>
|
35 |
|
36 |
<div id="footer" class="border"> |
37 |
Help Us to Keep Magento Healthy - Report All Bugs (ver. 1.4.0.1) |
38 |
© 2008 Magento Demo Store. All Rights Reserved. |
39 |
</div>
|
40 |
|
41 |
</div>
|
42 |
</body>
|
43 |
</html>
|
En primer lugar, ten en cuenta que he envuelto todo en un div con la clase Wrapper para que sea más fácil administrar las cosas. También ten en cuenta que el encabezado, el contenido y la sección del pie de página obtienen sus bloques individuales.
El cuadro 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 profundicemos en Magento, los haremos trabajar.
Paso 2 - El CSS
1 |
|
2 |
* { |
3 |
margin: 0; |
4 |
padding: 0; |
5 |
border: none; |
6 |
outline: none; |
7 |
color: #333; |
8 |
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif; |
9 |
font-size: 14px; |
10 |
list-style: none; |
11 |
line-height: 1.3em; |
12 |
}
|
13 |
|
14 |
a { |
15 |
color : #7db000; |
16 |
}
|
17 |
|
18 |
h1, h2, h3, h4 { |
19 |
font-weight: normal; |
20 |
}
|
21 |
|
22 |
h1 { |
23 |
font-size: 32px; |
24 |
margin-bottom: 10px; |
25 |
}
|
26 |
|
27 |
h2 { |
28 |
font-size: 24px; |
29 |
margin: 10px 0 12px 0; |
30 |
}
|
31 |
|
32 |
h3 { |
33 |
font-size: 20px; |
34 |
margin-bottom: 5px; |
35 |
}
|
36 |
|
37 |
h4 { |
38 |
font-size: 20px; |
39 |
}
|
40 |
|
41 |
.border { |
42 |
border: 1px solid #666; |
43 |
}
|
44 |
|
45 |
/* Base Elements */
|
46 |
|
47 |
#wrapper { |
48 |
width: 920px; |
49 |
margin: 10px auto; |
50 |
padding: 20px; |
51 |
}
|
52 |
|
53 |
#header { |
54 |
margin: 0 0 20px 0; |
55 |
overflow: auto; |
56 |
}
|
57 |
|
58 |
#content { |
59 |
margin: 20px 0; |
60 |
overflow: auto; |
61 |
}
|
62 |
|
63 |
#footer { |
64 |
padding: 10px; |
65 |
border: 1px solid #E1E1E1; |
66 |
background: #F3F3F3; |
67 |
text-align: center; |
68 |
}
|
69 |
|
70 |
/* Header content */
|
71 |
|
72 |
#logo { |
73 |
float: left; |
74 |
}
|
75 |
|
76 |
#hud { |
77 |
float: right; |
78 |
width: 320px; |
79 |
height: 50px; |
80 |
padding: 10px; |
81 |
border: 1px solid #E1E1E1; |
82 |
background: #F3F3F3; |
83 |
}
|
84 |
|
85 |
#hud li a { |
86 |
float: left; |
87 |
font-size: 12px; |
88 |
margin: 0 10px 0 0; |
89 |
}
|
90 |
|
91 |
#utilities { |
92 |
clear: both; |
93 |
margin: 20px 0; |
94 |
overflow: auto; |
95 |
padding: 7px 10px; |
96 |
border: 1px solid #E1E1E1; |
97 |
background: #F3F3F3; |
98 |
}
|
99 |
|
100 |
#breadcrumbs { |
101 |
float: left; |
102 |
}
|
103 |
|
104 |
#header-search { |
105 |
float: right; |
106 |
}
|
Nada de lujos aquí. CSS muy básico para colocar los elementos en posición y de 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 puedes editar el archivo XML y terminar con él sin preocuparte por las dependencias.
Cada view/screen/module obtiene su propio archivo XML junto con un archivo maestro para definir el diseño general del sitio. Ese archivo maestro es el archivo page.xml que vamos a crear ahora.
El archivo completo para hoy se ve así. Voy a explicar cada bit parte por parte a continuación.
1 |
|
2 |
<?xml version="1.0"?>
|
3 |
<layout version="0.1.0"> |
4 |
<default translate="label" module="page"> |
5 |
<label>All Pages</label> |
6 |
<block type="page/html" name="root" output="toHtml" template="page/1column.phtml"> |
7 |
<block type="page/html_head" name="head" as="head"> |
8 |
<action method="addCss"><stylesheet>css/cirrus.css</stylesheet></action> |
9 |
</block>
|
10 |
|
11 |
<block type="page/html_header" name="header" as="header"> |
12 |
<block type="page/template_links" name="top.links" as="topLinks"/> |
13 |
<block type="page/html_breadcrumbs" name="breadcrumbs" as="breadcrumbs"/> |
14 |
<block type="core/template" name="top.search" as="topSearch"/> |
15 |
</block>
|
16 |
|
17 |
<block type="core/text_list" name="content" as="content"/> |
18 |
|
19 |
<block type="page/html_footer" name="footer" as="footer" template="page/html/footer.phtml"/> |
20 |
</block>
|
21 |
</default>
|
22 |
</layout>
|
Ignora las declaraciones iniciales de XML y de la versión de diseño. No tienen ningún significado para nosotros ahora.
1 |
|
2 |
<block type="page/html" name="root" output="toHtml" template="page/1column.phtml"> |
Primero, creamos un bloque maestro para todos los datos. Considera esto como el equivalente del elemento DIV contenedor que usamos en nuestro HTML. A continuación, le indicamos que use page/1column.phtml como plantilla para nuestra página. No te preocupes, todavía no hemos creado el archivo. Lo haremos más adelante en este tutorial.
1 |
|
2 |
<block type="page/html_head" name="head" as="head"> |
3 |
<action method="addCss"><stylesheet>css/cirrus.css</stylesheet></action> |
4 |
</block>
|
A continuación, definimos los elementos que se incluirán en la sección de encabezado (head) de la página. Magento, de forma predeterminada, incluye una carga de archivos CSS y JS, pero hoy no necesitaremos ninguna de sus funciones. Así que, solo incluiremos nuestro archivo CSS.
1 |
|
2 |
<block type="page/html_header" name="header" as="header"> |
3 |
<block type="page/template_links" name="top.links" as="topLinks"/> |
4 |
<block type="page/html_breadcrumbs" name="breadcrumbs" as="breadcrumbs"/> |
5 |
<block type="core/template" name="top.search" as="topSearch"/> |
6 |
</block>
|
Estamos definiendo lo que entra en el encabezado de nuestro sitio. Queremos el menu/links en la parte superior, así como las migas de pan (breadcrumbs) y la búsqueda.
1 |
|
2 |
<block type="core/text_list" name="content" as="content"/> |
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.
1 |
|
2 |
<block type="page/html_footer" name="footer" as="footer" template="page/html/footer.phtml"/> |
Y finalmente, hemos incluido nuestro pie de página. También le decimos a Magento de dónde cargar su plantilla.
Probablemente te estés preguntando por qué especificamos una ruta de plantilla para algunos bloques y la omitimos para otros. Es un tema de nivel más alto, pero ¿notaste que cada bloque tiene un atributo type? Cuando su tipo coincide con uno de los predefinidos por Magento, no necesitas especificar una plantilla. Se carga automáticamente. Elegante, ¿no?
Y con esto, nuestro archivo base page.xml está completo.
Paso 4 - Creando nuestra plantilla de esqueleto
Bien, ahora que hemos especificado nuestro diseño, podemos pasar a la creación del archivo 1column.phtml que especificamos anteriormente en el XML.
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í:
1 |
|
2 |
<!-- Lumos! :) -->
|
3 |
<!DOCTYPE html>
|
4 |
<html lang="en-GB"> |
5 |
<head>
|
6 |
<?php echo $this->getChildHtml('head') ?> |
7 |
</head>
|
8 |
|
9 |
<body>
|
10 |
<div id="wrapper" class="border"> |
11 |
|
12 |
<?php echo $this->getChildHtml('header') ?> |
13 |
|
14 |
<div id="content" class="product"> |
15 |
<?php echo $this->getChildHtml('content') ?> |
16 |
</div>
|
17 |
|
18 |
<?php echo $this->getChildHtml('footer') ?> |
19 |
|
20 |
</div>
|
21 |
</body>
|
22 |
</html>
|
Este es prácticamente nuestro archivo HTML original, excepto que usamos el método getChildHtml 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 básicos por funcionalidad, crear los archivos de plantillas necesarios para cada funcionalidad y luego rellenar esos archivos.
Abordaremos cada uno en orden de apariencia.
Sección principal
getChildHtml('head') se asigna directamente a page/html/head.phtml. Nuestro archivo se ve así:
1 |
|
2 |
<title><?php echo $this->getTitle() ?></title> |
3 |
<link rel="icon" href="<?php echo $this->getSkinUrl('favicon.ico') ?>" type="image/x-icon" /> |
4 |
<link rel="shortcut icon" href="<?php echo $this->getSkinUrl('favicon.ico') ?>" type="image/x-icon" /> |
5 |
<?php echo $this->getCssJsHtml() ?> |
6 |
<?php echo $this->getChildHtml() ?> |
7 |
<?php echo $this->getIncludes() ?> |
Verás que permitimos que Magento cree los títulos dinámicamente. Aparte de eso, nota que se llama al método getCssJsHtml. Este método importa todos los archivos CSS y JS que especificamos en el archivo page.xml.
Encabezado de página
getChildHtml('header') se asigna directamente a page/html/header.phtml. Nuestro archivo se ve así:
1 |
|
2 |
<div id="header"> |
3 |
<div id="logo"><a href="<?php echo $this->getUrl('') ?>" title="<?php echo $this->getLogoAlt() ?>" class="logo"><img src="<?php echo $this->getLogoSrc() ?>" alt="<?php echo $this->getLogoAlt() ?>" /></a></div> |
4 |
<div id="hud"> |
5 |
<h3>Welcome</h3> |
6 |
<?php echo $this->getChildHtml('topLinks') ?> |
7 |
</div>
|
8 |
</div>
|
9 |
|
10 |
<div id="utilities"> |
11 |
<?php echo $this->getChildHtml('breadcrumbs') ?> |
12 |
<?php echo $this->getChildHtml('topSearch') ?> |
13 |
</div>
|
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.
Ten en cuenta que el nombre es puramente semántico. Como puedes ver, no está limitado al encabezado en su sentido técnico más puro y estricto. También puedes agregar otros elementos según sea necesario.
Pie de página o Footer
getChildHtml('footer') se asigna directamente a page/html/footer.phtml como se especifica en el archivo XML. Nuestro archivo se ve así:
1 |
|
2 |
<div id="footer" class="border"> |
3 |
<?php echo $this->__('Help Us to Keep Magento Healthy') ?> - <a href="https://www.magentocommerce.com/bug-tracking" |
4 |
onclick="this.target='_blank'"><strong><?php echo $this->__('Report All Bugs') ?></strong></a> |
5 |
<?php echo $this->__('(ver. %s)', Mage::getVersion()) ?> <?php echo $this->getCopyright() ?></address> |
6 |
</div>
|
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 allí.
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.
Enlaces superiores
getChildHtml('topLinks') se asigna directamente a page/html/template/links.phtml. Nuestro archivo se ve así:
1 |
|
2 |
<?php $_links = $this->getLinks(); ?> |
3 |
<?php if(count($_links)>0): ?> |
4 |
<ul class="links"<?php if($this->getName()): ?> id="<?php echo $this->getName() ?>"<?php endif;?>> |
5 |
<?php foreach($_links as $_link): ?> |
6 |
<li<?php if($_link->getIsFirst()||$_link->getIsLast()): ?> class="<?php if($_link->getIsFirst()): ?>first<?php endif; ?><?php if($_link->getIsLast()): ?> last<?php endif; ?>"<?php endif; ?> <?php echo $_link->getLiParams() ?>><?php echo $_link->getBeforeText() ?><a href="<?php echo $_link->getUrl() ?>" title="<?php echo $_link->getTitle() ?>" <?php echo $_link->getAParams() ?>><?php echo $_link->getLabel() ?></a> <?php echo $_link->getAfterText() ?></li> |
7 |
<?php endforeach; ?> |
8 |
</ul>
|
9 |
<?php endif; ?> |
Sé que parece un poco complicado, pero todo lo que hace es recorrer una serie de enlaces y luego los expulsa, mientras se agrega una clase especial si es el primer o último elemento de la lista. Si lo prefieres, puedes desechar todo esto, y simplemente codificar tu menú superior.
Breadcrumbs (Migas de pan)
getChildHtml('breadcrumbs') se asigna directamente a page/html/breadcrumbs.phtml. Nuestro archivo se ve así:
1 |
|
2 |
<?php if($crumbs && is_array($crumbs)): ?> |
3 |
<div id="breadcrumbs"> |
4 |
<?php foreach($crumbs as $_crumbName=>$_crumbInfo): ?> |
5 |
<?php if($_crumbInfo['link']): ?> |
6 |
<a href="<?php echo $_crumbInfo['link'] ?>" title="<?php echo $this->htmlEscape($_crumbInfo['title']) ?>"><?php echo $this->htmlEscape($_crumbInfo['label']) ?></a> |
7 |
<?php elseif($_crumbInfo['last']): ?> |
8 |
<strong><?php echo $this->htmlEscape($_crumbInfo['label']) ?></strong> |
9 |
<?php else: ?> |
10 |
<?php echo $this->htmlEscape($_crumbInfo['label']) ?> |
11 |
<?php endif; ?> |
12 |
<?php if(!$_crumbInfo['last']): ?> |
13 |
<span>» </span> |
14 |
<?php endif; ?> |
15 |
<?php endforeach; ?> |
16 |
</div>
|
17 |
<?php endif; ?> |
Al igual que antes, simplemente recorre las migas de pan para representar el texto. Los bits traviesos comprueban si la miga de pan 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') se asigna directamente a catalogsearch/form.mini.phtml. Nuestro archivo se ve así:
1 |
|
2 |
<div id="header-search"> |
3 |
<form id="search_mini_form" action="<?php echo $this->helper('catalogsearch')->getResultUrl() ?>" method="get"> |
4 |
<input id="search" type="text" name="<?php echo $this->helper('catalogsearch')->getQueryParamName() ?>" value="<?php echo $this->helper('catalogsearch')->getEscapedQueryText() ?>" class="input-text border" /> |
5 |
|
6 |
</form>
|
7 |
</div>
|
Magento hace todo el levantamiento de pesas aquí. Todo lo que necesitas hacer es llamar al método API adecuado para las URL y demás.
Si has notado que la cadena que se pasa al método getChildHtml se asigna directamente al atributo 'as' utilizado en el archivo page.xml, entonces felicidades, eres un lector astuto y obtienes una deliciosa cookie.
Lo que vamos a desarrollar en la siguiente parte
Ya que hemos construido un núcleo muy fuerte, ahora podemos continuar con el desarrollo 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. ¡Continúa en la siguiente lección!
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 comencemos si tienes alguna duda.
¿Preguntas? ¿Cosas bonitas que decir? ¿Críticas? Pulsa la sección de comentarios y déjame un comentario. ¡Feliz codificación!
