Comercio Electrónico y Magento

Conceptos avanzados sobre Layouts

Como ya hemos visto anteriormente, los temas de Magento se dividen en tres partes:

Layout
Template
Locale

En locale encontraremos los ficheros de traducción, y, quizá, sea en template donde encontremos ficheros que contengan algo a lo que estamos más acostumbrado, código html. Sin embargo, es está tercera parte, layout, la que quizá nos cause un poco más de dificultad para entender su funcionamiento.

En este apartado vamos a avanzar un poco más en el concepto de layout, e intentar aclarar todas las dudas que podamos tener.

Tal y como vimos, los ficheros de layout se encuentran en:

app -> design -> frontend -> interfaz -> tema -> layout

En realidad, cada modulo de Magento, puede definir cual será su fichero de layout. ¿Donde podemos ver de que modulos de Magento disponemos? Bien, en realidad lo podemos ver en tres sitios, si navegamos a app → code, veremos estos tres directorios:

community → donde podemos encontrar modulos que hayamos instalado en Magento a través de Magento Connect. Son modulos de third-parties.
core → (mage) aquí podemos ver los modulos que vienen instalados en Magento por defecto, y, en realidad, son necesarios para el correcto funcionamiento de la instalación.
local → normalmente cuando desarrollemos nuestros propios modulos, los crearemos dentro de esta carpeta.

Por ejemplo, tomemos el modulo que hemos creado anteriormente, el modulo de noticias, que podemos encontrar dentro de local, en el espacio CURSO. Dentro de noticias → etc → config.xml

Este fichero de configuración contiene los parámetros de configuración del modulo, entre ellos que layout utilizará. Esto lo podemos ver en:

<use>standard</use>

<args>

<module>CURSO_Noticias</module>

<frontName>noticias</frontName>

</args>

</noticias>

</routers>

<file>noticias.xml</file>

</noticias>

</updates>

</layout>

</frontend>

Hay que notar como define el layout noticias.xml, y este fichero de layout lo podemos encontrar dentro de un tema, por ejemplo app → design → frontend → default → blank_seo → layout → noticias.xml:

</default>

<noticias_index_index>

<block type=”noticias/noticias” name=”noticias” template=”noticias/noticias.phtml” />

</reference>

</noticias_index_index>

</layout>

Y ya dentro del layout, indicamos que template va a utilizar, y donde lo encontrará, en este caso template → noticias → noticias.phtml

Durante el proceso de carga de cualquier página, Magento utilizará todos los ficheros de layout necesarios para montar toda la estructura y en que posición deberá aparecer cada modulo.

Layout Handles

Los handles, o manejadores, son los elementos que indican que parte del fichero de layout se debe de cargar en cada página. Normalmente el handle a utilizar se sabe en base al controlador, y a la acción del mismo, tomemos como ejemplo nuestro layout de noticias:

<?xml version=”1.0″?>

</default>

<noticias_index_index>

</reference>

</noticias_index_index>

</layout>

En este caso podemos ver dos handles, por un lado default, y por otro, noticias_index_index. El handle default se carga siempre, en todas las páginas. Y, el otro handle, noticias_index_index solo en el caso de que se esté utilizando el modulo noticias, con su controlador index, en su acción index.

¿Cuando se cargará este handle? Por ejemplo cuando se llame a esta URL:

http://www.localhost.com/proyecto-mg/noticias

Vemos por un lado el modulo, noticias, pero no tenemos un controlador, ni una acción, ese caso, podría ser el siguiente caso:

http://www.localhost.com/proyecto-mg/catalogsearch/term/popular/

En este caso vemos como se cargaría el modulo catalogsearch, controlador term, acción popular. Si indagamos un poco en app → design → frontend → base → default → layout → catalogsearch.xml, podemos navegar y encontrar el bloque html donde se especifica el handle para dicha página:

<catalogsearch_term_popular translate=”label”>
<label>Popular Search Terms</label>
<remove name=”right”/>
<remove name=”left”/>

<reference name=”root”>
<action method=”setTemplate”><template>page/1column.phtml</template></action>
</reference>
<reference name=”content”>
<block type=”catalogsearch/term” name=”seo.searchterm” template=”catalogsearch/term.phtml”/>
</reference>
</catalogsearch_term_popular>

Layout elements

Cada layout handle puede estar formado por los siguientes elementos:

label → introducido a partir de la versión 1.4 de Magento, se utiliza como descripción en algunas partes de la zona de administración de Magento.
Reference → este elemento se utiliza para enlazar con bloques anteriormente definidos en cualquier fichero de layout. Para añadirle más bloques, modificarlos etc El elemento reference debe tener un atributo name que se refiera al bloque ya existente.Esto se ve más fácilmente con un ejemplo, veamos, si miramos dentro de page.xml (de blank_seo template por ejemplo), podemos encontrar el siguiente código: <block type=”core/text_list” name=”content” as=”content” translate=”label”> <label>Main Content Area</label>
</block>

Y dentro de noticias.xml podemos ver:

<reference name=”content”>
<block type=”noticias/noticias” name=”noticias” template=”noticias/noticias.phtml” />
</reference>

De manera que desde noticias.xml estamos añadiendo más bloques a los que ya se cargaban dentro del bloque de page.xml con nombre igual a content.
Block → este elemento se utiliza para definir un nuevo bloque. Debe tener un atributo name, y un atributo type que viene dado por el nombre de la clase del bloque. Además puede tener el atributo template (con algunas restricciones) que indicará el template a utilizar.<block type=”noticias/noticias” name=”noticias” template=”noticias/noticias.phtml” />
action → define una acción para que sea ejecutada en el bloque referenciado, o creado. Equivale a un método de la instancia del bloque que se está ejecutando. Por ejemplo:<catalog_product_view>
<reference name=”root”>
<action method=”setTemplate”>
<template>page/1column.phtml</template>
</action>
</reference>

En este caso estaríamos cambiando el template de root, definiendo que ahora debe usar 1column.phtml

Existen otros elementos, como remove y update. Pero nos quedaremos con los anteriores por ser los más comunes.

El proceso de interpretación (rendering)

Durante el proceso de carga e interpretación de las páginas se cargán todos los bloques, bloques anidados con sus elementos hijos. Para que un bloque salga por pantalla debe tener el atributo output, por ejemplo, tal y como lo encontramos en el layout page.xml:

En el layout page.xml este bloque se encuentra en la posición de bloque principal, por lo tanto todos los bloques hijos serán renderizados también, no será necesario añadirles el atributo output a todos los bloques hijos.

Tipos de bloque

Los tipos de bloque más comunes son los siguientes:

core/template → este bloque muestra un template definido por su atributo template. La mayoria de bloques definidos en el layout son de tipo, o subtipo core/template.
page/html → es un subtipo de core/template y define el bloque raiz (root). Todos los demas bloques son bloques hijos de este bloque. Como podemos ver en layout.xml:<block type=”page/html” name=”root” output=”toHtml” template=”page/3columns.phtml”>
page /html_head → define la seccion head de HTML, conteniendo los elementos JavaScript, CSS etc
page/html_header → define la parte de la página que contendrá el logo, links de la parte superior etc
page/template_links → este bloque muestra una lista de links, visible en el pie y la cabecera.
core/text_list → algunos bloques, como content, left, right son de tipo core/text_list. Cuando estos bloques son mostrados, todos sus bloques hijos son mostrados automáticamente, sin necesidad de utilizar el método getChildHtml().
page/html_wrapper → este bloque se utiliza para crear un bloque contenedor, que muestra sus bloques hijo dentro de una etiqueta HTML definida en la acción setHtmlTagName. Por defecto utiliza un <div>
page/html_breadcrumbs → muestra los breadcrumbs de la página.
page/html_footer → muestra el area del pie, que contiene los links del pie, el mensaje del copyright etc
core/messages → este bloque muestra mensajes de error, noticias informativas etc
page/switch → este bloque puede ser utilizado para mostrar el selector de idioma, tienda etc

Ejercicios

Vamos ahora a hacer unas pequeñas pruebas que resuman un poco todos estos conceptos, y nos ayuden a comprender mejor la lógica que relaciona todos los elementos.

Localizar donde están los elementos de la columna derecha

Si miramos las ayudas de magento no se ve que estén dentro de un template mayor, veamos una imagen:

Podemos ver varios modulos, ¿Podemos esperar encontrar un template right.phtml con instrucciones como <?php echo $this->getChildHtml(‘sidebar’) ?> ? Eso es lo que tenemos que ver ahora.

Solución

Como hemos comentado antes, las columnas son de tipo core/text_list lo que quería decir que los bloques hijos de este bloque se cargarán sin necesidad de tener que hacer llamadas getChildHtml. Si vemos por ejemplo app → design → frontend → default → f002 → layout → page.xml, si buscamos encontraremos el siguiente código:

<block type=”core/text_list” name=”right” as=”right” translate=”label”>
<label>Right Column</label>
</block>

Vemos como se define el bloque, pero no hay nada en su interior. Ahora veamos app → design → frontend → default → f002 → template → page → 3columns.phtml, aquí tenemos el siguiente código:

<div class=”col-right sidebar”><?php echo $this->getChildHtml(‘right’) ?></div>

No será necesario que busquemos algo similar a right.phtml, ya que no existe. Pensemos otra cosa. Hemos dicho que podemos añadir bloques de un layout a otro anteriormente creado, referenciandolo. Si hacemos una búsqueda de reference name=”right”, veremos que aparece en varios layouts, por ejemplo en app → design → frontend → default → f002 → layout → tag.xml:

</default>

Aquí vemos como hacemos referencia (reference) al bloque anteriormente definido con nombre right, y le añadimos un bloque, de tipo tag/popular, que utilizará el template tag/popular.phtml. Y así con el resto de layouts que además añaden bloques al bloque right de page.xml

Localizar donde se crean los enlaces del pie

Si echamos un vistazo al tema que estamos utilizando, en el pie podremos ver la siguiente lista de enlaces:

¿De donde salen estos enlaces? Esa es la tarea, ¡vamos localizarlos!

Solución

En realidad estos enlaces tienen muchas fuentes de origen, así, a primera vista, podemos pensar que estarían en CMS → Bloques estáticos, ahí tenemos un bloque llamado Footer Links, si abrimos ese bloque, solo veremos dos enlaces:

About Us
Customer Service

¡Pero estos enlaces ni siquiera aparecen en el pie! Vamos a indagar un poquito en nuestro template, el primer vistazo, por lógica sería en un layout, por ejemplo app → design → frontend → default → f002 → layout → page.xml, navegando por el fichero podemos encontrar el siguiente código:

<block type=”page/html_footer” name=”footer” as=”footer” template=”page/html/footer.phtml“>
<block type=”page/html_wrapper” name=”bottom.container” as=”bottomContainer” translate=”label”>
<label>Page Footer</label>
<action method=”setElementClass”><value>bottom-container</value></action>
</block>
<block type=”page/switch” name=”store_switcher” as=”store_switcher” template=”page/switch/stores.phtml”/>
<block type=”page/template_links” name=”footer_links” as=”footer_links” template=”page/template/links.phtml”/>
</block>

Por un lado vemos el bloque que generará la zona del pie page/html_footer, este bloque indica el uso de un template, footer.phtml, si abrimos este fichero, podemos ver el siguiente código:

<div class=”informational”>
<?php echo $this->getChildHtml(‘footer_links’) ?>
<?php echo $this->getLayout()->createBlock(‘cms/block’)->setBlockId(‘payments’)->toHtml();?>
</div>

Aquí estamos cargando footer_links, que había sido definido dentro del bloque page/html_footer, como un bloque hijo:

<block type=”page/template_links” name=”footer_links” as=”footer_links” template=”page/template/links.phtml”/>

Entonces, cuando llamemos a getChildHtml(‘footer_links’), se cargará el fichero page/template/links.phtml, ¿Estarán ahí nuestros enlaces? Veamoslo, abriremos el fichero app → design → frontend → base → default → template → page → template → links.phtml:

<?php $_links = $this->getLinks(); ?>
<?php if(count($_links)>0): ?>
<ul<?php if($this->getName()): ?> id=”<?php echo $this->getName() ?>”<?php endif;?>>
<?php foreach($_links as $_link): ?>
<li<?php if($_link->getIsFirst()||$_link->getIsLast()): ?> class=”<?php if($_link->getIsFirst()): ?>first<?php endif; ?><?php if($_link->getIsLast()): ?> last<?php endif; ?>”<?php endif; ?> <?php echo $_link->getLiParams() ?>><?php echo $_link->getBeforeText() ?><a href=”<?php echo $_link->getUrl() ?>” title=”<?php echo $_link->getTitle() ?>” <?php echo $_link->getAParams() ?>><?php echo $_link->getLabel() ?></a><?php echo $_link->getAfterText() ?></li>
<?php endforeach; ?>
</ul>
<?php endif; ?>

Pues no, no encontramos los links aquí, sin embargo tenemos un código que realiza un bucle, y muestra unos enlaces. ¿Entonces estos links provienen de la base de datos? No parece existir en el panel de administración ninguna zona donde insertar y gestionar links. Vamos a retroceder un poco, concretamente volveremos al fichero app → design → frontend → default → f002 → layout → page.xml:

<block type=”page/html_footer” name=”footer” as=”footer” template=”page/html/footer.phtml”>
<block type=”page/html_wrapper” name=”bottom.container” as=”bottomContainer” translate=”label”>
<label>Page Footer</label>
<action method=”setElementClass”><value>bottom-container</value></action>
</block>
<block type=”page/switch” name=”store_switcher” as=”store_switcher” template=”page/switch/stores.phtml”/>
<block type=”page/template_links” name=”footer_links” as=”footer_links” template=”page/template/links.phtml”/>
</block>

Vemos que el bloque carga los links es de tipo page/template_links, como es de tipo page estará situado en app → code → core → Mage → Page, luego el tipo nos indica template, así que si miramos dentro de la carpeta → Page → Block, veremos una carpeta llamada template, y dentro un fichero llamado Links.php, abramos dicho fichero.

Si recordamos dentro de nuestro fichero links.phtml teníamos el siguiente código:

<?php $_links = $this->getLinks(); ?>

Y en links.php podemos ver un método getter:

public function getLinks()
{
return $this->_links;
}

Que devuelve el valor del atributo protegido $_links:

protected $_links = array();

Si indagamos un poco más por el fichero links.php no veremos ningún método desde el que se pudiera acceder a la base de datos y recoger links, pero si veremos un metodo add:

public function addLink($label, $url=”, $title=”, $prepare=false, $urlParams=array(),
$position=null, $liParams=null, $aParams=null, $beforeText=”, $afterText=”)

Si buscásemos addLink, veríamos que aparece en gran número de layouts, por ejemplo en app → design → frontend → base → default → layout → contacts.xml:

<reference name=”footer_links”>
<action method=”addLink” translate=”label title” module=”contacts” ifconfig=”contacts/contacts/enabled”><label>Contact Us</label><url>contacts</url><title>Contact Us</title><prepare>true</prepare></action>
</reference>

Vemos como hace referencia al bloque footer_links, de manera que el código que haya dentro acabará ejecutándose en aquel bloque. En este caso es un bloque de tipo action, que ejecutará el método addLink, el modulo es contacts (contacts.xml), y le indicamos el label, la url, el title etc

Cuando se está renderizando la página, se ejecutan todos estos trocitos de xml que van añadiendo links, que más tarde serán mostrados. Un poco enrevesado, pero es un buen ejemplo de la relación de todos los elementos de Magento.

De todas maneras, nos queda por aclarar que pasa con el bloque de footer links que había en CMS –> Bloques estáticos. Imaginemos que queremos añadir ese bloque, en nuestro template, por ejemplo en el fichero footer.phtml, justo después de los otros links:

<div class=”informational”>
<?php echo $this->getChildHtml(‘footer_links’) ?>
<?php echo $this->getLayout()->createBlock(‘cms/block’)->setBlockId(‘payments’)->toHtml();?>
</div>

Lo haríamos tal que así:

<div class=”informational”>
<?php echo $this->getChildHtml(‘footer_links’) ?>
<?php echo $this->getLayout()->createBlock(‘cms/block’)->setBlockId(‘footer_links’)->toHtml();?>
<?php echo $this->getLayout()->createBlock(‘cms/block’)->setBlockId(‘payments’)->toHtml();?>
</div>

De manera que, además de recoger los links insertados en los layouts, también mostraria los links del bloque estático.

Añadir un bloque con una imágen a la columna izquierda

En este pequeño ejercicio vamos a añadir una pequeña imagen en la columna izquierda , cuando estemos dentro de las categorías de catálogo, por ejemplo en:

http://www.localhost.com/proyecto-mg/furniture.html

Para añadir esta imagen vamos a crear un nuevo bloque, que llame a un template phtml, y, en última instancia muestre la imágen.

Solución

En este caso, como queremos que el banner o imagen, se muestre cuando estemos en las páginas de catálogo, trabajaremos en el fichero app → design → frontend → default → f002 → layout → catalog.xml

Vamos a buscar la etiqueta <default>, y añadiremos ahí nuestro bloque, podemos basarnos en bloques de otros banners como ejemplo, y colocaremos dentro de <reference name=”left”> un código similar al siguiente:

<block type=”core/template” name=”store_banner” as=”store_banner” template=”page/html/banner.phtml“>
<action method=”setImgSrc”><src>images/media/col_left_callout-1.jpg</src></action>
<action method=”setImgAlt” translate=”alt” module=”catalog”><alt>Our customer service is available 24/7. Call us at (800) DEMO-NUMBER.</alt></action>
<action method=”setLinkUrl”><url>checkout/cart</url></action>
</block>

Aquí estamos definiendo el bloque de tipo core/template, que nos servirá para crear bloques de html simple. El siguiente parámetro es el name, que nos servirá por si posteriormente necesitamos referenciar el bloque. El parametro as, en caso de que queramos invocar el bloque con getChildHtml, y, por último el template a utilizar.

Si miramos el template, app → design → frontend → default → f002 → template → page → html → banner.phtml:

banner 1

<div>
<?php if (strtolower(substr($this->getLinkUrl(),0,4))===’http’): ?>
<a href=”<?php echo $this->getLinkUrl() ?>”>
<?php elseif($this->getLinkUrl()): ?>
<a href=”<?php echo $this->getUrl($this->getLinkUrl()) ?>”>
<?php endif ?>
<img src=”<?php echo $this->getSkinUrl($this->getImgSrc()) ?>” width=”195″ alt=”<?php echo $this->__($this->getImgAlt()) ?>” style=”display:block;” />
<?php if ($this->getLinkUrl()): ?>
</a>
<?php endif ?>
</div>

Con esto ya tendríamos nuestro banner creado, pero, no habría una forma más sencilla de crearlo, ya que solo queremos mostrar una imágen. Volvamos a catalog.xml, justo debajo del bloque que acabamos de crear, añadiremos el siguiente:

Mucho más corto, y con una novedad, before=”store_banner”, con esto le indicamos que este bloque, deberá aparecer sobre el bloque con name=”store_banner”. Y, si la definición del bloque es más corta, que pasará con el template? Veamoslo:

banner 2

<div>
<img src=”<?php echo $this->getSkinUrl() ?>images/media/col_left_callout-1.jpg” width=”195″ alt=”" style=”display:block;” />
</div>

Simplificado también, ¿Y el resultado? Veamoslo:

Justo lo que queríamos.

Añadir un bloque de noticias

En este ejercicio vamos a ver como podemos añadir un bloque de noticias en nuestra columna izquierda, visible cuando los visitantes accedan a la pantalla de catálogo, por ejemplo:

http://www.localhost.com/proyecto-mg/furniture.html

Más o menos debe quedar así:

Solución

La creación de este bloque se divide en varios pasos:

Primero, crear el bloque, lo haremos en app → code → local → curso → noticias → block → lista.php y tendrá el siguiente contenido:

<?php

class Curso_Noticias_Block_Lista extends Mage_Core_Block_Template

{

public function _prepareLayout()

{

return parent::_prepareLayout();

}

public function getLista()

{

return Mage::getModel(‘noticias/noticias’)->getCollection();

}

Segundo, preparar un template para el bloque, app → design → frontend → default → f002 → template → noticias → lista.phtml:

<h4>Listado de noticias</h4>

<?php

$noticias = $this->getLista();

foreach ($noticias as $item) {

echo $item->getTitle();

echo “<br/>”;

echo $item->getContent();

echo “<br/><br/>”;

}

Tercero, invocar el modulo, desde app → design → frontend → default → f002 → layout → noticias.xml:

<catalog_category_layered translate=”label”>

</reference>

</catalog_category_layered>

O desde app → design → frontend → default → f002 → layout → catalog.xml:

<catalog_category_layered translate=”label”>
…
</reference>
<reference name=”left”>
<block type=”noticias/lista” name=”noticias” as=”noticias” template=”noticias/lista.phtml”/>
</reference>
</catalog_category_layered>

Posibilitar que desde el bloque de noticias se acceda al detalle de la noticia, y utilizar un template de una sola columna

El primer paso que vamos a dar para solucionar este tema será crearnos un nuevo controlador, en este caso lo emplazaremos en app -> code -> local -> curso -> noticias -> controllers -> DetalleController.php con el siguiente contenido:

<?php

class Curso_Noticias_DetalleController extends Mage_Core_Controller_Front_Action

{

public function verAction()

{

/* Listado de métodos */

$read = Mage::getSingleton(‘core/resource’)->getConnection(‘core_read’);

echo ‘<pre>’;

print_r(get_class_methods($read));

echo ‘</pre>’;

$id = $this->getRequest()->getParam(‘id’);

$read = Mage::getSingleton(‘core/resource’)->getConnection(‘core_read’);

$select = $read->select()->from(‘noticias’, array(‘noticias_id’,'title’,'filename’,'content’))->where(‘noticias_id =?’, $id);

$noticia = $read->fetchRow($select);

Mage::register(‘noticia’, $noticia);

$this->loadLayout();

$this->renderLayout();

}

Notar que la clausula where guarda el formato tipico de Zend framework, (‘noticias_id =?’, $id);, de hecho conocer como trabaja Zend Framework para generar las consultas nos será útil:

http://framework.zend.com/manual/en/zend.db.select.html

También podriamos hacer queries de tipo RAW, es decir creando nosotros toda la query sin usar Active Record:

http://www.sycha.com/magento-database-models-helpers-raw-sql-queries

El siguiente paso será modificar el fichero app -> design -> frontend -> default -> f002 -> template -> noticias -> lista.phtml y lo modificaremos para que los titulos de las noticias sean enlaces:

<h4>Listado de noticias</h4>

<?php

$noticias = $this->getLista();

foreach ($noticias as $item) {

<a href=”<?php echo $this->getUrl(‘noticias/detalle/ver’); ?>id/<?php echo $item->getNoticias_id();?>”>

<?php

echo $item->getTitle();

echo “</a>”;

echo “<br/>”;

echo $item->getContent();

echo “<br/><br/>”;

}

Necesitaremos tambien un template de detalle, por ejemplo, app -> design -> frontend -> default -> f002 -> template -> noticias -> detalle.phtml , con el siguiente contenido:

<h4>Detalle noticia</h4>

<?php

$noticia = Mage::registry(‘noticia’);

echo ‘Id: ‘ . $noticia['noticias_id'] . “<br/><br/>”;

echo ‘Title: ‘ . $noticia['title'] . “<br/><br/>”;

echo ‘Content: ‘ . $noticia['content'] . “<br/><br/>”;

El último paso será modificar el fichero app -> design -> frontend -> default -> f002 -> layout -> noticias.xml, añadiremos el código en negrita:

<?xml version=”1.0″?>

</default>

<catalog_category_layered translate=”label”>

</reference>

</catalog_category_layered>

<noticias_detalle_ver>

<reference name=”root”>

<action method=”setTemplate”>

<template>page/1column.phtml</template>

</action>

</reference>

<reference name=”content”>

<block type=”noticias/noticias” name=”noticias” template=”noticias/detalle.phtml” />

</reference>

</noticias_detalle_ver>

<noticias_index_index>

</reference>

</noticias_index_index>

</layout>

Publicado: 17 enero 2011 у 12:34
Categorías:

Conceptos avanzados sobre Layouts

Layout Handles

Layout elements

El proceso de interpretación (rendering)

Tipos de bloque

Ejercicios

Localizar donde están los elementos de la columna derecha

Solución

Localizar donde se crean los enlaces del pie

Solución

Añadir un bloque con una imágen a la columna izquierda

Solución

Añadir un bloque de noticias

Solución

Posibilitar que desde el bloque de noticias se acceda al detalle de la noticia, y utilizar un template de una sola columna

Dejar un comentario

Páginas

Archivo

Categorías

Meta