Magento 2 Nuevo tema usando Sass y Gulp

Introducción: Less y no Sass en Magento 2

Magento 2 GulpDesde que salió Magento 2 ha habido algo de polémica respecto al tema Less y Sass. El por que de que Magento 2 optase por utilizar Less quedo claro en los posts de algunos de los desarrolladores: no fué una decisión por ser mejor si no por la calidad y estabilidad que habían en el momento de adaptar y desarrollar la parte frontal del framework por parte de Less y no por parte de Sass.

Hace meses (años) que Sass ha ganado terreno y cada vez más y mucho desarrolladores han pedido una forma sencilla de migrar de Less a Sass y en Magento parece que han escuchado esas peticiones y ya hay herramientas suficientes para trabajar con Sass y Gulp.

Hay un repositorio muy conocido sobre este tema que es el de Snowdog, donde hace una copia del tema base de Magento 2 “Blank” donde soporta Sass. Para ello utiliza otro repositorio donde hay unos paquetes de herramientas para compilar, etc.

Repositorio de Snowdog Blank theme.

Repositorio de Frontools.

De todas formas, en este tutorial, no utilizamos estas herramientas que ya llevan un tiempo generadas. Vamos a partir de la base de la documentación oficial de Magento 2 que hace unos meses se actualizo y nos permite empezar a utilizar Sass sin mucho esfuerzo.

Objetivo

El objetivo es crear un tema propio que extienda de Magento Blank y que utilice Sass con Gulp. Este tutorial se realiza en un Mac.

Crear un tema de Magento 2

  • Creamos una carpeta llamada Empresa en app/design/frontend
  • Creamos una carpeta llamada Mitema en app/design/frontend/Empresa
  • Creamos un fichero “theme.xml” con el siguiente contenido:

  • Creamos un fichero “registration.php” con el siguiente contenido:

  • Creamos un fichero “package.json” con el siguiente contenido:

  • Creamos un fichero “gulpfile.js” con el siguiente contenido:

  • Creamos el directorio “web” y dentro dos directorios más: “css” e “images” en el cual podéis poner una imagen “logo.png” a vuestro gusto.
  • Creamos en la raiz del tema, es decir, Empresa/Mitema un directorio “Magento_Theme” con un subdirectorio “layout” y dentro un fichero “default_head_blocks.xml” con el siguiente contenido:

 

Bien, hemos dejado todo listo a falta de los últimos cambios e instalación de Magento 2 SassGulp. Primero explicamos que es lo que hemos hecho. Habéis creado un tema dentro de vuestro Vendor Empresa llamado Mitema. Lo habéis declarado en el fichero theme.xml, con esto Magento 2 ya sabe que este tema existe. Todo lo que influye a nivel de front se pone dentro de la carpeta web, en nuestro caso para este ejemplo solo hemos creado las carpetas css e images pero también podriais incluir otras como js. Dentro de la carpeta images hemos metido una imagen logo.png a la cual se hace referencia en theme.xml y que es la imagen que define el tema en el backoffice de Magento 2. Más adelante vemos donde.

Hemos creado el fichero registration.php que todos los paquetes ya sean temas o plugins deben llevar en Magento 2 para que al lanzar la orden setup:upgrade el sistema lo detecte. Y hemos creado el fichero package.json en el cual hacemos referencia a gulpfile.js en el cual configuramos de forma básica como queremos que funcione Gulp. En este caso le decimos que en la carpeta css tendremos un archivo styles.scss y cuando compilemos lo pintará en style.css.

Instalando Gulp y compilando CSS

Para instalar Gulp y hacerlo funcionar necesitamos el comando “npm” que viene con “node”. Para instalar node necesitamos brew. Si no lo tenéis en vuestro sistema, podéis instalarlo siguiendo los pasos desde este enlace https://brew.sh/index_es.html.

Una vez instalado brew ejecutamos brew install node y esperamos a que termine. Cuando acabe podéis probar que funcione tanto node como npm ejecutando node -v y npm -v que deberían de devolver la versión instalada.

Ejecutamos los siguientes comandos:

  • npm install gulp
  • npm install gulp-sass
  • npm gulp notify
  • npm gulp plumber

Si os faltase alguno, al compilar os daría un error parecido a estos:

Una vez instalado Gulp vamos a crear dos fichero Sass  en web/css styles.scss y _colors.scss. En _colors.scss añadimos lo siguiente $color-red: red; y en styles.scss lo siguente:

Ejecutamos el comando gulp styles y deberiamos ver algo como esto:

Si nos fijamos en la carpeta css veremos que se ha creado el archivo styles.css y en su interior tenemos compilado el código css que añade el valor de la variable red a nuestro código de styles.scss.

Activando el tema en Magento 2

Desde el backoffice vamos a Content > Themes y veremos que uno de los temas del listado es el nuestro: Mitema. Desde Content > Configuration podemos seleccionar la opción de store view e indicarle que utilice nuestro tema. Automaticamente veréis Magento sin el tema Luma con el que viene por defecto, en su lugar está el tema Mitema que es exactamente igual al Blank pero con todo el fondo rojo gracias a vuestro Css compilado con Sass y Gulp.

 

——————

Si el tema no os aparece lanzad el comando php bin/magento setup:upgrade . Para resolver cualquier duda podéis usar los comentarios.

 

 

 

Instalar Magento 2 via DevBox para desarrollo en local

Introducción

Magento 2 DevBox es un paquete montado con Docker con el que tan solo ejecutando un script nos instalará un entorno local completo para empezar a trabajar con Magento 2. Este paquete viene con el siguiente software preinstalado:

  • Debian GNU/Linux 8 (jessie)
  • Apache 2.4.10
  • PHP 7.0.12
  • MySQL 5.634

Para poder trabajar es necesario tener el sistema Mac OS Yosemite o superior, o el sistema operativo Windows 10 Pro 64bits.

Docker

Magento 2 DevBox DockerDocker es un gestor de contenedores. En un contenedor puedes instalar lo que quieras, por ejemplo un entorno de desarrollo con todos los requisitos que comentaba arriba. Estos contenedores se pueden compartir e instalar tantas veces como se desee haciendo muy fácil que un grupo de usuarios tengan el mismo software funcionando con las mismas versiones o un equipo de desarrollo trabajen bajo el mismo sistema.

Para descargar e instalar Docker vamos a esta url https://www.docker.com/products/overview y seleccionamos el que haga referencia a nuestro sistema operativo.

Nota: este tutorial se ha hecho con Mac OS. Los pasos en un Windows serán muy similares pero no tienen porqué ser iguales.

Una vez descargado el fichero Docker.dmg hacemos click y se siguiendo los pasos dejaremos Docker instalado en nuestro ordenador.

Magento 2 DevBox

Para descargar el contenedor con Magento 2 vamos a https://magento.com/tech-resources/download

Magento 2 DevBox

Le daremos al botón “Get Started” y una vez registremos usuario o nos conectemos veremos la siguiente pantalla:

Magento 2 DevBox Options

Clickamos en la primera opción, “Create New Installation”, y se desplegarán una serie de opciones más abajo. Para que la instalación sea lo más ligera posible no añadiremos extras como el Sample Data o funcionalidades como Elastic Search o Varnish. Simplemente marcamos el sistema operativo, dejamos la versión community y añadimos nuestras claves.

Access Keys

Las access keys son necesarias para que composer pueda registrar aplicaciones, el sample data, etc. La forma de conseguirlas es muy sencilla. Entrado en https://www.magentocommerce.com/magento-connect/customer/account/login/ verás que a la izquierda una vez conectado hay un menú. Entras en “Secure Keys” y le das al botón “Generate new” poniendo primero un nombre (no tiene ningún valor).

Con esto ya tienes tus claves, la pública es el equivalente al “user name” y la privada es equivalente al “password”.

 

Una vez tengas todas las opciones dale a “Download DevBox Installer”.

Instalando Magento 2 DevBox

Se habrá descargado un .zip que puedes mover a tu carpeta de proyectos y descomprimir. Verás una carpeta con nombre muy largo del tipo “build-522265adfa0f6b1cd93433fe9ab2f3d3”. Entre desde una terminal en ella y ejecuta  ./m2devbox-init.sh

Veremos que en la terminal aparece información sobre el proceso de instalación. Es posible que si has seguido el tutorial de instalar Magento 2 en MAMP te acabe dando un error similar al siguiente:

Magento 2 DevBox error

Para resolverlo abrimos las preferencias de Docker y en la pestaña de “Files sharing” añadimos la ruta donde MAMP gestiona los proyectos /Applications/MAMP/htdocs, guardamos y reiniciamos Docker.

Magento 2 DevBox Docker Preferences

Volvemos a ejecutar el comando  ./m2devbox-init.sh y veremos que todo funciona bien ahora. Te da tiempo a tomarte un café mientras se instala todo.

Finalmente, si todo ha ido bien y después de un buen rato viendo como sucedían instalaciones de paquetes y módulos en la terminal deberías de ver un mensaje similar al siguiente:

Verás que se ha asignado una ip local con un puerto específico. Entrando a esa dirección verás la tienda de Magento 2 y entrando con las credenciales verás el backoffice.

Posibles problemas

Es posible que te surja algún problema que no me haya pasado a mi así que puedes comentarlo más abajo. A mi, en concreto, me pasaba que el Magento 2 DevBox intentaba instalar la versión 2.1.4 de Magento 2 cuando solo estaba hasta la 2.1.3. Editando el archivo docker-compose.yml cambié la versión y se instalo perfectamente. Ten en cuenta que desde este mismo archivo se pueden modificar otras muchas opciones.

Instalar Magento 2 en MAMP PRO

Introducción

Vamos a explicar como utilizar MAMP para dejar listo un entorno de desarrollo local para empezar a desarrollar en Magento 2. Si no conoces que es MAMP, es el equivalente a XAMP, LAMP, AMPPS, etc, es decir un entorno preconfigurado que funciona bajo el sistema operativo Macintosh (Mac) con Mysql y PHP (entre otros lenguajes). Viene con una serie de configuraciones y puertos predeterminados para poder empezar a trabajar en sitios web sin esfuerzo ni configuraciones imposibles.

Proporciona un control y gestión de versiones de PHP y MYSQL así como la localización de los logs o una fácil edición de los archivos de configuración como el php.ini. En definitiva, un software que facilita y acelera el desarrollo de aplicaciones en local.

Dicho esto, nos vamos a centrar en instalar y seguir todos los pasos necesarios para dejar MAMP listo para cualquier tipo de proyecto y continuaremos en como dejar instalado y configurado en concreto Magento 2.

Nota: si no quieres pagar por MAMP PRO siguiendo los pasos del tutorial podrías instalar Magento 2 en la versión gratuita. Algunos pasos variarán o directamente los puedes saltar. En algunos cambia simplemente la interfaz de MAMP. Si tienes cualquier duda, te respondo en los comentarios.

Instalar MAMP PRO

Nota: para este tutorial he trabajado con la versión 3.5.2 de MAMP PRO. Actualmente van por la 4. Os aconsejo si comprais por primera vez hacerlo sobre la última versión aunque algún paso pueda variar levemente. 

Para descargar la última versión: https://www.mamp.info/en/downloads/

Url para descargar la versión 3.5.2: https://www.mamp.info/en/downloads/older-versions/

Comprar la última versión o anteriores si se desea: https://sites.fastspring.com/mamp/product/mamp-pro?language=en&tags=en

Una vez instalado el software siguiendo los pasos e insertada la clave deberías ver la pantalla de MAMP PRO:

MAMP PRO window

Inicia los servicios dando al botón verde de la esquina superior derecha y verás que se marcan Apache y Mysql como iniciados. Ahora dale al botón de al lado WebsStart y si ves una página web de MAMP con información del entorno quiere decir que todo funciona como debe.

A partir de ahora, los proyectos los trabajarás dentro de la carpeta que tiene MAMP preparada para alojarlos que se encuentra en la siguiente ruta: /Applications/MAMP/htdocs. Te recomiendo un acceso directo a htdocs para poder entrar de forma rápida.

Configuraciones extras

Te recomiendo que le des un vistazo a todas las opciones. Sobretodo quédate con donde tienes lo logs de mysql, php, etc. Habilita el máximo de logs posibles ya que en este entorno vas a desarrollar. Por último en la pestaña de PHP selecciona PHP 5.6.10 en vez de cualquier otra versión. Magento 2 funciona con PHP 5.6.10 y 7+ pero para esta guía uso la 5.6.10.

Instalar composer

Composer es un gestor de paquetes y Magento 2 ahora trabaja mano a mano con él por tanto hay que descargarlo e instalarlo. Desde la siguiente Url podemos hacerlo siguiente los comandos que nos indican https://getcomposer.org/download/.

Cuando finalices con los comandos te recomiendo un último para que puedas usar composer de forma global solo con “composer” y no con “php composer.phar”. Ejecuta lo siguiente desde el mismo directorio donde has ejecutado el resto:

mv composer.phar /usr/local/bin/composer

Configurar PHP terminal

Los Mac vienen con apache instalado de serie y seguramente tengáis también una configuración por defecto de dónde tiene que mirar el php. El problema al usar MAMP es que tiene una configuración propia encapsulada. Por tanto, el PHP que se está ejecutando en el servidor al cargar vuestros proyectos no es el mismo que ejecuta la terminal/consola. Esto hay que cambiarlo para que os funcionen bien los comandos que ejecutéis dentro de la aplicación y Magento 2 precisamente funciona a base de comandos.

El cambio es muy sencillo. Asegúrate de que has seleccionado en MAMP el PHP 5.6.10 descrito en la instalación de MAMP > Configuraciones extras.

Antes de ejecutar los pasos, hacemos un pequeño setup que os podéis saltar si ya lo tenéis.

Instalando BREW y VIM

Brew es un gestor de paquetes para Mac, en realidad es una herramienta inprescindible si tienes un Mac. Con brew puedes instalar paquetes de todo tipo, dependencias, etc. Para comprobar si ya tenemos Brew instalado ejecutamos en la terminal  brew , si nos devuelve opciones es que lo tenemos, en ese caso lo actualizamos con  brew update . En el caso de que no lo tengamos instalado podemos hacerlo siguiendo los pasos de este enlace http://brew.sh/index_es.html.

Una vez instalado Brew podemos instalar Vim que es un editor de texto. Si no os gusta Vim podéis configurar la terminal para abrir y editar ficheros con el que queráis. Los ejemplos a continuación serán con Vim. Para instalarlo desde la terminal escribimos  brew install vim . Hecho, ahora para editar un archivo bastará con ejecutar “vim nombredelarchivo”. Para saber comandos básicos sobre como usar Vim puedes visitar este enlace http://bullium.com/support/vim.html.

Ultimando configuraciones

En terminal ejecutamos:  vim ~/.bash_profile

A este archivo le añadimos dos lineas:

Guardamos el archivo y ejecutamos en la terminal:   source ~/.bash_profile

Por último y a modo de comprobación ejecutamos en terminal  php --ini  y deberiamos ver algo parecido a lo siguiente (las rutas apuntando a MAMP):

php --ini

Basicamente hemos creado y editado un archivo en nuestra “home” donde le indicamos donde un alias para ejecutar composer (solo para asegurarnos) y la ruta del php que tenemos que ejecutar que como ves está dentro de MAMP. Al ejecutar “source” lo que hacemos es “guardar” esta configuración. Con esto, evitamos que al ejecutar comandos php nos salten errores por utilizar versiones de php distintas.

Instalar Magento 2

Hay varias formas de descargar Magento 2. Con composer, descargando el repositorio oficial de github o descargando el paquete desde magento.com. Esta última manera es la que utilizo para esta guia. Entra en esta url https://magento.com/tech-resources/download y descarga la última versión del software. Si te decides por alguna otra forma, los pasos siguiente son muy similares.

Una vez descargado, movemos el fichero comprimido dentro de /Applications/MAMP/htdocs lo descomprimimos y lo renombramos a magento2.

Entramos dentro de la carpeta Magento 2 y ejecutamos:

composer install

composer install

Veréis algo parecido a esto (no tiene por que ser igual), fijaros que no sea un error y que ponga que se han cargado los repositorios de composer, se han instalado dependencias y se han cargado los ficheros “autoload”.

Creando un Virtualhost

Este paso, tampoco es necesario para continuar, pero el tutorial seguirá usando las url’s de un Virtualhost. Es aconsejable que sigas este punto también. Crear un virtualhost con MAMP PRO es muy sencillo.

Magento 2 Virtual Host con MAMP PRO

Siguiendo la imagen anterior, ve a la sección “Hosts” de MAMP PRO. Abajo a la izquierda dándole al símbolo “+” crearas una nueva entrada. Por defecto esa entrada usará el PHP que tengas configurado en MAMP PRO. Arriba a la derecha puedes darle un nombre, en este caso lo he llamado “magento2.dev”. Lo último que falta apuntar a la carpeta donde está Magento 2 y por último dale a “Guardar”. MAMP preguntará si deseas reiniciar los servicios para que los cambios se hagan efectivos, dile que si. Una vez reiniciado MAMP PRO y si accedes a la siguiente url http://magento2.dev:8888/ deberías ver la pantalla del inicio de la instalación de Magento 2.

Creando la base de datos

Desde la pestaña MySQL de MAMP PRO puedes ver que hay un apartado llamado “Administrar MySQL con”. Por defecto MAMP PRO tiene instalado phpMyAdmin pero podéis gestionarlo también con Sequel Pro y MySQLWorkbench. Lo único que tienes que hacer es crear una nueva base de datos llamada magento2 con coalición UTF-8.

Instalando Magento 2

Ahora si, ya lo tienes todo listo, si accedes a la url http://magento2.dev:8888/ y sigues todas las pantallas paso a paso acordándote de que al poner los datos de la base de datos tienes que, en el host poner localhost:8889 al final verás una pantalla con una barra de progreso. Una vez acabe una pantalla te indicará que todo ha finalizado y podrás acceder tanto a la parte frontal de Magento 2 como al backoffice con la Uri y los datos que hayas ingresado en el proceso.

Comandos útiles

Antes de dar por finalizado el tutorial, vamos a probar que funcione la terminal. Magento 2 tiene unas opciones que se gestionan mediante comandos. Desde la raíz de la instalación de Magento 2 ejecutamos  php bin/magento . Si todo funciona como es debido debería de devolvernos un listado de comandos con sus descripciones. Para usar cualquiera de esos comandos solo tienes que repetir la llamada anterior y añadirle el comando que quieras ejecutar. A estos comandos además se les puede pasar argumentos. Algunos de los comandos más útiles a la hora de desarrollar en Magento 2 son:

  • Para poner la aplicación en modo developer  php bin/magento deploy:mode:set developer
  • php bin/magento module:disable añadiendo el nombre del módulo lo deshabilitariamos y cambiando disable por enable lo habilitariamos.
  • Actualiza la aplicación y la base de datos. Si estás trabajando en un módulo este comando hará que Magento 2 se entere de que existe.  php bin/magento setup:upgrade
  • php bin/magento sampledata:deploy con esto y siguiendo las instrucciones que salen por pantalla se instalan en base de datos una buena cantidad de datos de prueba como productos, categorías, etc.

Espero que este tutorial te haya servido para empezar a investigar y trabajar con Magento 2.