Comercio Electrónico y Magento

Temas

El siguiente paso en nuestro pequeño viaje por Magento son los temas. Aunque en un principio puede parecer más complejo que con otros sistemas, como Joomla! o WordPress, en un momento veremos como realmente no es tan complejo como parece.

Los temas, a veces también llamados plantillas, definen el aspecto de nuestro sitio, y nos permiten cambiar su aspecto sin necesidad de afectar a los datos que contiene. Esto nos ofrece una gran flexibilidad y la habilidad de cambiar la imagen gráfica de nuestro sitio dependiendo de nuestras necesidades.

Instalación de un tema en Magento

Básicamente tenemos dos formas de instalar un tema de Magento, vía Magento Connect (el sistema de instalación de extensiones de Magento) o, de manera más tradicional, copiándolas directamente en nuestra instalación de Magento.

Ambos métodos son igualmente sencillos, y normalmente la mayor dificultad residirá en seleccionar que plantilla queremos utilizar. Vamos a empezar viendo el método clásico de instalación de plantillas, es decir, copiar los ficheros directamente sobre nuestra instalación.

Instalación manual

Como hemos dicho, esta es la forma tradicional de instalar una plantilla, para poder algunas pruebas vamos a descargarnos una plantilla gratuita. Por ejemplo de esta página:

http://pelfusion.com/freebies/15-free-high-quality-magento-templates/

En este caso vamos a utilizar la plantilla “Free Magento Classic Theme”. Descargaremos el fichero f002.classic.zip y, al descomprimirlo tendremos la siguiente estructura:

graphic source -> aquí encontraremos los ficheros PSD del diseño, por si acaso necesitamos realizar alguna modificación al diseño.
installation -> con información sobre como instalar la plantilla.
template source 1.3.2 -> la plantilla para la versión 1.3.2 de Magento
template source 1.4.0.1 -> la plantilla para la versión 1.4.0.1 de Magento
template source 1.4.1.0 -> la plantilla para la versión 1.4.1.0 de Magento

Como podemos ver el tema viene bastante completo, con una amplia variedad de extras, así mismo es capaz de servir para diferentes versiones de Magento.

Aunque podemos pensar que una misma plantilla debería de servir para todas las versiones de Magento, esto no suele ser así.

Habitualmente las plantillas utilizan funciones bien sea para cargar datos de la base de datos, menús etc Es por eso que debemos de comprobar para que versión fue hecha cada determinada plantilla.

En nuestro caso vamos a utilizar la versión 1.4.1.0 del tema, que, aunque difiere un poco de nuestra versión de Magento, es bastante probable que funcione correctamente.

Abrimos la carpeta template source 1.4.1.0 y dentro podemos ver otras dos carpetas:

app -> aquí encontraremos los ficheros de layout (estructura de la web), locale (traducciones) y template (trocitos de la plantilla)
skin -> aquí encontraremos los ficheros css, js e imágenes necesarios para nuestra plantilla.

Copiaremos estas dos carpetas en nuestra instalación de Magento, en nuestra carpeta proyecto-mg. Una vez hemos copiado estas dos carpetas, tenemos el 50% de la instalación finalizada. Ahora solo nos queda habilitar la plantilla para poder ver como queda.

Esto también es muy sencillo de realizar, desde nuestro panel de admin nos dirigiremos a system -> design y haremos clic en el botón Add Design Change.

Esto nos llevará a una pantalla con el siguiente aspecto:

El concepto de tienda lo veremos más adelante, de momento haciendo clic en el desplegable Custom Design seleccionamos f002, que es el que hemos instalado, y hacemos clic en el botón save. Con esto nuestra plantilla será utilizada, y nuestro sitio web presentará el siguiente aspecto una vez que accedamos a la url http://www.localhost.com/proyecto-mg/

Poco a poco iremos entrando en detalles sobre el funcionamiento y estructura de las plantillas, pero, de momento, ya hemos podido comprobar lo sencillo y rápido que es instalar una nueva plantilla.

Nota

Podemos seleccionar una plantilla para que tenga efecto durante un determinado periodo de tiempo. Esto es muy práctico para automatizar el cambio de aspecto de nuestra tienda durante las celebraciones (navidad, san valentín etc)

Instalación vía Magento Connect

Instalar temas usando Magento Connect es igual de sencillo, aunque requiere unos pasos bastante diferentes. El primer paso es cargar la página de Magento, http://www.magentocommerce.com/

Ahí iremos al link “Magento Connect”:

Eso nos llevará a una página con todo el catálogo de extensiones de Magento, tanto de pago como gratuitas, en el menú de la derecha podremos ver un link indicando “Design & Themes”. El siguiente paso será elegir las gratuitas (en caso de que sea lo que nos interesa), tal y como podemos ver en la siguiente imagen:

De ahí podemos seleccionar el tema que queramos, siempre fijándonos en que la versión coincida con nuestra instalación de Magento, o al menos que se aproxime lo más posible. Haciendo clic en el template que nos interese accederemos a los detalles de la misma. En esa pantalla de detalle haremos clic en el botón “Get Extension Key”:

Esto requiere que estemos registrados en la web de Magento, tras de lo cual obtendremos un código, el cual podremos utilizar desde nuestro panel de administración. Copiaremos el código y nos dirigiremos al admin de Magento. Iremos al menú system -> magento connect -> magento connect manager:

Al hacer clic en dicho menú seremos redirigidos a la página de Magento Connect Manager, donde se nos volverán a pedir nuestros datos de acceso al panel de administración. La próxima, y definitiva pantalla, nos mostrará un campo donde poder introducir el código de extensión que hemos copiado:

Una vez instalado, podremos utilizar el template de la misma forma que en el caso anterior. Como podemos ver, ambos métodos son equivalentes, así que el uso de uno u otro dependerá en gran medida de nuestros gustos.

Conceptos básicos de los temas de Magento

Antes de continuar, y ver como podemos modificar los demás, para acomodarlos a nuestras necesidades, vamos a ver algunos puntos clave que conforman los templates de Magento. El primero de ellos son los Layouts.

Layouts

Básicamente, los ficheros de layout son los que definen la estructura de las páginas de Magento, definiendo las posiciones de los elementos. Así tendremos ficheros de layout para la mayoría de páginas de Magento. Por ejemplo, vamos a observar uno de los ficheros de layout del tema que hemos instalado hace un momento. Iremos a la carpeta app -> design -> frontend -> default -> f002 -> layout -> page.xml, si lo abrimos veremos algo similar a:

Aquí podemos ver la estructura de bloques, que conforman el layout, sin código html, simplemente definiendo la estructura que tendrá la página en cuestión. Cada uno de estos bloques presentará una parte del código, cargándola, de manera que un layout en concreto estará formado por un conjunto de bloques.

Por ejemplo si vemos este bloque:

Podemos ver que definimos el typo de bloque, su nombre, el tipo de output (el tipo de salida del bloque, en este caso html) y el template que cargaremos ( page/3columns.phtml).

Pero no nos preocupemos demasiado por estos conceptos, ya que los iremos viendo poco a poco durante el curso. De momento, y antes de continuar, me gustaría aclarar la diferencia entre los dos tipos de bloques que podemos tener, para ello veamos el siguiente código:

<label>Page Header</label>

<action method=”setElementClass”><value>top-container</value></action>

</block>

Por un lado podemos ver bloques estructurales, que nos ayudan a definir las diversas zonas de la web. Tienen una función más bien organizativa, muy al estilo de las secciones en HTML5, podemos ver por ejemplo este código:
<block type=”page/html_header” name=”header” as=”header”>
Este bloque sería de tipo estructural, y serviría como contenedor para otros bloques, que irían dentro de el, probablemente bloques de contenido.
Bloques de contenido, son bloques similares al siguiente ejemplo:
<block type=”page/switch” name=”store_language” as=”store_language” template=”page/switch/languages.phtml”/>
Estos bloques cargan un archivo phtml, generando el contenido, propiamente dicho, del bloque.

Templates (ficheros phtml)

Es en estos ficheros donde encontraremos el html de nuestro sitio, en ellos veremos código html común y corriente, mezclado con funciones propias de Magento, como podemos ver en la siguiente imagen:

El extracto pertenece al fichero que podemos encontrar en app -> design -> frontend -> default -> f002 -> template -> page -> 3columns.phtml , en el podemos ver el uso de funciones que llaman a otros bloques de html, conformando la página final.

Skins

Es en esta categoría/carpeta donde se guardan el resto de ficheros que conformaran nuestra plantilla. Aquí están los ficheros CSS, JS, imágenes, ficheros flash etc

Si navegamos nuestro sitio, siguiendo esta ruta skin -> frontend -> default podremos ver varias carpetas nombradas así:

f002
f002_grey
f002_green
etc

Cada una de estas carpetas corresponde a un skin diferente, de hecho si las fuéramos intercambiando el aspecto de nuestro sitio (en cuanto a colores, no estructura) iría cambiando.

Interfaces

De momento, y para no liarnos demasiado con conceptos complejos, resumiremos un interfaz como un conjunto de temas que definirán como se ve nuestro sitio. Por ejemplo, si examinamos nuestra instalación veremos esta estructura de directorios:

app/design/frontend/default
app/design/frontend/base

Tanto la carpeta default como base tienen en su interior un conjunto de carpetas, cada una de ellas será un tema. Por lo tanto ambas carpetas (default y base) son un conjunto de temas, un interface.

Resumiendo

Para intentar resumir un poco todos los conceptos que hemos visto, vamos a destacar la estructura general de un template:

app/design/frontend/default/f002 -> aquí dentro tendremos los ficheros de layout y los phtml (templates)
skin/frontend/default/f002 -> aquí estarán los ficheros css, js etc

Creación de temas

El siguiente paso en nuestro viaje por Magento es la creación de un tema o plantilla propio. En si misma no es una tarea excesivamente compleja, pero son necesarios un número de pasos determinados que ahora iremos viendo. Uno de los primeros pasos que debemos dar es la creación del html de nuestro tema. Esto nos servirá principalmente para ver de antemano como tiene que quedar, y nos ayudará a realizar las divisiones necesarias.

Estableciendo las bases, el html

Esta parte es bastante sencilla, ya que simplemente se trata de crear el html básico, por ejemplo podríamos tener la siguiente estructura:

<!DOCTYPE html>

<head>

<title>Nuestra primera plantilla de Magento</title>

</head>

<body>

<h3>Bienvenido, admin</h3>

<li><a href=”#” title=”Mi cuenta”>Mi cuenta</a></li>

<li ><a href=”#” title=”Mi lista de deseos”>Mi lista de deseos</a></li>

<li ><a href=”#” title=”Mi carrito”>Mi carrito</a></li>

<li ><a href=”#” title=”Finalizar”>Finalizar</a></li>

<li><a href=”#” title=”Salir” >Salir</a></li>

</ul>

</div>

<div id=”breadcrumbs”>Inicio >> categoría 1</div>