Texto Original em Ingles em : http://www.magentocommerce.com/design_guide

Tradução feito em quatro partes.
Como fiz essa tradução sozinho e meu ingles é infinitamente melhor que meu português, me avisem de erros de gramatica por favor via email.
leomangione@me.com
Deixem a area de comentários para dúvidas ou sugestões.

Terminologias de Desgin do Magento – Parte 1
Trabalhando com os Temas do magento – Parte 2
Criando um Tema – Parte 3
Introdução a Layouts – Parte 4 (Você está aqui!)

Introdução a Layouts

Layout, pela aparência de seus componentes, pode facilmente faze-lo acreditar que para trabalhar com ele,  você deve estar armado com um extenso conhecimento de lógica de programação. Nada pode ser tão distante da verdade.  Layout é contruido com um pequeno conjunto de tags XML que são facéis e divertidas de se aprender. Conhecendo alguns conceitos e comandos chaves sobre layout, você em breve estará armado com a confiança e conhecimento para facilmente modificar o design da sua loja para as especificações que deseja.

Como os layouts funcionam

Layout é um componente virtual do Magento. Modificando os componentes do layout, você pode facilmente contruir uma pagina da loja de uma maneira atualizada e compativel. (Diagram 1)

O Layout é composto de um layout padrão (default) e atualizações de layout que são feitos de XML TAGS fáceis de se aprender. Com esses comandos de layout você pode modificar/atribuir relaçoes entre bloco extrutural e bloco de contendu e ainda pode controlar funcionalidades da pagina principal da sua loja , tais como carregar e descarregar blocos javascripts específicos de blocos em um pagina.

Arquivos de layouts são separados em um nivel  modular, todo módulo, traz seus próprios arquivos de layout (por exemplo ‘catalog.xml’ é um arquivo de layout para o módulo ‘catalog’, ‘customer.xml’ é para o módulo customer… etc.) Esses arquivos de layouts estão localizados em
app/design/frontend/your_interface/
your_theme/layout/ e cada arquivo e mais tarde separado por  alças  ou containers (’handles’ veja diagrama 1), cada alça (com e exceção do <default>) atribui suas atualizações inclusas para a pagina especifica da loja correspondente.

Alguns arquivos de layouts podem conter a alça <default>, Quando o Magento lê os arquivos de layouts, ele primeiro pega os updates de layouts atribuidos a alça <default> de quase todos arquivos de layouts, lendo-as na ordem que foi atribuida no no arquivo app/etc/modules/Mage_All.xml. Depois disso ele lê as atualizações de layout de cada pagina específica, finalizando a construção da pagina da loja. O sistema foi construido dessa maneira para poder permitir facilmente  a adição e remoção dos módulos sem afetar outros módulos no sistema.

Anatomia de um Layout

Um Layout contem um pequeno conjunto de tags XML que atuam como instruções detalhadas para aplicação em como construir uma pagina, o que construir com ela e o comportamento de cada bloco dessa construção. A melhor maneira de entender o layout é simplesmente mergulhar na sua estrutura e ataca-lo por todos os angulos. Para que você faça isso, aqui está algumas propriedades de comportamento de cada XML tag do layout.

Alça ou Container (’Handle’) Alça  (diagrama 1)  é um identificador pelo qual a aplicação determina o que fazer os as atualizações aninhadas a ela. Se o nome do container for <default>, então a aplicação sabe que sua atualizações aninhadas devem ser carregadas em quase todas as paginas da loja, antes de carregar layouts especificos da pagina (Nós dizemos, ‘quase todos’, porque algumas paginas excepcionais como popup da imagem do produto não carrega o layout no container <default>).

Se magento encontrar alças diferentes que <default>, ele ira atribuir suas atualizações aninhadas dentro da alça a aquela pagina específica correspondente pela alça. Por exemplo, <catalog_product_view) contem as atualização de layout para a pagina de visualização de produto, enquanto <catalog_product_compare_index> contem atualizações para a pagina de comparação de produto. Alças (Handles) são identificadores de nome ÚNICO que como um designer seu um entendimento da programaçao do Magento, nunca precisará  ser mudada.

<block>

Magento determina o comportamento e a apresentaçao visual de cada bloco de contrução via tag <block> . Nós já mencionamos os dois tipos de blocos que o Magento agrega – blocos estruturais e blocos de conteudo. A melhor maneira de distinguir entre os dois é examinando o comportamento atribuído a ele através dos atributos da tag. Um bloco estrutural geralmente contem o atributo ‘as’, através dele a aplicação é capaz de se comunicar com a area designada (pelo metodo getChildHtml ) em um template.

Você irá notar varias ocorrências desse atributo ‘as’ no lauout ‘default’, porque por natureza o layout ‘default’ é aquele que constrói a base no qual layouts específicos de cada pagina podem adicionar conteudo.  Por exemplo, no layout ‘default’ , existem blocos estruturais tais como, ‘left’, ‘right’ , ‘content’ , ‘footer’ sendo apresentados. Não estou dizendo que esses blocos não podem existir em atualizações de layout normais, mas por quê não configurar primeiramente blocos de estrutura recorrentes no layout ‘default’, e depois começar adicionando conteudo página por página? Vamos ver mais a fundo os atributos disponiveis para a tag <block> .

• type – Esse é o identificador para a classe ‘module’ que define a funcionalidade desse bloco. Esse attributo não pode ser modificado.
• name – Esse é o nome pelo qual outros blocos podem fazer referencia ao bloco no qual esse atributo está atribuido.   (veja  diagrama 3).
• before (e) after – Esses dois são duas maneiras de posicionar um bloco de conteudo dentro de um bloco de estrutura. before=”-” e after=”-” são comandos usados para posicionar um bloco de conteudo no topo ou na base do bloco de extrutura.
• template – Esse atributo determina que o template que ira representar a funcionalidade do bloco no qual esse atributo esta atribuido. Por exemplo, se esse atributo for usado :  ‘catalog/category/view.phtml’, a aplicação irá carregar o arquivo de template ‘app/design/frontend/template/catalog/category/view.phtml’ .Para aprender como os layouts trabalham com os templates para trazer marcação para sua loja, leia Passo a passo para construir um tema.
• action – <action> é usado para controlar funcionalidades para a parte frontal da loja, tais como carregamento ou descarregamento de um Javascript. Uma lista completa de métodos para ação estará em breve disponivel, mas por enquanto a melhor maneira de aprender os diferentes métodos para as ações é brincando com elas nas atuais atualizações de layouts disponíveis.
• as – Esse é o nome pelo qual um templete chama o bloco em que esse atributo esta atribuido. Quando você ver o método PHP getChildHtml(’block_name’) sendo chamado por um template, você pode ter certeza que ele está se referindo ao bloco no qual o atributo  ’as’  está atribuido com o  nome ‘block_name’ . (Exemplo rápido : O método <?=$this->getChildHtml(’header’)?> no esqueleto do template tem relação com <block as=“header”> )

<reference>
<reference> é usado para fazer referencia a outro bloco. Fazendo uma referencia a outro bloco, as atualizações dentro da tag <reference> irão se aplicar ao <bloco> corelato.  (veja diagrama 3).

Todas as tags precisam ser fechadas

Parametro "name"

Para que você possa fazer a referencia, você precisa apontar a referencia a um bloco usando o atributo ‘name’ .

Regras de XML

Se você não estiver familiarizado com ela. Ao se encontrar com as atualizações de Layouts do Magento baseadas em XML, você pode ter algumas perguntas sobre as regras que se deve seguir quando você quiser modificar um arquivo XML. O unico conjunto de regras que você precisa se lembrar com relação a XML é, quando se abre uma TAG, ela ou ser seguida de uma tag que fecha. Ou você precisa fechar a propria tag. Exatamente como funciona as tags do (X)HTML.

Quick Exercises to Get You Started

Exatamente como qualquer outro novo conceito, nós sabemos que sem sujar as mãos, você nunca irá absorver o que lhe foi explicado com palavras, por isso, Aqui estão dois exercicios para sentir como funciona trabalhar com layouts.  Para acompanhar esses exercicios você deve ter o tema ‘default’ do Magento pronto e acessivel.

Exercício #1: Na pagina de categoria, mova a caixa “My Cart” da coluna da direita para a coluna da esquerda.

1. Ligue as Dicas de Caminho do template indo em Sistema -> Configuração, selecione a loja que irá trabalhar usando o seletor no canto superior esquerdo da pagina. Espere a pagina recarregar, selecione a aba ‘Desenvolvedor’ , Selecione ‘Sim’ na caixa que indica ‘ Dicas do Caminho de Template’ , Clique em Gravar Configuração , e volte para o Frontend da sua loja e recarregue-a.

2. Quando a página recarregar, olhe para o caminho do template do bloco ‘My Cart’ – ele vai provavelmente dizer ‘frontend/default/default/template/checkout/cart/sidebar.phtml’. Ao olhar para o caminho, você já sabe que esse template está sendo apresentado através do módulo ‘checkout’ . Como você sabe disso? ‘contend/default/default/template/checkout/cart/sidebar.phtml’ . Está escrito no caminho do template. O nome que vem exatamente depois do diretório chamado ‘template’ é o nome do módulo no qual o template é apresentado.

3. Abra o arquivo layout/checkout.xml – porque agora você está lidando com o modulo ‘checkout’

4. Procure por  ’checkout/cart/sidebar.phtml’ (o nome do template no block ‘My cart’) nas atualizações do layout. Você vai achar uma area que se parece com isso.

<reference name=”right”>
<block type=”checkout/cart_sidebar” name=”cart_sidebar” before=”-” template=”checkout/cart/sidebar.phtml”/”>
</reference”>

Mude o para dizer o seguinte  (Note que tudo que está fazendo aqui é mudando  <referencename=”right”> para  <reference name=”left”>).

<reference name=”left”>
<block type=”checkout/cart_sidebar” name=”cart_sidebar” before=”-” template=”checkout/cart/sidebar.phtml”/”>
</reference”>

5. Recarregue o frontend da loja para ver a mudança refletida.

Observação : Pelo menos na minha instalação para que aparecesse o carrinho, eu tive que cadastrar um produto e adicion-alo na mesma. Só assim consegui fazer o exercicio.

Exercício #2 : Separe os links de SEO da area do Rodapé.  Em vez de ter o links dos items em uma lista. Isole o ‘Advanced Search’ para estar no cabeçalho.

1. Você pode presumir que os links de SEO devem estar atribuido em algum lugar do layout a baixo do footer, porque está sendo chamado através do método ‘<?=$this->getChildHtml()?>’ do template ‘template/page/html/footer.phtml’. (Você precisará das Dicas dos Caminhos do template ligados para ver por que isso é óbvio.)

2. Abra o arquivo layout/page.xml e procure pela lista de filhos debaixo do block ‘footer’ para localizar um bloco que chama os links do ‘footer’ Você vai achar <block name=’footer_links’> que [e o que chama os links de SEO. Agora que você sabe que as atualização de layouts referenciam os links de SEO pelo nome “footer_links”, agora você irá fazer uma busca em todos os arquivos XML por  <reference name=”footer_links”>.Você irá achar referencias pelos links de ‘footer’ no arquivo catalog.xml (que chama o ‘Mapa do Site’), catalogsearch.xml (Que chama ‘Termos de Busca’ e ‘ Busca Avançada’) e contacts.xml (que chama ‘Contact Us’).

3. Agora que você encontrou a area dos items dos links indiviuais, você irá agora começar os passos para isolar ‘Busca Avançada’ dos outros para ter seu próprio espaço no cabeçalho. Primeiro vá para a pagina. page.xml e crie um novo bloco. Now that you’ve located the area of the individual SEO link items, you will now begin the steps to isolate ‘Advanced Search’ from the bunch and make it it’s own thing in the header.

<block type=”page/template_links” name=”header_links” as=”header_links” template=”page/html/top.links.phtml”/>

e coloqueo dentro de

<block name=”header”>.

Agora você  fez as atualizaçnoes necessaris para esperar esse link em header.phtml. Abra o arquivo em questão template/page/html/header.phtml, e digite <?=$this->getChildHtml(’header_links’)?> onde você quer que morem os links.

4. Agora vá em catalogsearch.xml e corte isso. (CTRL + X) ou (Command + X : MAC)

<action method=”addLink” translate=”label title” module=”catalogsearch”>
<label>Advanced Search</label>
<url helper=”catalogsearch/getAdvancedSearchUrl” />
<title>Advanced Search</title></action>

Que vai estar dentro desse Bloco <reference name=”footer_links”>.

Eu criei novas linhas para referenciar o novo bloco ‘header_links’ que criei. E colei o codigo que foi cortado acima para dentro dele.

<reference name=”header_links”>
<action method=”addLink” translate=”label title” module=”catalogsearch”>
<label>Advanced Search</label><url helper=”catalogsearch/getAdvancedSearchUrl” />
<title>Advanced Search</title></action></reference>

5. Agora eu tenho o link de Busca Avançada no cabeçalho em vez do Footer.

E esse é o fim da tradução do nosso tutorial, espero que tenham gostado e conseguido acompanhar. Gostaria muito que me ajudassem para que essa tradução ficasse muito melhor. Eu sei que devo ter errado alguma coisa no meu portugues e toda hora eu arrumo aqui e ali. Um abraço a todos da comunidade Magento.