Diseños personalizados y plantillas con Magento

En la primera parte de esta serie, aprendimos los conceptos básicos del desarrollo del módulo Magento, incluida la estructura del directorio de Magento, la estructura del módulo personalizado, y creamos un módulo básico "Hello World" para comprender cómo funcionan los controladores en Magento.. 

En este artículo, aprenderemos cómo crear archivos de bloques y diseños. Específicamente, veremos cómo funcionan los archivos de diseño y los archivos de bloques en Magento y veremos la representación de los archivos de diseño. 

Buscando una solución rápida?

Si está buscando una solución rápida, hay una gran colección de temas y plantillas de Magento en Envato Market. Es una excelente manera de crear rápidamente una colección de artículos de baja calidad de baja poli para su proyecto.

También puede obtener ayuda personalizada contratando a uno de los proveedores de servicios de Magento en Envato Studio.

Pero, ¡con el tutorial! Primero, veremos qué son los archivos de diseño y de bloque y cómo son útiles para representar las páginas de aplicaciones en Magento, y luego veremos cómo podemos incluirlos en nuestro módulo personalizado..

¿Qué es el archivo de diseño?

Como su nombre indica, los archivos de diseño son útiles para renderizar las portadas de Magento. Los archivos de diseño son archivos XML que se encuentran en la aplicación> diseño> interfaz> su interfaz> su tema> diseño. Aquí, puede ver que hay muchos archivos de diseño para cualquier módulo dado. Cada módulo Magento tiene sus propios archivos de diseño al igual que el módulo del cliente tiene cliente.xmlarchivo de diseño, módulo de catálogo tiene catalog.xmlarchivo de diseño, etc. Estos archivos de diseño contienen bloques estructurales y bloques de contenido. 

Si se está preguntando por qué Magento necesita estos bloques, puede aprender más sobre esto en la primera parte de la serie..

Vamos a cavar más en archivos de diseño

Vamos a profundizar en los archivos de diseño mirando un ejemplo. Ir a la aplicación> diseño> frontend> base> diseñoy abre el cliente.xmlexpediente. Aquí, todos los bloques se envuelven alrededor de la principal etiqueta. Puedes ver los diferentes que contiene bloques específicos. 

Vea el siguiente fragmento de código:

  Formulario de registro de cuenta de cliente          Campos de formulario antes    

Encargarse de

Los identificadores son la entidad principal a través de la cual Magento identifica qué bloque cargar cuando se llama a un módulo en particular. es el controlador específico del módulo. Este identificador se activa cuando alguien abre la página de registro de clientes. 

Cada uno maneja el bloque anidado de contenido específico de la página. Algunos de los archivos de diseños contienen encargarse de. En esta etapa, puede preguntar sobre la diferencia entre los controladores específicos del módulo y los controladores predeterminados. En resumen, los manejadores específicos del módulo solo representan los bloques dentro de él cuando ese módulo se procesa en el navegador, mientras que el manejador predeterminado se carga en la mayor parte de la página.

Dentro del manejador hay diferentes bloques diferentes que especifican el archivo de plantilla que se va a representar cuando se llama a ese bloque. Los bloques son de dos tipos: 

1. Bloques Estructuradores
2. Bloques de contenido

En nuestro archivo de diseño estamos definiendo solo el Bloques de contenidoy luego los envolvemos en Sbloques tructurer. Por ejemplo, si alguien está llamando a una página de registro de cliente y queremos cargarla en el lado izquierdo, derecho, contenido o pie de página, envolvemos ese bloque en su respectivo bloque estructurador. Aquí, hemos envuelto dos bloques dentro del bloque "contenido" que es un bloque estructurador. 

Los bloques contienen atributos como los siguientes:

1. tipo Define las clases de bloques en las que podemos definir las diferentes funcionalidades.
2. nombre defineel nombre exclusivo de un bloque en particular para que los otros bloques puedan hacer una referencia del bloque existente por nombre y extenderlo
   
3. antes después son atributos que podemos establecer que nos permiten definir la posición de nuestro bloque dentro del bloque estructurador
4. modelo define lo real phtml Nombre de archivo y ruta donde va nuestro código HTML y PHP
5. acción nos permite activar cualquier acción como cargar JavaScript y todo usando este atributo.
6. como Es un atributo que se usa principalmente para bloques estructuradores.

los La etiqueta se usa para extender los bloques que ya existen. En este caso, hemos ampliado el bloque de contenido e insertado nuestro propio bloque en él. Debe usar el nombre de bloque correcto que desea extender.

los  La etiqueta se usa para eliminar el bloque específico. Por ejemplo, diga que en la página de registro de su cuenta, no desea mostrar las columnas derecha e izquierda. En ese caso, simplemente puede eliminar ese bloque con la siguiente sintaxis .

Niño

Cuando envuelve un bloque debajo de otro bloque, ese bloque envuelto se llama bloque hijo. Cuando nuestro módulo principal llama a nuestro bloque principal, el bloqueo secundario se llama automáticamente.

También puede llamar al bloqueo secundario por separado con la siguiente sintaxis en su archivo de plantilla
echo $ this-> getChildHtml ('child');

raíz

Abierto page.xmlarchivo de diseño, encontrará el bloque que se ve abajo

Magento comienza a renderizar desde el bloque raíz. Todos los otros bloques son bloques hijos del bloque raíz. El bloque raíz define la estructura de la página. Aquí, puedes ver que actualmente está configurado para 3columns.phtml, puedes cambiar esto a 1column.phtml, 2columns-right.phtml o 2columns-left.phtml.

Adición de CSS y JavaScript al diseño XML

Para cualquier página en particular, puede agregar archivos CSS y JavaScript en la etiqueta de diseño de esta manera:

  css / styles.css    

Aquí puede ver que hemos agregado un archivo CSS y un archivo JavaScript dentro de cabeza de nuestra página de cuenta de cliente.

¿Cuáles son las clases de bloque?

Las clases de bloque se utilizan para definir las funciones que son específicas de un bloque en particular. Las clases de bloque de archivos residen en aplicación> código> local / community / core> espacio de nombres de su módulo> nombre de su módulo> Bloqueardirectorio. Este archivo contiene las funciones que podemos usar directamente con $ estopalabra clave en el archivo de plantilla específica de bloque. Tomemos un ejemplo para entender las clases de bloques..

Ir review.xml archivo que reside en aplicación> diseño> frontend> base> predeterminado> diseño directorio y encontrar la siguiente línea de código:

Aquí puedes ver el bloque. review / customer_recentque se refieren a la plantilla recent.phtml. Ir aplicación> diseño> frontend> base> predeterminado> plantilla> revisión> clientey abierto recent.phtml. 

En este archivo, puedes ver dos funciones que son llamadas usando $ esto palabra clave. Son $ this-> getCollection () y $ esto-> contar (). Estas funciones se definen en su archivo de clases de bloque. recent.php que reside en aplicación> código> núcleo> Mago> revisión> Bloquear> clientedirectorio.

Aquí, el bloque. type = "review / customer_recent" se refiere a  Mage_Review_Block_Customer_Recent clase de bloque que se define en recent.php expediente. Cualquiera que sea la función que defina en esta clase, puede usarla directamente en el archivo de plantilla correspondiente con $ esto.

Creación de diseño de módulo personalizado y archivos de bloque

Por último, nos quedamos con el módulo personalizado "Hello World" con el controlador. Aquí, creamos el archivo de diseño de nuestro módulo personalizado. Así que vamos a crearlo.

Para crear el archivo de diseño, primero debemos crear el archivo de clase de bloque. Antes de agregar el archivo de clase, debemos informarle a nuestro módulo que estamos incluyendo los archivos de bloque. Así que ve a app> code> local> Chiragdodia> Mymodule> etc>config.xmly agregue la siguiente línea de código:

    mymodule.xml         Chiragdodia_Mymodule_Block   

El archivo XML final contiene las siguientes líneas de código:

    0.1.0       estándar  Chiragdodia_Mymodule mymodule       mymodule.xml         Chiragdodia_Mymodule_Block    

Crear el archivo de clase de bloque

A continuación, vaya a app> code> local> Chiragdodia> Mymodule> Blocky crea el archivo Mymodule.phpque contiene las siguientes líneas de código

Aquí hemos declarado la clase. Chiragdodia_Mymodule_Block_Mymodule que contiene la función mi funcion que podemos llamar directamente desde nuestro archivo de plantilla de diseño.
Crear el archivo XML de diseño
Ir aplicación> diseño> frontend> predeterminado> predeterminado> diseñoy crea el mymodule.xml archivo que contiene las siguientes líneas de código
        
Crear el archivo de plantilla
Ir aplicación> diseño> frontend> predeterminado> predeterminado> plantillay crea el mymodule.phtml expediente. En este archivo, llamaremos a la función. mi funcion Que hemos declarado en nuestra clase de bloque..
mi función (); ?>
Si todo está correcto hasta ahora, verá la salida con el diseño de tres columnas al acceder a la URL yoursite.com/index.php/mymodule/index.
En algunas versiones de Magento, los temas predeterminados no contienen los directorios de diseño y de plantilla. En ese caso, puede crear su diseño y archivo de plantilla en aplicación> diseño> frontend> basedirectorio.
Así es como funcionan los diseños en Magento. En el artículo anterior, creamos el módulo simple "Hello World", en este artículo lo hemos creado usando un archivo de diseño. La estructura de diseño de Magento es un poco difícil de entender al principio, pero una vez que comiences a jugar con ella, obtendrás fácilmente la idea.. 
En esta publicación, he adjuntado los archivos de demostración del módulo que hemos creado hasta ahora. Siéntase libre de comentar y hacer cualquier pregunta que pueda tener sobre este tema en particular.



		
			
	   
	




Código