Magento implementa la arquitectura modelo-vista-controlador (MVC) y la mayor parte de la capa de vistas son Layouts, por lo que son parte muy importante en Magento2.
¿Para que sirven los Layouts?
Los Layouts representan la estructura de una página con todos sus elementos organizados como si de la estructura de un árbol se tratara.
Son definidos en ficheros .xml, que contendrán elementos y atributos con los que se construirá la página.
Instrucciones de un Layout
Para poder personalizar un Layout tendremos que usar Instrucciones, que nos permitirán incluir, mover, eliminar o cambiar el contenido.
No voy a entrar a detallar todos sus atributos sino su función principal dentro del layout.
Al final de este tema explico con detalle cada uno de ellos en un ejemplo de Layout para nuestra página.
- Un contenedor <container> tiene como propósito incluir una estructura a la página.
Visualmente no tienen contenido salvo los elementos incluidos dentro del mismo.
Para entenderlo correctamente, su equivalente en código HTML sería <div>. - Un bloque <block> representa contenido de una página, que a su vez podrá llamar a Templates que generaran código HTML.
Por lo que el bloque es una pieza de información tangible por el usuario que navega nuestra página. - <containerReference> <referenceBlock> nos permiten hacer referencias a un contenedor o bloque.
Todas las modificaciones incluidas dentro de un referenceBlock y referenceContainer son aplicadas al correspondiente block o container. - Podremos mover contenedores o bloques usando la instrucción <move>.
- Para eliminar contenido en encabezados de nuestra <head> usaremos el elemento <remove>.
- El atributo remove=»true/false» nos permite eliminar contenedores o bloques.
- Para poder pasar argumentos usaremos el elemento <argument>.
- Si queremos incluir un layout utilizaremos la instrucción <update>.
Layouts Principales de un Tema
Los layouts más importantes a la hora de crear o extender un tema son default.xml y default_head_blocks.xml.
Busca en los módulos de Magento las siguientes rutas para comprender como está estructurado el tema:
- <Magento_Theme_module_dir>/view/frontend/layout/default.xml
En el que definiremos la cabecera, contenido y pie de página de nuestro tema. - <Magento_Theme_module_dir>/view/frontend/layout/default_head_blocks.xml
Que contendrá scripts, css y meta datos dentro de la sección <head> de nuestra página.
Por lo que si queremos sobrescribir un tema tendremos que crear esta estructura en el tema que estamos creando.
|
1 |
app/design/frontend/<vendor>/<tema>/Magento_Theme/layout/default.xml |
Si por ejemplo queremos modificar las vistas de un producto necesitamos crear su Layout en nuestro Tema.
El nombre del Layout (catalog_product_view) equivale a ruta/controlador/clase.
|
1 |
app/design/frontend/<vendor>/<tema>/Magento_Catalog/layout/catalog_product_view.xml |
Templates
Los Templates son una parte importante de las capa de vistas y tiene extensión .phtml
En ellos representaremos la información o datos proveniente de nuestros bloques.
También pueden ser sobrescritos por lo que si queremos hacer esto necesitamos buscar el template que queremos sobrescribir (podemos usar Path Hints para localizarlo)
y copiar el fichero que quieres modificar en app/design/<vendor>/<tema>/view/frontend/templates/
Ejemplo práctico de un Layout
Ya basta de teoría y veamos como poner en práctica todos nuestros conocimientos.
El primer fichero que vamos a modificar es default_head_blocks.xml en el que vamos a definir los elementos del <head> de nuestra página.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd"> <head> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no"/> <!-- bootstrap grid --> <css src="css/bootstrap/bootstrap-grid.min.css" /> <!-- my custom css file from our theme --> <css src="css/fusion.css" /> <!-- external resources if you need it --> <css src="https://use.fontawesome.com/releases/v5.5.0/css/all.css" type="text/css" src_type="url" media="all" /> </head> </page> |
- Estoy declarar una hoja de estilos con la grilla de Bootstrap que me puede servir para poder estructurar la página una forma sencilla (que ademas es Responsive).
- El segundo elemento que incluyo es una hoja de estilos para poder añadir estilos personalizados.
En mi caso voy a usar SASS por lo que voy a crear la estructura de carpetas web/css/source/ en el tema donde crearé este tipo de ficheros. - Por último voy a incluirle la Librería Fontawesome que me permitirá incluir iconos de cualquier tipo en mi tienda.
El segundo fichero que vamos a crear es default.xml que contiene toda la estructura de nuestra página (de ejemplo).
Lo crearemos en la carpeta Magento_Theme/layout/ de de nuestro tema.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 |
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd"> <body> <referenceContainer name="header.container"> <!-- remove header elements --> <referenceBlock name="header.panel.wrapper" remove="false" /> <referenceBlock name="logo" remove="true"/> <referenceBlock name="minicart" remove="false" /> <referenceBlock name="top.search" remove="true"/> <referenceBlock name="catalog.compare.link" remove="true"/> <!-- logo --> <referenceBlock name="logo"> <arguments> <argument name="logo_file" xsi:type="string">images/you_logo_here.png</argument> <argument name="logo_img_width" xsi:type="number">300</argument> <argument name="logo_img_height" xsi:type="number">300</argument> </arguments> </referenceBlock> <!-- new header --> <container name="new-header" htmlTag="div" htmlClass="fusionHeader" after="header.panel.wrapper"> <block class="Magento\Framework\View\Element\Template" name="fusion-header" before="-" template="Magento_Theme::html/header/header.phtml" cacheable="false" /> </container> </referenceContainer> <!-- move minicart into header.panel --> <move element="minicart" destination="header.panel" before="top.links"/> <!-- new footer --> <referenceContainer name="footer"> <!-- clear foooter elements --> <referenceBlock name="footer_links" remove="true" /> <referenceBlock name="form.subscribe" remove="true" /> <referenceBlock name="copyright" remove="true" /> <referenceBlock name="report.bugs" remove="true" /> <!-- new footer --> <container name="enlaces" htmlTag="div" htmlClass="enlaces" after="-"> <block class="Magento\Framework\View\Element\Template" name="enlacesFooter" before="-" as="enlacesFooter" template="Magento_Theme::html/footer/footer.phtml" cacheable="false" /> </container> </referenceContainer> </body> </page> |
Explicaré paso a paso como funciona cada contenedor o bloque (este ejemplo esta probado en Magento 2.3).
- Lo primero que hago es hacer referencia a la cabecera de página para poder eliminar elementos que no necesito y que voy a crear de nuevo.
- Haciendo referencia al bloque y usando el atributo remove los voy eliminado.
- Vamos a incluir el Logo que va a utilizar nuestra tienda.
- Como la cabecera de Magento no me gusta voy a crear un contenedor que contendrá la nueva cabecera.
Por lo que necesito crear un nuevo bloque que llamará al fichero header.phtml, donde crearé la nueva cabecera de página. - El siguiente paso es mover el Carrito de la Compra usando la instrucción <move> a la barra de Links superior.
- Por último vamos a crear un nuevo pie de página, ya que el que nos ofrece el tema Blank es horroroso.
El resultado de nuestra página sería el siguiente:
El contenido de los Templates footer.phtml y header.phtml son tarea de cada uno estructurarlos y estilarlos a nuestro gusto.
