![Definición de un theme en Magento2](http://www.damianculotta.com.ar/wp-content/uploads/2016/02/2016-02-09-01.jpg)
No sólo aquellos que hagan backend deberán enloquecerse aprender a jugar con Magento2, el frontend también trae cambios, algunos buenos y otros… digamos… cuestionables.
Ayer veíamos cómo crear, para un módulo, un bloque y un template custom. Hoy la idea es dar otro pequeño paso y sentar las bases para nuestro primer theme.
Comenzaremos por crear, dentro de app/design/frontend el directorio del Vendor. En mi caso será Barbanet. A su vez, dentro de dicho directorio, crearemos el del theme, que en este ejemplo se llamara sampletheme.
Si miramos el path completo, mi nuevo theme estará ubicado en app/design/frontend/Barbanet/sampletheme
![Ubicación de un theme custom en Magento2](http://www.damianculotta.com.ar/wp-content/uploads/2016/02/2016-02-09-02.png)
Ahora que ya sabemos en dónde, vamos a empezar a armar nuestro theme.
Lo primero será definir nuestro theme como tal. Esto lo haremos con el archivo theme.xml.
<theme xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/theme.xsd">
<title>Barbanet Sample Theme</title>
<parent>Magento/blank</parent>
<media>
<preview_image>media/preview.jpg</preview_image>
</media>
</theme>
Algunos detalles aquí.
- title es sólo el nombre, detalle que nos servirá luego.
- parent es lo que nos permite definir si el theme hereda o no de otro. Dado que ya no existe un base/default, o bien hacemos todo de 0 o nos apoyamos en el theme blank.
- la parte final de media y preview\_image, también será algo que nos servirá luego.
Ahora vamos a crear, dentro del directorio del módulo, un subdirectorio llamado media, y dentro de él, agregaremos la imagen preview.jpg (tal cual en la definición recién mencionada)
Luego, vamos a registrar nuestro theme con registration.php.
\Magento\Framework\Component\ComponentRegistrar::register(
\Magento\Framework\Component\ComponentRegistrar::THEME,
'frontend/Barbanet/sampletheme',
__DIR__
);
Sólo si pensáramos en publicar nuestro theme, deberemos crear el archivo composer.json, que en este caso sería algo así:
{
"name": "barbanet/magento2-theme-frontend-sampletheme",
"description": "Magento2 sample theme",
"require": {
"php": "~5.5.0|~5.6.0|~7.0.0",
"magento/theme-frontend-blank": "100.0.*",
"magento/framework": "100.0.*"
},
"type": "magento2-theme",
"version": "2.0.0",
"license": [
"OSL-3.0",
"AFL-3.0"
],
"autoload": {
"files": [
"registration.php"
]
}
}
Ya nos vamos acercando a la configuración, pero primero, vamos a agregar algunos archivos más, aunque al estar haciendo herencia no sería necesario, pero para que veamos dónde deben ubicarse.
Aún en la raíz del theme, vamos a crear el directorio etc, y dentro de él copiaremos desde vendor/magento/theme-frontend-blank/etc/ el archivo view.xml (ya luego veremos qué nos permite).
Ahora creamos otro directorio (siempre en la raíz de nuestro theme), que se llamará web, y dentro de él los subdirectorios css, images y js (en mi caso, he copiado desde vendor/magento/theme-frontend-blank/web/ los archivos).
Ahora si, nos vamos al backend de Magento. Aquí es donde ahora se pueden ver los themes existentes.
![Opción de menú para ver los themes en Magento2](http://www.damianculotta.com.ar/wp-content/uploads/2016/02/2016-02-09-03.png)
Y al ingresar… nuestro theme.
![Listado de themes en Magento2](http://www.damianculotta.com.ar/wp-content/uploads/2016/02/2016-02-09-04.png)
Si hacemos click sobre nuestro theme, veremos algo más de detalle.
![Detalle de un theme en Magento2](http://www.damianculotta.com.ar/wp-content/uploads/2016/02/2016-02-09-05.png)
Más arriba hacie referencia, cuando definimos el archivo theme.xml, al preview. Si hacemos click sobre la miniatura, se verá aquella imagen que hayamos definido y agregado, a través de un popup.
![Preview de un theme en Magento2](http://www.damianculotta.com.ar/wp-content/uploads/2016/02/2016-02-09-06.png)
Ahora que sabemos que el theme existe y es reconocido correctamente, vamos a configurar la tienda.
Nos vamos ahora, siempre en el backend, a Stores -> Configuration -> Desgin.
![Menú de acceso a la configuración en Magento2](http://www.damianculotta.com.ar/wp-content/uploads/2016/02/2016-02-09-07.png)
Y veremos:
![Configuración de themes en Magento2](http://www.damianculotta.com.ar/wp-content/uploads/2016/02/2016-02-09-08.png)
Y allí, sin andar escribiendo nada, seleccionamos desde el dropdown nuestra opción.
![Selección de theme en Magento2](http://www.damianculotta.com.ar/wp-content/uploads/2016/02/2016-02-09-09.png)
Una vez que guardemos, veremos, nuevamente, la notificación de caché invalidado.
![Notificación de cache invalidado en Magento2](http://www.damianculotta.com.ar/wp-content/uploads/2016/02/2016-02-09-10.png)
(No puedo describir cuánto me molesta el modal ese apareciendo más seguido de lo que quisiera)
Luego de refrescar cache, volvemos al frontend y deberíamos obtener similar resultado a esto:
![Frontend con theme custom en Magento2](http://www.damianculotta.com.ar/wp-content/uploads/2016/02/2016-02-09-11.png)
![Frontend con theme custom en Magento2](http://www.damianculotta.com.ar/wp-content/uploads/2016/02/2016-02-09-12.png)
![Frontend con theme custom en Magento2](http://www.damianculotta.com.ar/wp-content/uploads/2016/02/2016-02-09-13.png)
Efectivamente, mi theme ha heredado del blank y ya está funcionando correctamente.
Uno de los detalles para comenzar a explorar está en el archivo etc/view.xml del theme. Aquí, entre otras cosas, podemos definir el tamaño de las imágenes.
Por ejemplo, si buscamos este string en el archivo <image id=»product_page_image_large» type=»image»/>, veremos que para la imagen de tipo large y medium, existe la siguiente definición.
<image id="product_page_image_large" type="image"/>
<image id="product_page_image_medium" type="image">
<width>700</width>
<height>700</height>
</image>
Si allí cambiamos el valor de 700 a 400 (y refrescamos cache), automáticamente las imágenes serán presentadas en su nuevo tamaño.
![Tamaño de imágenes en Magento2](http://www.damianculotta.com.ar/wp-content/uploads/2016/02/2016-02-09-14.png)
Otro detalle, también comentado al pasar más arriba: ya no existe el theme base/default. Esto quiere decir que o bien heredamos de un theme existente o hacemos todo de 0.
Si el theme de mi ejemplo no heredara de blank, pasaría algo como esto.
![Theme incompleto en Magento2](http://www.damianculotta.com.ar/wp-content/uploads/2016/02/2016-02-09-15.png)
Esto sucede porque los phtmls se encuentran dentro de cada módulo, pero no así la totalidad de los estilos y js (si bien, cada módulo puede tener sus propios archivos).
Para finalizar, por ahora, la estructura completa del theme que hemos visto debería quedar así:
![Estructura theme custom en Magento2](http://www.damianculotta.com.ar/wp-content/uploads/2016/02/2016-02-09-16.png)