Primeros pasos en plantillas Magento 2

8 years ago

En el siguiente post vamos a mostrar las nociones básicas sobre las plantillas con Magento 2:

CÓMO CREAR UN TEMA

Para crear nuestro tema customizado, primero debemos crear nuestro namespace en nuestro caso será Devopensource dentro de app/design/frontend/”Devopensource” y dentro del namespace podemos crear nuestra carpeta del tema de manera que el path sea: app/design/frontend/”Devopensource”/”Custom”.

Una vez creada la estructura de carpetas debemos registrar el tema para que Magento 2 lo reconozca, para ello dentro de app/design/frontend/”Devopensource”/”Custom” creamos el archivo registration.php con el siguiente contenido:

<?php
\Magento\Framework\Component\ComponentRegistrar::register(
   \Magento\Framework\Component\ComponentRegistrar::THEME,
   'frontend/Devopensource/Custom',
   __DIR__
);

Una vez hecho esto debemos crear el archivo de configuración del tema en app/design/frontend/Devopensource/Custom/theme.xml con el siguiente contenido:

<theme xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/theme.xsd">
   <title>Tema Personalizado Devopensource</title>
   <parent>Magento/blank</parent>
</theme>

Ahora sólo falta registrar el tema, para ello ejecutaremos en el terminal en raíz del proyecto Magento “composer update”, podemos comprobar que existe navegando en el admin a Content | Themes.

Como último paso para activar nuestro tema en Stores | Configuration | Design seleccionamos nuestro tema, limpiamos caché y recargamos nuestra tienda.

MODIFICANDO PLANTILLAS Y LOGOS

En Magento 2 podemos cambiar el logo desde el admin en Stores | Configuration | Design | Header o también podemos hacerlo mediante código.

Para ello crearemos la ruta app/design/frontend/Devopensource/Custom/web/images y dentro alojaremos nuestro logo(por ejemplo logo.png).

En el siguiente paso debemos crear un archivo de configuración layout en app/design/frontend/Devopensource/Custom/Magento_Theme/layout al que llamaremos default.xml y contendrá el siguiente código:

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
   <body>
       <referenceBlock name="logo">
           <action method="setLogoFile">
               <argument name="logo_file" xsi:type="string">images/logo.png</argument>
           </action>
       </referenceBlock>
   </body>
</page>

Además, como en Magento 1, cada vez que modificamos un xml debemos borrar caché y refrescar la tienda para ver los cambios.

Para borrar caché basta con ejecutar en el terminal “bin/magento cache:clean”.

En Magento 2 si queremos, por ejemplo, modificar la plantilla de los métodos de envío iremos a buscarla en la carpeta de su módulo app/code/Magento/Checkout/view/frontend/templates/cart/shipping.phtml (aquí ya cambia bastante ya que antes íbamos a buscar la plantilla en base o default) y nos la llevamos, en este caso, a app/design/frontend/Devopensource/Custom/Magento_Checkout/templates/cart/shipping.phtml. Una vez realizados los cambios que necesitemos en la plantilla limpiamos caché y refrescamos la tienda.

Como hemos visto la ruta en nuestro tema también es muy diferente a la de Magento 1 pero es una ventaja ya que queda más claro de qué módulo proviene la plantilla a modificar.

Seguimos hablando de modificar plantillas, como en Magento 1 en Magento 2 podemos añadir links por ejemplo al footer y para ello solo tendremos que modificar el archivo default.xml y añadir el siguiente código:

<referenceBlock name="footer">
   <block class="Magento\Framework\View\Element\Html\Links" name="footer_links_account" after="footer_links">
       <arguments>
           <argument name="css_class" xsi:type="string">footer links</argument>
       </arguments>
       <block class="Magento\Framework\View\Element\Html\Link\Current" name="my-account-link">
           <arguments>
               <argument name="label" xsi:type="string">My account</argument>
               <argument name="path" xsi:type="string">customer/account</argument>
           </arguments>
       </block>
       <block class="Magento\Framework\View\Element\Html\Link\Current" name="my-cart-link">
           <arguments>
               <argument name="label" xsi:type="string">My cart</argument>
               <argument name="path" xsi:type="string">checkout/cart</argument>
           </arguments>
       </block>
   </block>
</referenceBlock>

Ahora en Magento 2 para indicar que queremos hacer que un link sólo aparezca en una página determinada deberemos hacerlo en un archivo layout distinto no como en Magento 1 que se realizaba en el mismo fichero.

Por ejemplo en este caso queremos hacer que el link hacia al checkout aparezca solo en la página del cart, para ello crearemos en app/design/frontend/Devopensource/Custom/Magento_Theme/layout/ crearemos el xml checkout_cart_index.xml (que es la clase del body que referencia a la página del cart) y le añadiremos el siguiente código:

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="1column" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
   <body>
       <referenceContainer name="footer_links_account">
           <block class="Magento\Framework\View\Element\Html\Link\Current" name="checkout-link">
               <arguments>
                   <argument name="label" xsi:type="string">Go to checkout</argument>
                   <argument name="path" xsi:type="string">checkout/onepage</argument>
               </arguments>
           </block>
       </referenceContainer>
   </body>
</page>

Si limpiamos caché y refrescamos podemos comprobar cómo los links “My account” y “My cart” aparecen en toda la tienda pero el link “Go to checkout” solo en la página del cart.

AÑADIENDO CSS Y JSS

Añadir un CSS o JS propio a tu tienda es más fácil en Magento 2 ya que solo debemos añadir en app/design/frontend/Devopensource/Custom/Magento_Theme/layout/ el archivo default_head_blocks.xml y añadimos el siguiente código:

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"  xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
   <head>
       <css src="css/custom.css" />
       <script src="js/custom.js" />
   </head>
</page>

Y en las carpetas app/design/frontend/Devopensource/Custom/web/css/ y app/design/frontend/Devopensource/Custom/web/js/ respectivamente creamos los archivos js y css en el que pondremos el código que necesitemos.

Magento 2 utiliza el JavaScript Framework llamado RequireJs para implementar JS/jQuery por lo que para utilizar dependencias de JS deberemos usar define o require como en el ejemplo que sigue. En la versión anterior de Magento esto era mas complicado ya que si necesitábamos usar jQuery debíamos utilizar la función “jQuery.noConflict();” o añadiendo al layout la librería de jQuery. Actualmente la versión de RequireJS es la 2.1.22 pero Magento 2 utiliza la 2.1.11 junto a la versión de jQuery 1.11.0.

require(["jquery"], function($){
   console.log($("footer"));
});

Para comprobar que esto funciona, como siempre que tocamos un xml, limpia caché y refresca la página.

TRABAJANDO CON LESS

Magento 2 trabaja con LESS a diferencia de lo que podíamos ver en las últimas versiones de Magento 1 que trabajaba con SASS, por lo que deberemos compilar con grunt los archivos para generar los CSS. Para instalar grunt, necesitas tener node, ejecuta este comando:

sudo npm install -g grunt-cli

Una vez instalado grunt lo podemos configurar para nuestro proyecto, vamos a la raíz de nuestro proyecto y ejecutamos:

1.npm install grunt –save-dev

2.npm install

3.npm update

4.npm install grunt-contrib-less

Y añadimos nuestro tema en dev/tools/grunt/configs/themes.js de la siguiente forma:

“tema”: {
   area: 'frontend',
   name: 'Devopensource/Custom',
   locale: 'en_US',
   files: [
       'css/styles-m',
       'css/styles-l'
   ],
   dsl: 'less'
},

Para compilar debemos ir a dev/tools/grunt/configs/ y ejecutar grunt exec:”tema” o si queremos que los archivos se vayan generando a cada cambio podemos ejecutar grunt watch.

Una vez tenemos funcionando grunt podemos empezar a maquetar con less e ir viendo los cambios.

Por ejemplo en app/design/frontend/Magento/blank/Magento_Theme/web/css/source/ tenemos _modules.less y para modificarlo nos lo llevaremos a app/design/frontend/Devopensource/Custom/Magento_Theme/web/css/source/ y ahí podremos empezar a cambiar estilos como header, footer, page-header…

Para cambiar otros estilos como precios, botones, etc… los podemos encontrar en app/design/frontend/Magento/blank/web/css/source/ y nos los tendremos que duplicar en app/design/frontend/Devopensource/Custom/web/css/source/ para poder modificarlos a nuestras necesidades.

EXCEPCIONES POR USER AGENT

Igual que en Magento 1, también podemos definir una plantilla totalmente adaptada a mobile mediante User-Agent Exceptions.

Para ello, vamos a Stores | Configuration | Design y en la pestaña Design Theme rellenamos los siguientes campos:

1.Design Theme: El tema que de tu tienda.

2.Search String: Mobile (para que cambie el tema cuando se navegue con mobile)

3.Design Theme: Que tema queremos que se cargue cuando se navegue con mobile

Magento
← Buscador avanzado para Magento Instalación Magento 2.0 →

Comments