Agregar actualizaciones de diseño

En la lección anterior, creamos una página sin contenido. En esta lección, te voy a enseñar como modificar el contenido de esa página con actualizaciones de diseño.

Con las actualizaciones de diseño, podemos organizar la estructura de la página, y es aquí en donde te mostraré como con un par de archivo en XML llamados Layout y archivos PHTML que representan las plantillas, él contendió interno vamos a darle una mejor perspectiva de contenido a nuestra página que estamos creando desde cero.

Esta lección parte de la lección anterior, es una dependencia para que te quede más claro, así que si té has brincado la lección te invito a que la revises antes de continuar. De igual forma también te he compartido el módulo completo que podrás descargar desde GitHub y directamente en los archivos adjuntos al curso, como una recomendación te sugiero practiques haciendo los ejercicios paso a paso en tu proyecto en local porque eso te ayudará a ser un buen desarrollador de Magento 2, te lo digo por experiencia propia, la práctica te dará un mejor entendimiento.

Siguime paso a paso

En los siguientes pasos veremos cómo podemos modificar el diseño de bloques con nuestro módulo HolaMundo:

Lo primero que debes hacer es crear esta estructura de carpetas en tu proyecto:
- app/code/Marcgento/HolaMundo/view
- app/code/Marcgento/HolaMundo/view/frontend
- app/code/Marcgento/HolaMundo/view/frontend/layout
Ahora, en la carpeta layout, crea un archivo llamado default.xml con el siguiente contenido, más adelante te explico para qué sirve este archivo:
```
<?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="footer_links">
			<block class="Magento\Framework\View\Element\Html\Link\Current" name="holamundo-link">
				<arguments>
					<argument name="label" translate="true"	xsi:type="string">HolaMundolanding</argument>
					<argument name="path" xsi:type="string">holamundo/index/index</argument>
				</arguments>
			</block>
		</referenceBlock>
	</body>
</page>
```
Lo primero que quiere que sepas es que un archivo XML en Magento representa una configuración o la forma de estructurar una configuración de contenido, Magento intento ver la forma de como de una manera sencilla pudieras comunicarte con el CORE de esta tecnología para que pudieras definir elementos ya existentes en Magento entre ellos existen muchos componentes como, tablas de base de datos, Menús de Back-end, Roles de configuración, Componentes de Interface de usuario, comunicación con eventos, clases todo aquello que requiera de una interacción con la plataforma para poder aplicar sus capacidades y que está fuera de manera sencilla y por eso opto por el XML porque este tipo de archivo mantienen un orden y una estructura de creación bien definida.

En este archivo de Configuración XML tenemos un primer nodo etiquetado como referenceBlock, este nodo indica que se quiere trabajar con un elemento que ya existe en Magento algo nativo, un contenido, pero para indicarle qué contenido debemos hacerlo a través de su atributo name y en este ejemplo le pasamos como valor footer_links, este valor quiere decir que en Magento ya debe existir un elemento con ese identificador que nos representa una pieza de contenido, ahora bien por ahora en esta lección no te enseñaré a identificar y crear esos elementos, pero en otros artículos podrás aprender todo acerca de este tipo de agregados, solo finalizaré diciendo que no al interno podemos invocar bloques de contenido también existentes mediante el nodo block y a esos mismos bloques de contenido se le pueden pasar parámetros que modifique su estructura o comportamiento a través del nodo argument.
Una vez más te invito a que limpies la caché con el comando php bin/magento cache:clean y recargues la página. En el pie de página, verás un enlace adicional que lleva a la página que creamos en la lección anterior, ¡¡¡No es mucho verda!!! Pero por poco se empieza.
Lo que acabamos de hacer utilizando el archivo default.xml es una actualización de diseño que se aplica a todas las páginas. Ahora bien si lo que queremos es solo actualizar una página en particular por ejemplo la página Index de nuestro Controlador del módulo HolaMundo, debemos crear el archivo app/code/Marcgento/HolaMudno/view/frontend/layout/holamundo_index_index.xml, ahora si creo que empieza a tener más sentido, recuerdas que en la lección anterior creamos un archivo llamado route.xml que tenía dos parámetros y uno de ellos era el parámetro id, pues bien aquí es donde entrara en juego ese valor de ese parámetro, para poder identificar que el diseño de esa página es parte de este archivo XML de configuración es necesario utilizar ese valor con su correspondiente nombre de controlador y nombre de la clase de acción.

Vamos a crear este archivo, con el siguiente contenido:

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="2columns-left" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
	<head>
		<title>HolaMundo Landingspage</title>
	</head>
	<body>
		<remove name="wishlist_sidebar" />
	</body>
</page>