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  (Você está aqui!)
Introdução a Layouts – Parte 4 (traduzindo) – 01/11/2009

Criando um tema

Magento foi construido em um modelo totalmente modular que transfere sua loja a uma escalabilidade e flexibilidade infinita. Por natureza da aplicação, esse ponto de vista da programação é copiado na forma em que você vai desenvolver temas para sua loja. Nesse capítulo , nós iremos explorar o que isso quer dizer para você e como começar a desenvolver um tema para sua loja no Magento.

Introdução a blocos e layouts

Você provavelmente trabalhou com outra aplicação eCommerce antes de chegar no Magento –  com essa experiência, nós sabemos que você tem um conjunto de coisas que já viraram uma segunda natureza para você ao desenvolver um tema para sua loja. Antes de começar nessa documentação, nós gostariamos de assugurar que você junte todas essas espectativas e jogue-as  sem perdão janela a fora.  Não , isso não siginifica que você tem que aprender uma linguagem totalmente nova. Nem ao mesmo significa que muito do seu fluxo de trabalho irá mudar. Na verdade, tudo isso realmente significa que existem alguns novos truques que você precisará aprender e junto com eles, nós gostariamos de apresentar para você algumas novas ferramentas. Case-se com essas ferramentas, mantenha-nas ao seu lado durante todo o tempo e tenha certeza de dar a elas muita atenção. Se você fizer tudo isso, nós prometemos que você irá se amar por causa disso. Você esta pronto? Aqui estão elas.

1. Blocos Estruturais
2. Blocos de Conteudo
3. Layout

Criando uma nota mental

Para que nós possamos passar  uma clara explicação do que são os blocos e layouts, aqui está uma imagem mental que você mesmo pode desenhar

1. Imagine o contorno de alguns blocos  (como no Diagrama 1 — Não tente usa-los como referencia o tempo todo. Imagine e acompanhe com o texto)
2. Agora imagine o contorno preenchido com um bloco.
3. Agora imagine dois blocos e o contorno crescendo com os blocos.
4. Agora imagine tres blocos e o contorno crescendo com os blocos.
5. Agora imagine quatro blocos e o controno crescendo com os blocos.

6. Agora de uma olhada nessa landing page para uma categoria.

Diagrama 2

7. Agora preste atenção na descrição de cada area da tela acima.

Diagrama 3 e Diagrama 4

A imagem mental que você acabou de criar serve para dar a você uma comparação em paralelo entre conceito e atual realização dos blocos.  Eu sei que provavelmente você esta completamente perdido. Deixe-nos explicar.  Em conceito, os contornos no diagrama 2 são os blocos estruturais. Eles são os blocos pais dos blocos de conteudo e na realidade, serve para posicionar o blocos de conteudo no contexto da página. (como no Diagrama 3)

Esses blocos estruturais existem nas formas de area de cabeçalho (header) , coluna da esquerda e direita (left column e right column)  e etc.. que servem para criar a estrutura visual da pagina da loja.  Um bloco de conteudo, por sua vez, em conceito, é cada bloco individual colorido que completa o bloco estrutural.  Em um contexto de loja, eles são o verdadeiro recheio da pagina da loja. Eles são as representação de cada uma das funcionalidades destacadas em uma pagina (como uma lista de categorias, propagandas, caixa de preços e etc…) e chama os arquivos de templates para gerarem o (X)HTML a serem inseridos em seu bloco estrutural pai.

Layout é a ferramenta na qual você atribui os blocos de conteudo em cada um dos blocos de estrutura que você cria. O layout existe em arquivos de texto em formato XML e ao modifica o layout você é capaz de mover blocos em uma pagina e atribuir templates para os blocos de conteudo para produzier marcações para os blocos de estrutura.  De fato, com a ajuda de somente alguns arquivos de layouts, você é capaz de modificar o layout visual de todas as paginas da sua loja. Leia mais sobre layouts em Introdução a layouts.

Com Magento, você não vai mais ter um arquivo com o nome ‘left_colunb.ext’ e dentro dele o espagueti infinito de tags que devem ser adminstradas manualmente dependendo de cada uma das funcionalidades necessarias para a pagina.  Em vez disso, suas templates são administradas por base em sua funcionalidade e você pode ligar e desligar essas funcionalidades para sua loja pela virtude de um par de comandos em seu layout.

Step by Step Guide to Building a Theme

Aqui está a lista completa de ferramentas que o Magento disponibiliza para você construir seus próprios temas:

1. Templates
2. Layouts
3. Blocos
4. Skins (imagems, CSS e Javascripts especificos para cada bloco)

Para que você construa seu tema para sua loja, seu fluxo de trabalho consistirá dos seguintes passos.

UM : Desabilite o cache do seu sistema

Para que você prepare seu Magento para produção , você primeiro precisa desabilitar o cache do sitema indo no seu Painel Adminstrativo (http://seudominio.com.br/admin) e navegando para Sistema -> Gerenciador de Cache, na caixa de dropdown  Todo o Cache selecione Desabilitar e clique em ‘Salvar Configuração de Cache’ . Fazendo isso você tem a certeza que verá as mudanças fiéis em sua loja enquanto as faz.

DOIS: Determine todas as possibilidades dos tipos de estruturas da sua loja.

Antes mesmo de começar a criação do código para a loja, você precisará se perguntar que tipo de estrutura de página você gostaria de ter para cada página da sua loja. Faça uma lista que se pareça com essa.

• Home usará uma estrutura de três colunas.
• Lista de categorias irá usar uma estrutura de duas colunas que inclue uma coluna a direita.
• As paginas do cliente irão usar a estrutura de duas colunas que inclue uma coluna a esquerda.

Esqueleto do template

Uma vez que sua lista está completa, você irá criar o código (X)HTML para cada tipo de estrutura e salva-las como um esqueleto de template no diretorio  app/design/frontend/your_interface/your_theme/template/page/. Um esqueleto de template tem esse nome devido a natureza de seu propósito .

Tudo que ele realmente contém (sem contar com os elementos <head>) , é a presença dos códigos que servem para posicionar cada um dos blocos estruturais nas areas codificadas de concordância.

Exemplo de um esqueleto de template

Ao visualizar o esqueleto do template acima, você irá notar um método em PHP chamado <?=$this->getChildHtml()?> dentro de cada uma das tags de apresentação. É dessa maneira que o Magento carrega blocos estruturais no esqueleto do template  e enfatizando, é capaz de posicionar cada conteudo dos blocos estruturais dentro de uma pagina da loja.

Cada chamada getChildHtml chama o nome do bloco estrutural como parametro , e esses nomes são a maneiras pelo qual cada bloco estrutural é indentificado no layout.

Três : Cortar o seu (X)Html de acordo com as funcionalidades

Uma vez que você criou os esqueletos das templates, você agora criará o template para cada bloco de conteudo.

Magento gosta de templates com significados

Você terá que cortar as tags (X)HTML construidas para sua pagina e fornecer as tags em questão para cada funcionalidade da página, Por exemplo, se você tem uma area para um mini carrinho de compras, as tags para somente essa funcionalidade terão seu próprio arquivo de template. O mesmo para as etiquetas de preço dos seus produtos, assinatura de newsletter, etc… Todas essas funcionalidades já vem com o Magento, então você pode usa-las como referencia ao construir a lógica das suas tags.

Onde salvar nossas templates

A totalidade das tags para qualquer página da sua loja é introduzida através de um vetor de templates, onde cada um representa uma funcionalidade de um módulo. Para descobrir que templates estão sendo chamadas em uma pagina que você gostaria de modificar, você pode ligar as dicas de caminho do template. Para habilita-los.

1. Vá na pagina de Adminstração do site e navegue para Sistema -> Configuração.
2. Selecione sua loja no seletor no quanto superior esquerdo da página.
3. Quado a página reiniciar, selecione a aba ‘Desenvolvedor’ (ultima aba) e selecione ‘Sim’ para ‘Dicas de Caminho de Modelo’ , essa opção está sob o menu DEBUG, Salve a configuração

Quando terminar, volte para o frontend da sua loja, recarregue a pagina e você verá o caminho para todos os templates listados conforme os blocos. Para modificar o código , tudo que você precisa fazer é seguir o caminho descrito no bloco e modificar o template em questão.

QUATRO: Mude seu Layout para refletir o seu design

Já que você distribuiu algums códigos de marcação, você provavelmente gostaria de mudar a posição das templates na página para  ver como está seu progresso.

Onde estão os layouts?

Para acessar os arquivos de layouts , vá para  app/design/frontend/your_interface/your_theme/layout/. Assim como os templates, os layouts são gravados modularmente , assim, você pode facilmente localizar um arquivo de layout para modifica-lo com a ajuda das dicas do Template. Primeiro, habilite as dicas de template, recarregue a página que você quer modificar, e veja o caminho desse arquivo de template que foi disponibilizado para você através das dicas.

Se você quiser (por exemplo) mover o mini-carrinho, veja o caminho de template (ex:app/design/frontend/default/default/checkout/cart/sidebar.phtml) , use o primeiro diretório dentro do diretorio do tema (indicado em negrito, que é o nome do modulo) para achar o arquivo de layout em questão. Então no caso do mini-carrinho, você sabe que tem que procurar por ‘checkout.xml’ para modificar a posição do mesmo. Cada arquivo de layout (caso ele seja necessário) , mais tarde tem seções em comandos de layouts baseados por página.  Cada area do layout por página está claramente marcado com comentarios que refletem seu uso, mas a aplicação em si reconhece a separação do layout e lida com cada um deles.

Layouts padrão versus atualizações de layout

Existem dois tipos de layouts, padrão (default) e atualizações. Um layout default (page.xml) é um layout que por padrão é aplicada em quase todas as paginas da loja. Todas os outros são atualizações de layout, que simplesmente atualizam o layout padrão em uma base por pagina.

Vamos pegar por exemplo o esqueleto do seu template.

No layout padrão, você o tem em um conjunto de três colunas, que significa por padrão que a maioria das paginas na sua loja vão ter a estrutura de três colunas. Mas não é a estrutura de três colunas que você quer para sua pagina de produto, para isso, você quer a estrutura de duas colunas que inclui a coluna da direita. Para acomodar essa mudança, você não vai mecher no layout padrão e abrir o arquivo catalog.xml no qual você pode colocar alguns comandos de layouts que dizem a sua aplicação para carregar a estrutura de duas colinas para sua pagina de produtos em vez do padrão que são 3.  Para isso que damos o nome de atualizando um layout.

Maneira exemplo de atribuir um esqueleto de template

Vamos pegar um outro exemplo.
Digamos que por padrão, você quer a caixa de assinatura de newsletter na sua coluna da direita. Mas na pagina de conta do cliente, você não quer que ela apareça. Nesse caso, você não deveria mecher no seu default, e abrir o arquivo customer.xml . Nele você vai colocar o comando que desliga o bloco de conteudo da newsletter, excluindo a funcionalidade daquela pagina.