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

Trabalhando com os Temas do Magento – Parte 2

Como o Magento faz os temas tão diferentes dos outros.

O termo “tema” provavelmente lembra a você um som familiar. Tanto com espectador, um criador, ou ambos, você ja teve a experiencia de visitar um mar de aplicações na web através de seus temas. Um tema tem amplamente dois tipos de usuários, primeiramente, o tipo-espectador que vivencia o tema a partir de um ponto de vista estético e de usabilidade ao manusear uma loja. O outro, o tipo criador, que vai em uma camada adicional da experiencia de um tema ao fazer parte da crianção de um tema.

No primeiro tipo de usuario, a experiencia na loja é definida pela habilidade de uma loja de preencher seu ou sua demanda tática e emocional. Para o segundo tipo de ususario que precisa fazer parte da criação, é a eficiência na qual ele/ela é capaz de completar um conjunto de tarefas de desenvolvimento que determinam a experiencia na loja.

Nós reconhecemos que é o acumulo de experiencias em ambos os tipos que determinam a rentabilidade de uma loja, no entanto nenhuma das experiencias de usuário devem ser ignorada. Porque sabemos que, como designer, você  já tem os fims graficos das coisas bem definidos. (servindo para os tipos de audiencias), Nós entendemos que somente o ajudaremos na construção de uma administração de tema espetácular para maximizar seu eficiencia no fluxo de trabalho e levar a sua criativa a um nivel superior. Aqui estão algumas coisas que imaginaos que modem deixar você babando.

1 . Total poder de customização

• Com Magento voce pode atualizar o visual e a experiencia de sua loja em nivel de categoria e produto, dando a você grande poder de marketing e promoção assim como uma loja com um design unico sem fim. Já imaginou apresentar um produto em sua propria e customizada pagina? Magento lhe da esse poder para fazer exatamente isso e mais, disponibilizando um jeito rapido de customizar a apresentação de seu produto e um modo por produto ou por categoria.

2. Multiplos temas.

• MAgento disponibiliza a habilidade de carregar multiplos temas de uma só vez, deixando você trocar entre tema padrão (default) e um tema para um evento temporal/sazonal .

3. Fluxo de trabalho.

• Com a programação totalmente orientada a objeto, todos os modulos são imediatamente acessiveis via tags de templates a partir de qualquer arquivo de template. E porque Magento já vem rico em caracterisitcas desde a sua instalação basica, você nunca mais terá que depender de um programador para finalizar as tarefas mais basicas para você.
  Magento tambem prospera em uma extensiva rede de conhecimento através de membros da comunidade (incluindo o time Magento), então você nunca precisa pensar duas vezes onde adquirir conhecimento caso precise durante o processo.

4. Minimize tempo de debug

• Qualquer designer se recorda daquelas preciosas horas e minutos que foram disperdiçadas procurando por aquela tag que não foi fechada, examidada pelo seu validador. O validador pode falar o que está acontecendo de errado, mas ele nunca fala a você onde esta acontecendo. O backend modular do Magento traz com ele, um sistema modular de template que minimiza a quantidade de (X)HTML que você precisa lidar de uma só vez. Menos bagunça significa menos estresse e mais sanidade para as coisas realmente importantes da vida.

Realmente, a melhor parte do que o Magento tem a oferecer, é uma aplicação que prospera em sua flexibilidade, deixando você  com nada mais com que se preocupar, exceto na elaboração de seu brilhante plano de seu novo front-end ‘WOW”.  O céu é o limite para essa aplicação, e esperamos que você se divirta aplicando-a a sua loja.

Como criar um tema

Vamos primeiramente desvendar alguns diretórios para ambienta-lo. Abra os seguintes diretorios a partir do diretorio raiz da sua instalação do magento e seja xereta.

● Diretório 1 : app/design/frontend/default/default/ — Esse diretorio contem o layout, tradução (locale) e os materias de template.

● Diretório 2: skin/frontend/default/default/ — Esse diretório contem as imagens, arquivos de Css e javascripts específicos de blocos.

Quando se trabalha com temas, esses dois diretorios serão sempre seu ponto de partida.

Como você deve ter notado, nós setorizamos os arquivos de temas em duas partes. Separando os arquivos que precisam ser acessado pela web (como imagens e javascripts) daqueles que devem ser escondidos dela. Nós tivemos a certeza que magento ofereça a medida de segurança maximo para sua loja em todas as arestas.

Vamos seguir em frente e examinar os dois diretórios.

Uma visão rápida você irá notar o uso dos nomes de diretorios “default/default” em ambos os diretorios 1 e 2, então:

● Diretório 1: app/design/frontend/default/default/
● Diretório 2: skin/frontend/default/default/

Então se você tivesse um tema chamado “my_theme” em uma interface chamada “my_interface” você estaria trabalhando em “app/design/frontend/my_interface/my_theme . Você pode gravar quantos temas você quiser em sua interface. Mas até a data de escrita desse documento sua loja só pode carregar o tema chamado de default e um tema adicional de sua escolha para sua loja.
You can save as many themes into your interface directory as you’d like, but at the time of writing, your store
can only handle loading the theme called ‘default’ and one additional theme of your choice to your store. (Nota : Capacidade de carregar um numero ilimitado de temas será disbonibilizado nos proximos releases, para aprender como Magento adminstra o carregamento de multiplos temas de uma vez, leia Hierarquia de Temas) Isso da a você dois temas para você trabalhar, então você pode deixar seu tema default para o cotidiano e usar um tema adicional para ser o tema sazonal e para eventos específicos. (Para ler sobre como multiplos temas funcionam e como você pode se beneficiar com eles, leia Diga oi a multiplos temas)

Creating a new default theme.

Para criarmos um novo tema “default” , primeiro você deve copiar um tema “default” existente no qual você vai se basear como seu novo tema “default” . Crie uma cópia  de app/design/frontend/default/default e renomeie seu novo diretório para o nome que desejar (O nome de uma interface e tema devem ser uma palavra com caracteres alfa-numéricos que comece com uma letra do alfabeto [a-z]. Por exemplo “My new Theme” and “02123_my_theme” esta errado, “my_new_theme” está certo).  O nome do diretorio do seu tema é o nome pelo qual a aplicação vai reconhecer seu tema. Agora faça o mesmo para skin/frontend/default/default. E pronto! Você acabou de criar com sucesso o seu novo tema “default”.  Para aprender como selecionar esse tema para sua loja, leia Selecionando umnovo tema, abaixo.

Criando um novo tema não-default.

Quando crianos um novo tema não default, você não precisa duplicar nenhum diretorio de tema default existente.  Provavelmente você esta somente fazendo mudanças em arquivos específicos Muito provavelmente você está apenas fazendo alterações em arquivos específicos e, portanto, só terá de duplicar os arquivos de acordo como ponto de partida do seu novo tema. No entanto, uma regra que você deve sempre se lembrar de seguir é de se certificar que você preservará as convenções estruturais dos diretórios do Magento.

Por exemplo, se na  totalidade de seu tema não default contem apenas o arquivo template ‘home.phtml’ do modulo catalog que reside em app/design/frontend/your_interface/your_non_default_theme/ você deverá criar os diretorios  ‘template/catalog’ no qual você irá salvar o seu arquivo de template.  Quando você abrir um diretório de um tema ‘default’ do Magento (Diagrama 1), você verá como os diretórios estão estruturados , tenha certeza de ter como referencia essa convenção de diretorio para que você carregue seu tema com sucesso.

Selecionando uma interface e um tema para sua loja.

Agora que você criou seu proprio tema. (como default ou não default), você precisará seleciona-lo para seu website ou loja para que as modificações façam efeito. Navegue para o painel adiminstrativo do Magento ( ex : www.minhaloja.com.br/admin), então vá para a aba de configuração de design. (Sistema -> Configuração -> Aba Design )

Diagrama 2

No canto superior esquerdo do Diagrama 2, você pode ver uma caixa com o nome “Escopo da configuração atual”.

• Para administrar o design da sua loja em um nivel website, selecione o nome do seu website no menu dropdown dessa caixa e aplique os passos a seguir.

• Para administrar o design em um nivel de loja, selecione o nome da visualização da sua loja e aplique os passos a seguir.

Passo 1

Da aba design, na caixa “nome do pacote atual” , entre com o nome da interface no qual seu novo tema reside. Magento irá carregar a interface “default” automaticamente caso não tenha nada escrito nessa caixa.

Passo 2

Na caixa “Padrão” , abaixo do cabeçalho Temas, entre com o nome do seu novo tema, o qual você quer que seja carregado para seu website ou visualização de loja. Se você deixar essa caixa vazia, Magento irá automaticamente carregar somente o tema chamado ‘default’ . (Lembre-se , não importa como você configura a aba de design, Magento ira automaticamente carregar o tema chamado ‘default’) Se você selecionar um tema na administração, esse tema irá simplesmente carregar em um nivel mais alto na hierarquia ,  mas será carregado junto com o tema  ‘default. Isso irá mudar nas próximas releases do magento assim dando a você total controle sobre que temas estão sendo carregados na sua loja.  Se você escolhesse para carregar o tema separadamente dependendo do tipo de arquivo (layouts, templates, skins ou arquivos de traduções), entre com o nome do tema no qual você quer pegar os tipos de arquivos de concordancia.

Passo 3

Quando terminar, click no botão ’salvar configuração’ e recarrega o frontend da sua loja. Voila! Você agora ve seu novo tema refletido no frontend da sua loja.

Agora que você já tem o ‘Como fazer’ sobre a criação e adminstração de temas, vamos seguir em frente para saber como o magento manuseia esses temas.

Say Hello to Multiple Themes

Nota : Capacidade para um numero ilimitado de temas estará disponivel nos próximos releases.  Apesar de que no momento que foi escrito esse documento somente dois temas podem ser lidos de uma só vez.  As funcionalidades dos bastidores permanecem as mesmas e você se beneficiará ao ler essa documentação.
As festividade de final de ano , são de longe a oportunidade de aumentar as vendas mais extensiva para qualquer loja eCommerce. Clientes fazem filas para comprar presentes de natal para seus familiares e amigos, e mães fazem filas para comprar roupas de Halloween naquela noite especial de doces ou truques.  Para vestir a roupa para esses compradores sazonais, sua loja tem que refletir fielmente a ocasião para inspirar seus compradores a explorar sua loja. Uma loja como o Diagrama 3 não vai funcionar durante o Natal – o que essa loja precisa é de alguns vermelhos, flocos de neves e um Papai Noel. Exatamente como está a loja do Diagrama 4!

Com Magento, nós criamos a capacidade de sua loja para suportar multiplos temas de sua escolha, exatamente para aquelas horas quando um toque extra é mais preciso. Carregando multiplos temas para sua loja, você preserva seu design não sazonal, enquanto o incrementa com um tema de Natal Uma examinação mais proxima dos dois designs acima, você notará similaridades na base do design.  A fachada ficou natalina no diagrama 4 , mas por debaixo, você ainda pode ver a estrutura não sazonal da loja .

A única real diferença entre os dois designs da loja, são alguns CSSs e arquivos de imagens e algumas mudanças no codigo nos arquivos de template. Já que as mudanças são na verdade bem pequenas, você não precisa de um novo tema default para acomodar seu tema de Natal. O que voce precisa é de algums arquivos substitutos, e você estará no caminho certo para uma loja muito mais feliz e apimentada.

A funcionalidade de multi temas do Magento foi criada para acomodar exatamente essa necessidade, colocando o poder na ponta dos seus dedos para ligar e desligar temas sazonais enquanto preserva seu tema padrão.

Magento suporta o carregamento de multiplos temas atribuindo a uma coisa chamada Hierarquia de Temas que é simplesmente um cancelamento no carregamento de arquivos redundantes , carregando somente os arquivos que estiverem mais alto na hierarquia. A hierarquia é determinada por você na aba design do painel administrativo e sua habilidade para faze-lo ficará totalmente funcional na proxima versão estável. No momento da escrita do documento, a hierarquia do tema já esta decidido para você, já que o Magento carrega primeiro o tema default (colocando-o no nivel mais baixo da hierarquia), então carrega o segundo tema atribuido no painel administrativo (colocando-o no lugar mais alto da hierarquia).

Hierarquia dos temas.

Quando você atribui multiplos temas para sua loja, você simplesmente está tomando vantagem do fato que enquanto seu objetivo principal ao construir um tema é criar o mais usável e visualmente prazerosa interface gráfica, o objetivo do Magento é de assegurar que a aplicação é capaz de localizar todos os arquivos requeridos pelo tema para manter a aplicação funcionando sem erros.

Por exemplo, se sua pagina que lista categorias chama o arquivo ‘view.phtml’ (nesse caso esse template se trasforma em um arquivo requerido), mas a aplicação não foi capaz de achar o arquivo no nivel mais alto da hierarquia,  ele vai procurar em um nivel imediatamente mais baixo da hierarquia para achar o arquivo, se falhar ele continuará nesse processo até achar-lo . Achando, a aplicação irá carregar o arquivo e terminar a busca.  Esse método de criar designs é chamado de fallbacks.  Porque a aplicação “cai para traz” procurando a próxima fonte possível de arquivos requeridos até que possa acha-los  e carrega-los.
Digamos que nós temos tres temas atribuidos a nossa loja e cada um desses temas contem os seguintes arquivos.

Tabela 1

Vamos tambem assumir que os tres temas estão atribuidos nessa hierarquia.

Tabela 2

Observando mais de perto, você verá que existem alguns arquivos redundantes como  templates/3-col-layout.phtml e css/base.css na  Tabela 1. Agora vamos arrumar a tabela para que os arquivos redundantes fiquem arrumados paralelamentes entre si.

Tabela 3

‘Ok, legal. Mas o que isso quer dizer? ‘ Você pergunta. 
Bem, deixe-nos lembrar-lo que na Tabela 3 é como você vê os arquivos em cada diretório de cada tema e não como o Magento os vê.

Agora vamos ver como o Magento ver os mesmos arquivos na Tabela 4.

Tabela 4

Você notará como o Magento ignora a versão dos arquivos redundantes mais baixos na hierarquia e reconhece somente as verões mais alta da hierarquia. Isso porque ele já achou o arquivo requerido e não precisa mais procurar por ele, assim sendo, terminando a busca por aquele arquivo específico e continuando a busca por outros arquivos requeridos que ainda não foram encontrados.