Diseños y temas personalizados con Magento

() translation by (you can also view the original English article)

En la primera parte de esta serie, hemos aprendido los conceptos básicos de desarrollo de un módulo para Magento incluyendo la estructura de directorios de Magento, la estructura personalizada para un módulo, y hemos creado un módulo básico "Hello World" con el fin de entender cómo los controladores trabajan en Magento.

En este artículo, vamos a aprender a crear bloques y archivos de diseño. Especificamente, vamos a ver cómo los archivos de diseño y los archivos de bloques trabajan en Magento y vamos a ver la reproducción de archivos de diseño.

En primer lugar, vamos a ver lo que los archivos de diseño y de bloque son y cómo son útiles en la prestación de la interfaz de usuario en Magento, y luego vamos a ver cómo podemos incluirlos en nuestro módulo personalizado.

¿Qué es el archivo de diseño?

Como su nombre indica, archivos de diseño son útiles en la prestación de la interfaz de usuario en Magento. Archivos de diseño son archivos XML que residen en app > design > frontend > tu interface > tu tema > layout. Aquí, puedes ver que hay muchos archivos de diseño para cualquier módulo. Cada módulo en Magento tiene sus propios archivos de diseño, el módulo customer (CLiente) tiene el archivo de diseño customer.xml, el módulo de catalog (Catálogo) tiene el archivo de diseño catalog.xml etc. Estos archivos de diseño contienen bloques estructurados y bloques de contenido.

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

Vamos a profundizar más en los Archivos de Diseño.

Vamos a profundizar más en los archivos de diseño mirando un ejemplo. Ve a app > design > frontend > base > y abre el archivo customer.xml. Aquí, todos los bloques se encuentran dentro de la etiqueta principal <layout>. Usted puede ver las <tag> diferentes que contiene bloques específicos.

Véase el fragmento a continuación:

<!--
Nuevo registro de cliente
-->

    <customer_account_create translate="label">
        <label>Customer Account Registration Form</label>
        <!-- Mage_Customer -->
        <remove name="right"/>
        <remove name="left"/>

        <reference name="root">
            <action method="setTemplate"><template>page/1column.phtml</template></action>
        </reference>
        <reference name="content">
            <block type="customer/form_register" name="customer_form_register" template="customer/form/register.phtml">
                <block type="page/html_wrapper" name="customer.form.register.fields.before" as="form_fields_before" translate="label">
                    <label>Form Fields Before</label>
                </block>
            </block>
        </reference>
    </customer_account_create>

Manejador

Los manejadores son la entidad principal a través del cual Magento identifica que bloque cargará cuando se está llamando un módulo en particular. <customer_account_create> es el manejador específico del módulo. Este manejador se dispara cuando alguien abre la página de registro del cliente.

Cada manejador de bloque de contenido anidado específico a la página. Algunos de los archivos de diseño contienen el <default> manejador (Manejador Predeterminado). En esta etapa, te puedes preguntar acerca de la diferencia entre manejador-específico de módulos y manejador predeterminado. En resumen manejador-específico del módulo sólo reproduce los bloques en su interior cuando está comenzando a reproducir en el navegador, mientras que el manejador predeterminado carga en la mayor parte de la página.

<block> (Bloque)

En el interior del manejador hay los bloques diferentes que especifican el archivo de plantilla que será reproducido cuando se está llamando de ese bloque. Los bloques son de dos tipos:

Bloques estructurador
Bloques de contenido

En nuestro archivo de diseño estamos definiendo sólo los Bloques de contenido luego los envolvemos en Bloques estructurador. Por ejemplo, si alguien está llamando a una página de registro de cliente y queremos cargarlo en la izquierda, derecha, contenido, o pie de página, envolvemos ese bloque en su respectivo bloque estructurador. Aquí, hemos envuelto dos bloques dentro del bloque de "content", que es un bloque estructurador.

Bloques contiene atributos como siguiente:

type (Tipo) define las clases de bloque en la que podemos definir la funcionalidad diferente
name (Nombre) define el nombre único de un bloque en particular por lo que los otros bloques pueden hacer una referencia a un bloque existente por su nombre y extenderlo
before/after (Antes y Después) son atributos que podemos establecer para que nos permita definir la posición de nuestro bloque dentro del bloque estructurador
template (Plantilla) define el nombre del archivo phtml real y la ruta donde va nuestro código HTML y PHP
action (Acción) nos permite activar cualquier acción como cargar JavaScript y todo mediante el uso de este atributo
as (Como) es un atributo que se utiliza principalmente para bloques estructurador

<reference> (Refencia)

La etiqueta <reference> (Referencia) se utiliza para ampliar los bloques que ya existen. En este caso, hemos extendido el bloque de contenidos e insertamos nuestro propio bloque en ella. Debes utilizar el nombre de bloque correcto que desee extender.

<remove> (Remover)

La etiqueta <remove> (Remover) es usada para quitar un bloque específico. Por ejemplo, digamos que en tu página de registro de cuenta, no quieres mostrar las columnas de la derecha y la izquierda. En ese caso, puedes simplemente eliminar ese bloque con la siguiente sintaxis <remove name="your block name">.

Child <block> (Bloque Hijo)

Cuando envolvemos un bloque dentro de otro bloque, ese bloque envuelto se llama bloque hijo. Siempre que nuestro bloque padre es llamado por nuestro módulo, el bloque hijo se llama automáticamente.

1	<block type='core/template' name='parent' template='parent.phtml'>
2	<block type='core/template' name='child' template='child.phtml'/>
3	</block>

Puedes llamar bloques hijo por separado también con la sintaxis a continuación en tu archivo de plantilla echo $this->getChildHtml(‘child');

root <block> (Bloque Raíz)

Abre el archivo de diseño page.xml, y vas a encontrar el bloque <root> que se parece al siguiente:

1	<block type="page/html" name="root" output="toHtml" template="page/3columns.phtml">

Magento comienza a reproducir desde el bloque raíz. Todos los demás bloques son bloques hijo del bloque raíz. El bloque de raíz define la estructura de la página. Aquí, se puede ver que en la actualmente está configurado a 3columns.phtml, puede cambiarlo a 1column.phtml, 2columns-right.phtml o 2columns-left.phtml.

Agregando CSS y JavaScript para el diseño XML.

Para cualquier página en particular puedes añadir archivos CSS y JavaScript en la etiqueta layout así:

<customer_account_create>
 <reference name='head'>
  <action method="addCss"><stylesheet>css/styles.css</stylesheet></action>
  <action method="addJs"><script>varien/js.js</script></action>
 </reference>
</customer_account_create>

Aquí puedes ver que hemos agregado un archivo CSS y un archivo JavaScript en el head (Cabecera) de nuestra página de la cuenta del cliente.

¿Cuáles son las clases de bloque?

Clases de bloque son usadas para definir las funciones que son específicas de un bloque en particular. Los archivos de Clases de bloque residen en el directorio app > code > local/community/core > Tu namespace del módulo > tu nombre de módulo > Block. Estos archivos contienen las funciones que podemos utilizar directamente con la palabra clave $this en un bloque específico. Vamos a ver un ejemplo para entender las clases de bloque.

Ve al archivo review.xml que se encuentra en el directorio app > design > frontend > base > default > layout busca la siguiente línea de código:

<!--
Diseño del Panel de control de la Cuenta de Cliente
-->

    <customer_account_index>

        <!-- Mage_Review -->
        <reference name="customer_account_dashboard">
            <block type="review/customer_recent" name="customer_account_dashboard_info1" as="info1" template="review/customer/recent.phtml"/>
        </reference>

</customer_account_index>

Aquí se puede ver el bloque review/customer_recent que se refiere a la plantilla recent.phtml. Ve a app > design > frontend > base > default > template > review > customer y abre recent.phtml.

En este archivo, puedes ver dos funciones que se llaman usando la palabra clave $this. Son $this->getCollection() y $this->count(). Estas funciones están definidas en el arvhico de clase de bloque recent.php que se encuentra en el directorio app > code > core > Mage > review > Block > customer.

Aquí, el bloque type = "review/customer_recent" se refiere a la clase de bloques Mage_Review_Block_Customer_Recent que está definida en el archivo recent.php. Sea cual sea las funciones que definas en esta clase, puedes utilizarlas directamente en su correspondiente archivo de plantilla con $this.

Crear Layout personalizado de módulos y archivos de bloque

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

Para crear el archivo de diseño, tenemos que crear primero el archivo de clase del bloque. Antes de añadir el archivo de clase, tenemos que decirle a nuestro módulo que estamos incluyendo los archivos de bloque. Así que ve a app > code > local > Chiragdodia > Mymodule > etc > config.xml y agrega la siguiente línea de código:

<frontend>
<layout>
        <updates>
            <mymodule>
                <file>mymodule.xml</file> <!-- El nombre de archivo de nuestro diseño -->
            </mymodule>
        </updates>
</layout>
</frontend>
<global>
        <blocks>
            <mymodule>
                <class>Chiragdodia_Mymodule_Block</class>
            </mymodule>
        </blocks>
</global>

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

<?xml version="1.0"?>
<config>
    <modules>
        <Chiragdodia_Mymodule>
            <version>0.1.0</version>    <!-- Versión del módulo -->
        </Chiragdodia_Mymodule>
    </modules>
    <frontend>
        <routers>
            <mymodule>
                <use>standard</use>
                <args>
                    <module>Chiragdodia_Mymodule</module>
                    <frontName>mymodule</frontName>
                </args>
            </mymodule>
        </routers>
         <layout>
            <updates>
                <mymodule>
                    <file>mymodule.xml</file> <!-- El nombre de archivo de nuestro diseño -->
                </mymodule>
            </updates>
         </layout>
    </frontend>
    <global>
        <blocks>
            <mymodule>
                <class>Chiragdodia_Mymodule_Block</class>
            </mymodule>
        </blocks>
    </global>
</config>

Crear el archivo de Clase de Bloque

A continuación, vaya a app > code > local > Chiragdodia > Mymodule > Block y cree el archivo Mymodule.php el cual va a contener las siguientes líneas de código:

<?php
class Chiragdodia_Mymodule_Block_Mymodule extends Mage_Core_Block_Template
{
    public function myfunction()
    {
        return "Hello tuts+ world";
    }
}

Aquí hemos declarado la clase Chiragdodia_Mymodule_Block_Mymodule que contiene la función myfunction la que podemos llamar directamente desde nuestro archivo de plantilla de diseño.

Crear el archivo de Diseño XML

Ve a app > design > frontend > default > default > layout y crea el archivo mymodule.xml el cual va a contener las siguientes de líneas de código:

<?xml version="1.0"?>
<layout version="0.1.0">
    <mymodule_index_index>
        <reference name="content">
            <block type="mymodule/mymodule" name="mymodule" template="mymodule/mymodule.phtml" />
        </reference>
    </mymodule_index_index>
</layout>

Crear el archivo de plantilla

Ve a app > design > frontend > default > default > template y crea el archivo mymodule.phtmlEn este archivo, vamos a llamar a la función myfunction que hemos declarado en nuestra clase de bloque.

1	<?php
2	echo $this->myfunction();
3	?>

Si todo es correcto hasta el momento, verás el resultado con tres columnas de diseño si accedes a la dirección tu_sitio.com/index.php/mymodule/index.

En algunas versiones de Magento, los temas predeterminados no contienen los directorios de diseño y plantilla. En ese caso, puedes crear tus archivo de diseño y plantilla en el directorio app > design > frontend > base.

Es así como los diseños trabajan en Magento. En el artículo anterior, habíamos creado un módulo simple "Hello World", en este artículo lo hemos creado usando el archivo de diseño. La estructura de diseño de Magento es un poco difícil de entender al principio, pero una vez que comience a trabajar con él, captarás fácilmente la idea que hay detrás.

En este post, he adjuntado los archivos de demostración del módulo que hemos creado hasta ahora. Siéntete libre de comentar y hacer cualquier pregunta que puedas tener acerca de este tema en particular.

¡Sé el primero en conocer las nuevas traducciones–sigue @tutsplus_es en Twitter!