Entendendo o block do XML – Estrutura de templates

O sistema de templates do Magento é baseado em XML. Diferente da maioria dos sistemas open-source, onde cada página tem uma função definida. No Magento temos os XML’s que constroem a estrutura a ser apresentada, informando quais pedaços de código devem ser carregados, formando assim a página. Esses fragmentos são chamados de blocos.

Devido as possibilidades de configuração de um bloco, podemos caracterizar dois tipos de blocos: Blocos de Estrutura e Blocos de Conteúdo.

Blocos de Estrutura – Ele cria o wireframe da página. Ou seja, são realmente blocos vazios espalhados pela página, que caracterizam um setor do leiaute, como por exemplo um espaço que determina o cabeçado ou o rodapé. E tem por objetivo receber conteúdo.

Blocos de Conteúdo – É o bloco que gera o conteúdo da página. Este bloco é o responsável por carregar o conteúdo e inseri-lo dentro de um bloco de estrutura. Um exemplo bem simples…Temos um bloco de estrutura chamado “content” que é responsável pelo conteúdo central do leiaute. Este conteúdo central é dinâmico, e pode exibir detalhes de um produto, resultados de busca, tela de checkout, que são invocados por um bloco de conteúdo.

E é por isso que ao abrir o xml você encontra blocos dentro de blocos. Uma tag block pode conter dentro de sua estrutura: block, action, e label.

Modularizando

O poder de desenvolvimento de templates no Magento está justamente no uso do XML, que permite essa modularização de conteúdo. Onde você cria um bloco de estrutura para o cabeçalho, e ele fica disponível a todo momento, podendo receber o conteúdo que você quiser (logo, banners, links, carrinho de compras, etc.)

Agora que você já possui uma idéia mais clara do que são blocos e para que servem, vamos conhecer um pouco mais seus atributos.

type

Todo bloco tem seu type, ou seja, precisamos especificar o tipo do bloco. O tipo na verdade indica o nome/caminho de uma classe, que possui funcionalidades básicas para a construção do conteúdo. Como no exemplo citado:

<block type="page/html"...

Então “page/html” invoca a classe Html.php que fica no diretório de blocos Page:

app/code/core/Mage/Page/Block/Html.php

name

O nome do bloco é outro parâmetro que não pode faltar. Afinal, precisamos identificar os blocos de alguma forma. Procure utilizar nomes simples que representem a funcionalidade do bloco, e não use nomes repetidos.

<block type="page/html" name="root"...

Apesar de parecer um parâmetro simples, ele é extremamente importante para modularizar os blocos. Já que o nome serve como referência para inserirmos conteúdo dinâmicamente (tag reference que veremos em outro post).

Apenas type e name são obrigatórios, os demais são opcionais dependendo do tipo de bloco que você deseja criar.

output

Geralmente usado nos blocos estruturais, que são os blocos que irão juntar um ou mais blocos de conteúdo, formando o conteúdo da página. Então depois de ter juntado todos os pedaços do quebra-cabeça podemos imprimir o resultado no navegador.

<block type="page/html" name="root" output="toHtml"...

Atenção agora, principalmente se você não sabe nada de Orientação a Objetos. Mas da onde saiu esse “toHtml“??? Lembra da classe Html.php do seu type=”page/html”??? Ele recebe várias funções por herança da classe Template.php por causa do extends.

class Mage_Page_Block_Html extends Mage_Core_Block_Template

Então se você abrir o arquivo Template.php, vai ver que essa classe também herda funções de outra classe.

app/code/core/Mage/Core/Block/Template.php

class Mage_Core_Block_Template extends Mage_Core_Block_Abstract

E agora sim. Dentro da classe Abstract.php você encontra a função toHtml responsável por fazer o output do conteúdo.

template

É normal um bloco de estrutura definir um template, uma página que serve de alicerce para a contrução do conteúdo recebido de outros blocos.

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

Nesse exemplo a estrutura do bloco será montada no arquivo 3columns.phtml que fica em:

app/design/frontend/base/default/template/page/3columns.phtml

Onde “base/default” é equivalente ao seu “template/tema” – mais detalhes sobre esse assunto em post futuro sobre templates e temas para magento.

after – before

Esses dois parâmetros possuem a mesma funcionalidade, porém um vai trabalhar de forma ascendente e outro de forma descendente. Serve para organizar a ordem de apresentação do bloco.

<block type="catalog/layer_view" name="catalog.leftnav" after="currency"...

Então neste exemplo estamos informando que o bloco deve ser carregado logo após o bloco de nome “currency“. Um detalhe importante, é que se você colocar “” ao invés de um nome válido, ele vai entender que esse bloco possui prioridade, ou seja, before=”-“ vem antes de todos e after=”-“ depois de todos.

as

Por padrão, o parâmetro “as” recebe o mesmo valor do parâmetro “name“, mas isso não é obrigatório. O “as” funciona como um apelido para o bloco. Geralmente usado por blocos de conteúdo, para que o bloco de estrutura tenha maior independência na hora de organizar o conteúdo impresso. Fica mais fácil de entender com um exemplo.

Um dos blocos de conteúdo para o bloco de estrutura “root” é a migalha:

Como acabamos de ver, o bloco “root” invoca o template “3columns.phtml” para montar sua estrutura. E dentro deste arquivo encontramos a linha:

getChildHtml('breadcrumbs') ?>

Isso faz com que o conteúdo do bloco “breadcrumbs” seja impresso na página através do comando “$this->getChildHtml(“breadcrumbs”)“. Então o getChildHtml encontra o conteúdo do bloco usando o “as” e não o “name“.

Isso em resumo

Sim. Esse foi um resumo da tag block do xml. Outros detalhes e exemplos mais complexos ficam pra outra oportunidade. Quem sabe um livro!

A estrutura de templates não se resume a tag block, ainda temos que analisar outras tags. Mas é um ótimo ponto de partida para começar a entender seu funcionamento. Continuem estudando.

Sucesso!