Terminologias de design do Magento

Voc j ouviu falar sobre o inacreditvel open-source Magento e que ele oferece recursos recursos incriveis j no seu pacote bsico. Voc dedicou bastante tempo para ve-lo em ao. Viu e reviu varias vezes. E agora voc quer faze-lo do seu jeito. Voc tem o seus PSDs pronto e ao zlo para construir e integrar. Ento, por onde comear? O guia de layouts para o magento foi preparado para voce aprender e ampliar seus conhecimentos sobre a estrutura, conceitos e metodologias a serem usadas na hora de criar seus layouts para o Magento. Basicamente ensinar o que voce precisa saber para comear a criar um tema de sua preferencia para a ferramenta. Isto dito, devido dimenso considervel e flexibilidade que oferecem as funcionalidades do Magento, no possvel documentar todas as maneiras diferentes em que pode ser personalizados para uso. Para ajudar com isso, voc pode consultar fruns e WIKI na comunidade, onde pessoas com experincias da vida real sero capazes de aponta-lo no sentido correto. Alm disso, lembre-se que Magento uma aplicao em constante desenvolvimento, pois apesar dos nossos maiores esforos para esta documentao pode no refletir fielmente a verso que voc est trabalhando no momento. Esta documentao amplamente dividido em quatro captulos e pode ser ignorado tanto para frente ou para trs . Para acessar rapidamente apenas as informaes que voc mais precisa. No entanto, porque cada captulo funciona como um preldio para a prxima, aconselhamo-lo a seguir a documentao na ordem em que foi escrito.

Magento Design Terminologias

Para acompanhar, juntamente com a documentao, fundamental que voc tenha uma boa compreenso das terminologias usadas para descrever os aspectos do sistema Magento. As terminologias introduzidas neste captulo so provavelmente um novo territrio para voc, leia-os com calma e ateno. Mas mais importante ainda, no se desanime se voc no compreender plenamente o conceito de todas estas novas terminologias Este captulo serve apenas para apresentar todos de uma vez e os captulos futuros iro se aprofundar e expandir as simples definies. Terminologias abordados neste captulo so:

Website, Loja e Visualizao de loja Interface Temas o Layouts o Modelos o Skins Blocos o Blocos Estruturais

Blocos de Conteudo

Website e Lojas

Um website um conjunto de lojas que compartilham o mesmo cliente e informao do pedido, assim como os carrinhos de compra. A loja uma coleo de visualizaes de loja. Estes so termos gerais que podem ser adotados para definir as necessidades especficas dos comerciantes individuais. Alguns cenrios para definir os diferentes usos do site, loja e loja pontos de vista so as seguintes:
Cenrio 1

Uma empresa chamada Dubloo Inc cria uma presena on-line, com trs lojas de roupa diferentes para atender trs tipos de publico-alvo com trs niveis de preos. Dubloo Inc quer todas as trs de suas lojas compartilhem clientes e informaes de compra. Dubloo Inc teria um Web Site e trs lojas sobre sua presena online. Loja iria definir lojas dividias por niveis de preo e website seria DUBLOO inc umbrella.
Cenrio 2

Uma empresa chamada My Laptops quer abrir dois websites separados onde ambas vendem laptops s que com preos diferentes. Eles tambem querem oferecer opoes de Ingles e Espanhol em cada um dos sites, cada um podendo ter items que correspondem a linguagem selecionada. Eles tambem precisam sincronizar informaes de clientes e pedidos entre os sites. Nesse cenrio a visualisao de loja estaria definido como Ingles e Espanhol e Meus Laptops e Laptops Baratos estariam definidos como lojas.

Cenario 3

Uma empresa chamada Bongos Instruments quer criar uma presena online. Sem nenhuma outro ramos de lojas. Bongos Instruments a loja e tambem o website.

Interface

Interface uma coleo de temas que determinal a saida visual e as funcionalidades da visualizao da sua loja. Uma interface pode ser selecionada tanto no nivel de website quanto no nivel de visualizao de loja pela interface do painel de adminstrao. (Aprenda selecionar uma interface para seu website ou loja aqui). Se voc selecionar uma interface no nivel de website, todas as lojas iro herdar a interface do seu site. Voc pode depois selecionar uma interface no nivel de

visualizao de loja e no nivel de loja efetivamente sobreescrevendo a interface do website. Digamos que voc opera 4 lojas diferentes que residem abaixo de um website chamado Johns Panacea , estudando os efeitos de cada um dos mtodos mostrados abaixo. Voc pode facilmente determinar o mtodo a aplicar para as necessidades de design do seu negcio.
1 Declarao em nvel de Website

Se voc quer criar um design unificado para todas as suas 4 lojas, voc ir selecionar uma interface no nvel de Website, nesse caso todas as 4 lojas iro herdar a interface do website.
2 Declarao no nvel de loja.

Se voc quiser incorporar um design unico para cada loja, voc pode selecionar uma interface por visualizao de loja, nesse caso cada loja vai ter o seu design nico.

Temas
Um tema uma combinao de arquivos de layout, template, locale e/ou skin que criam uma experiencia visal para sua loja. Magento construido com a capacidade de carregar multiplos temas de uma s vez, assim separando os temas em dois grandes tipos. Tema Padro (default) Toda interface vem com um tema chamado default que o tema principal da interface. Quando voc seleciona uma interface para sua loja, a aplcao

automaticamente procura pelo tema default e a carrega para o front-end. Se voc quiser customizar o design da sua loja, voc pode modificar esse tema default ou criar/adicionar um tema no default e carrega-lo junto com o default. O tema default deve conter todos os layouts, templates e skins requeridos para poder rodar um site livre de erros e, portanto, o tema menor na hierarquia do tema. Tema no padro Um tema no padro pode conter quantos arquivos de temas voc achar necessario. Esse tipo de tema tem o objetivo de fazer pequenas alteraes temporarias a uma loja em vez de criar um novo tema default. Ao criar algumas novas imagens e atualizando algumas linhas dos arquivos CSS, voc pode facilmente transformar sua loja com design entediante em uma loja de NATAL rapidamente.
Um tema consite de algum ou todos essas caracteristicas.

Layout (localizado em app/design/frontend/your_interface/your_theme/layout/) Esses so basicos arquivos XML que definel a extrutura do bloco em paginas diferentes, assim como controle as informaes META e encoding das paginas . Para uma viso mais aprofundada sobre o assunto leia a introduo para layouts) Templates (localizado em app/design/frontend/your_interface/your_theme/template/) Esses so arquivos PHTML que contem tags (X)HTML e tags em PHP necessrias para criar a lgica para apresentao visutal. Locale (localizado em app/design/frontend/your_interface/your_theme/locale/) Esses so arquivos de texto simples organizados por linguagem que contem as tradues dessa copia da loja. Skins (localizado em skin/frontend/your_interface/your_theme/) Esses so arquivos especificos em Javascript, Css e imagens especficas para um bloco que complementam seu (X)HTML.

Blocos

Termos no foram traduzidos pois vo aparecer internamenta na sua instao do magento. Blocos so uma maneira no qual magento distingue a gama de funcionalidades no sistema e cria uma maneira modular para adminstra-lo de uma forma visual e funcional. Existem dois tipos de blocos e eles trabalham juntos para criar uma saida visual.
Blocos Estruturais

Esses so blocos criados para um proposito unico de selecionar uma estrutura visual a uma pagina da loja, tais como o cabealho(header), coluna da esquerda(left Column), coluna da direita (right column), coluna principal (main) e rodap (footer)(Diagrama 1).
Blocos de Conteudo

Esses so os blocos que produzem o atual conteudo dentro de cada bloco de estrutura. Eles so as representaes de cada funcionalidade individual de uma pagina e carrega arquivos de template para gerar a (X)HTML a ser inserida ao bloco de estrutura pai. Lista de Categorias, mini carrinho, tags dos produtos e listagem de produtos.. etc so cada um deles seus proprios blocos de conteudo. (Diagram 2). Em vez de incluir template em cima de template como uma tipica aplicao eCommerce faria para agregar toda a saida (X)HTML, Magento agrega e arruma paginas de conteudo atravs dos blocos.

Trabalhando com os Temas do Magento Parte 2

Como o Magento faz os temas to 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 aplicaes na web atravs de seus temas. Um tema tem amplamente dois tipos de usurios, primeiramente, o tipo-espectador que vivencia o tema a partir de um ponto de vista esttico 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 criano de um tema. No primeiro tipo de usuario, a experiencia na loja definida pela habilidade de uma loja de preencher seu ou sua demanda ttica e emocional. Para o segundo tipo de ususario que precisa fazer parte da criao, a eficincia na qual ele/ela capaz de completar um conjunto de tarefas de desenvolvimento que determinam a experiencia na loja. Ns reconhecemos que o acumulo de experiencias em ambos os tipos que determinam a rentabilidade de uma loja, no entanto nenhuma das experiencias de usurio devem ser ignorada. Porque sabemos que, como designer, voc j tem os fims graficos das coisas bem definidos. (servindo para os tipos de audiencias), Ns entendemos que somente o ajudaremos na construo de uma administrao de tema espetcular para maximizar seu eficiencia no fluxo de trabalho e levar a sua criativa a um nivel superior. Aqui esto algumas coisas que imaginaos que modem deixar voc babando.
1 . Total poder de customizao

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 promoo 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 apresentao 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 padro (default) e um tema para um evento temporal/sazonal .

3. Fluxo de trabalho.

Com a programao totalmente orientada a objeto, todos os modulos so imediatamente acessiveis via tags de templates a partir de qualquer arquivo de template. E porque Magento j vem rico em caracterisitcas desde a sua instalao 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 atravs de

membros da comunidade (incluindo o time Magento), ento 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 disperdiadas procurando por aquela tag que no 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 baguna 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 aplicao que prospera em sua flexibilidade, deixando voc com nada mais com que se preocupar, exceto na elaborao de seu brilhante plano de seu novo front-end WOW. O cu o limite para essa aplicao, e esperamos que voc se divirta aplicando-a a sua loja.

Como criar um tema

Vamos primeiramente desvendar alguns diretrios para ambienta-lo. Abra os seguintes diretorios a partir do diretorio raiz da sua instalao do magento e seja xereta. Diretrio 1 : app/design/frontend/default/default/ Esse diretorio contem o layout, traduo (locale) e os materias de template. Diretrio 2: skin/frontend/default/default/ Esse diretrio contem as imagens, arquivos de Css e javascripts especficos de blocos. Quando se trabalha com temas, esses dois diretorios sero sempre seu ponto de partida. Como voc deve ter notado, ns 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. Ns tivemos a certeza que magento oferea a medida de segurana maximo para sua loja em todas as arestas. Vamos seguir em frente e examinar os dois diretrios. Uma viso rpida voc ir notar o uso dos nomes de diretorios default/default em ambos os diretorios 1 e 2, ento: Diretrio 1: app/design/frontend/default/default/ Diretrio 2: skin/frontend/default/default/ Ento 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 youd 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, ento voc pode deixar seu tema default para o cotidiano e usar um tema adicional para ser o tema sazonal e para eventos especficos. (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 cpia de app/design/frontend/default/default e renomeie seu novo diretrio para o nome que desejar (O nome de uma interface e tema devem ser uma palavra com caracteres alfa-numricos 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 aplicao vai reconhecer seu tema. Agora faa 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 no-default.

Quando crianos um novo tema no default, voc no precisa duplicar nenhum diretorio de tema default existente. Provavelmente voc esta somente fazendo mudanas em arquivos especficos Muito provavelmente voc est apenas fazendo alteraes em arquivos especficos 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 convenes estruturais dos diretrios do Magento.

Por exemplo, se na totalidade de seu tema no 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 diretrio de um tema default do Magento (Diagrama 1), voc ver como os diretrios esto estruturados , tenha certeza de ter como referencia essa conveno 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 no default), voc precisar seleciona-lo para seu website ou loja para que as modificaes faam efeito. Navegue para o painel adiminstrativo do Magento ( ex : www.minhaloja.com.br/admin), ento v para a aba de configurao de design. (Sistema -> Configurao -> Aba Design )

Diagrama 2 No canto superior esquerdo do Diagrama 2, voc pode ver uma caixa com o nome Escopo da configurao 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 visualizao 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 no tenha nada escrito nessa caixa.

Passo 2

Na caixa Padro , abaixo do cabealho Temas, entre com o nome do seu novo tema, o qual voc quer que seja carregado para seu website ou visualizao de loja. Se voc deixar essa caixa vazia, Magento ir automaticamente carregar somente o tema chamado default . (Lembre-se , no importa como voc configura a aba de design, Magento ira automaticamente carregar o tema chamado default) Se voc selecionar um tema na administrao, esse tema ir simplesmente carregar em um nivel mais alto na hierarquia , mas ser carregado junto com o tema default. Isso ir mudar nas prximas releases do magento assim dando a voc total controle sobre que temas esto sendo carregados na sua loja. Se voc escolhesse para carregar o tema separadamente dependendo do tipo de arquivo (layouts, templates, skins ou arquivos de tradues), entre com o nome do tema no qual voc quer pegar os tipos de arquivos de concordancia.
Passo 3

Quando terminar, click no boto salvar configurao 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 criao e adminstrao 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 prximos 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 documentao. As festividade de final de ano , so 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 mes 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 ocasio para inspirar seus compradores a explorar sua loja. Uma loja como o Diagrama 3 no 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, ns 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 no sazonal, enquanto o incrementa com um tema de Natal Uma examinao 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 no sazonal da loja . A nica real diferena entre os dois designs da loja, so alguns CSSs e arquivos de imagens e algumas mudanas no codigo nos arquivos de template. J que as mudanas so na verdade bem pequenas, voc no 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 padro. 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 verso estvel. 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), ento 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 usvel e visualmente prazerosa interface grfica, o objetivo do Magento de assegurar que a aplicao capaz de localizar todos os arquivos requeridos pelo tema para manter a aplicao 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 aplicao no 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 aplicao ir carregar o arquivo e terminar a busca. Esse mtodo de criar designs chamado de fallbacks. Porque a aplicao cai para traz procurando a prxima fonte possvel de arquivos requeridos at que possa acha-los e carrega-los. Digamos que ns temos tres temas atribuidos a nossa loja e cada um desses temas contem os seguintes arquivos.
Tabela 1
default All required files my_theme_1 templates/3-col-layout.phtml templates/header.phtml images/logo.gif css/base.css css/boxes.css my_theme_2 templates/3-col-ayout.phtml css/base.css

Vamos tambem assumir que os tres temas esto atribuidos nessa hierarquia.
Tabela 2
HIGHEST my_theme_2 my_theme_1 LOWEST default

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
default All required files templates/3-col-layout.phtml templates/header.phtml templates/3-col-layout.phtml my_theme_1 my_theme_2

images/logo.gif css/base.css css/boxes.css css/base.css

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 diretrio de cada tema e no como o Magento os v. Agora vamos ver como o Magento ver os mesmos arquivos na Tabela 4.
Tabela 4
default All required files templates/3-col-layout.phtml templates/header.phtml images/logo.gif css/base.css css/boxes.css my_theme_1 my_theme_2

Voc notar como o Magento ignora a verso dos arquivos redundantes mais baixos na hierarquia e reconhece somente as veres mais alta da hierarquia. Isso porque ele j achou o arquivo requerido e no precisa mais procurar por ele, assim sendo, terminando a busca por aquele arquivo especfico e continuando a busca por outros arquivos requeridos que ainda no foram encontrados.

Criando um tema
Magento foi construido em um modelo totalmente modular que transfere sua loja a uma escalabilidade e flexibilidade infinita. Por natureza da aplicao, esse ponto de vista da programao copiado na forma em que voc vai desenvolver temas para sua loja. Nesse captulo , ns iremos explorar o que isso quer dizer para voc e como comear a desenvolver um tema para sua loja no Magento.
Introduo a blocos e layouts

Voc provavelmente trabalhou com outra aplicao eCommerce antes de chegar no Magento com essa experincia, ns 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 comear nessa documentao, ns gostariamos de assugurar que voc junte todas essas espectativas e jogue-as sem perdo janela a fora. No , isso no 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

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

junto com eles, ns 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 ateno. Se voc fizer tudo isso, ns prometemos que voc ir se amar por causa disso. Voc esta pronto? Aqui esto elas.

Criando uma nota mental

Para que ns possamos passar uma clara explicao do que so 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 No 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 ateno na descrio 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 comparao em paralelo entre conceito e atual realizao dos blocos. Eu sei que provavelmente voc esta completamente perdido. Deixe-nos explicar. Em conceito, os contornos no diagrama 2 so os blocos estruturais. Eles so os blocos pais dos blocos de conteudo e na realidade, serve para posicionar o blocos de conteudo no contexto da pgina. (como no Diagrama 3) Esses blocos estruturais existem nas formas de area de cabealho (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 so o verdadeiro recheio da pagina da loja. Eles so as representao de cada uma das funcionalidades destacadas em uma pagina (como uma lista de categorias, propagandas, caixa de preos 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 marcaes 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 Introduo a layouts.

Com Magento, voc no 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 so 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

1. 2. 3. 4.

Aqui est a lista completa de ferramentas que o Magento disponibiliza para voc construir seus prprios temas:
Templates Layouts Blocos 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 produo , 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 Configurao de Cache . Fazendo isso voc tem a certeza que ver as mudanas fiis em sua loja enquanto as faz.

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

Antes mesmo de comear a criao do cdigo para a loja, voc precisar se perguntar que tipo de estrutura de pgina voc gostaria de ter para cada pgina da sua loja. Faa uma lista que se parea com essa.

Home usar uma estrutura de trs colunas.

Lista de categorias ir usar uma estrutura de duas colunas que inclue uma coluna a direita.

As paginas do cliente iro 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 cdigo (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 propsito . Tudo que ele realmente contm (sem contar com os elementos <head>) , a presena dos cdigos que servem para posicionar cada um dos blocos estruturais nas areas codificadas de concordncia.

Exemplo de um esqueleto de template Ao visualizar o esqueleto do template acima, voc ir notar um mtodo em PHP chamado <?=$this->getChildHtml()?> dentro de cada uma das tags de apresentao. 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 so a maneiras pelo qual cada bloco estrutural indentificado no layout.

Trs : 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 questo para cada funcionalidade da pgina, Por exemplo, se voc tem uma area para um mini carrinho de compras, as tags para somente essa funcionalidade tero seu prprio arquivo de template. O mesmo para as etiquetas de preo dos seus produtos, assinatura de newsletter, etc Todas essas funcionalidades j vem com o Magento, ento voc pode usa-las como referencia ao construir a lgica das suas tags. Onde salvar nossas templates A totalidade das tags para qualquer pgina da sua loja introduzida atravs de um vetor de templates, onde cada um representa uma funcionalidade de um mdulo. Para descobrir que templates esto 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 Adminstrao do site e navegue para Sistema -> Configurao. 2. Selecione sua loja no seletor no quanto superior esquerdo da pgina. 3. Quado a pgina reiniciar, selecione a aba Desenvolvedor (ultima aba) e selecione Sim para Dicas de Caminho de Modelo , essa opo est sob o menu DEBUG, Salve a configurao

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 cdigo , tudo que voc precisa fazer seguir o caminho descrito no bloco e modificar o template em questo.

QUATRO: Mude seu Layout para refletir o seu design

Onde esto os layouts?

J que voc distribuiu algums cdigos de marcao, voc provavelmente gostaria de mudar a posio das templates na pgina para ver como est seu progresso. Para acessar os arquivos de layouts , v para app/design/frontend/your_interface/your_theme/layout/. Assim como os templates, os layouts so 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 pgina que voc quer modificar, e veja o caminho desse arquivo de template que foi disponibilizado para voc atravs 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 diretrio dentro do diretorio do tema (indicado em negrito, que o nome do modulo) para achar o arquivo de layout em questo. Ento no caso do mini-carrinho, voc sabe que tem que procurar por checkout.xml para modificar a posio do mesmo. Cada arquivo de layout (caso ele seja necessrio) , mais tarde tem sees em comandos de layouts baseados por pgina. Cada area do layout por pgina est claramente marcado com comentarios que refletem seu uso, mas a aplicao em si reconhece a separao do layout e lida com cada um deles.

Layouts padro versus atualizaes de layout

Existem dois tipos de layouts, padro (default) e atualizaes. Um layout default (page.xml) um layout que por padro aplicada em quase todas as paginas da loja. Todas os outros so atualizaes de layout, que simplesmente atualizam o layout padro em uma base por pagina. Vamos pegar por exemplo o esqueleto do seu template.

No layout padro, voc o tem em um conjunto de trs colunas, que significa por padro que a maioria das paginas na sua loja vo ter a estrutura de trs colunas. Mas no a estrutura de trs 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 mudana, voc no vai mecher no layout padro e abrir o arquivo catalog.xml no qual voc pode colocar alguns comandos de layouts que dizem a sua aplicao para carregar a estrutura de duas colinas para sua pagina de produtos em vez do padro que so 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 padro, voc quer a caixa de assinatura de newsletter na sua coluna da direita. Mas na pagina de conta do cliente, voc no quer que ela aparea. Nesse caso, voc no 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.

Introduo a Layouts
Layout, pela aparncia de seus componentes, pode facilmente faze-lo acreditar que para trabalhar com ele, voc deve estar armado com um extenso conhecimento de lgica de programao. Nada pode ser to distante da verdade. Layout contruido com um pequeno conjunto de tags XML que so facis e divertidas de se aprender. Conhecendo alguns conceitos e comandos chaves sobre layout, voc em breve estar armado com a confiana e conhecimento para facilmente modificar o design da sua loja para as especificaes 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 padro (default) e atualizaes de layout que so feitos de XML TAGS fceis de se aprender. Com esses comandos de layout voc pode modificar/atribuir relaoes 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 especficos de blocos em um pagina. Arquivos de layouts so separados em um nivel modular, todo mdulo, traz seus prprios arquivos de layout (por exemplo catalog.xml um arquivo de layout para o mdulo catalog, customer.xml para o mdulo customer etc.) Esses arquivos de layouts esto localizados em app/design/frontend/your_interface/ your_theme/layout/ e cada arquivo e mais tarde separado por alas ou containers (handles veja diagrama 1), cada ala (com e exceo do <default>) atribui suas atualizaes inclusas para a pagina especifica da loja correspondente.

Alguns arquivos de layouts podem conter a ala <default>, Quando o Magento l os arquivos de layouts, ele primeiro pega os updates de layouts atribuidos a ala <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 atualizaes de layout de cada pagina especfica, finalizando a construo da pagina da loja. O sistema foi construido dessa maneira para poder permitir facilmente a adio e remoo dos mdulos sem afetar outros mdulos no sistema.

Anatomia de um Layout
Um Layout contem um pequeno conjunto de tags XML que atuam como instrues detalhadas para aplicao em como construir uma pagina, o que construir com ela e o comportamento de cada bloco dessa construo. A melhor maneira de entender o layout simplesmente mergulhar na sua estrutura e ataca-lo por todos os angulos. Para que voc faa isso, aqui est algumas propriedades de comportamento de cada XML tag do layout. Ala ou Container (Handle) Ala (diagrama 1) um identificador pelo qual a aplicao determina o que fazer os as atualizaes aninhadas a ela. Se o nome do container for <default>, ento a aplicao sabe que sua atualizaes aninhadas devem ser carregadas em quase todas as paginas da loja, antes de carregar layouts especificos da pagina (Ns dizemos, quase todos, porque algumas paginas excepcionais como popup da imagem do produto no carrega o layout no container <default>). Se magento encontrar alas diferentes que <default>, ele ira atribuir suas atualizaes aninhadas dentro da ala a aquela pagina especfica correspondente pela ala. Por exemplo, <catalog_product_view) contem as atualizao de layout para a pagina de visualizao de produto, enquanto <catalog_product_compare_index> contem atualizaes para a pagina de comparao de produto. Alas (Handles) so identificadores de nome NICO que como um designer seu um entendimento da programaao do Magento, nunca precisar ser mudada.
<block>

Magento determina o comportamento e a apresentaao visual de cada bloco de contruo via tag <block> . Ns 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 atribudo a ele atravs dos atributos da tag. Um bloco estrutural geralmente contem o atributo as, atravs dele a aplicao capaz de se comunicar com a area designada (pelo metodo getChildHtml ) em um template. Voc ir notar varias ocorrncias desse atributo as no lauout default, porque por natureza o layout default aquele que constri a base no qual layouts especficos de cada pagina podem adicionar conteudo. Por exemplo, no layout default , existem blocos estruturais tais como, left, right , content , footer sendo apresentados. No estou dizendo que esses blocos no podem existir em atualizaes de layout normais,

mas por qu no configurar primeiramente blocos de estrutura recorrentes no layout default, e depois comear adicionando conteudo pgina por pgina? 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 no 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 so duas maneiras de posicionar um bloco de conteudo dentro de um bloco de estrutura. before=- e after=- so 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 aplicao 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 marcao 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 mtodos para ao estar em breve disponivel, mas por enquanto a melhor maneira de aprender os diferentes mtodos para as aes brincando com elas nas atuais atualizaes de layouts disponveis. as Esse o nome pelo qual um templete chama o bloco em que esse atributo esta atribuido. Quando voc ver o mtodo 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 rpido : O mtodo <?=$this->getChildHtml(header)?> no esqueleto do template tem relao com <block as=header> )

<reference> <reference> usado para fazer referencia a outro bloco. Fazendo uma referencia a outro bloco, as atualizaes dentro da tag <reference> iro 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 no estiver familiarizado com ela. Ao se encontrar com as atualizaes 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 relao 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, ns sabemos que sem sujar as mos, voc nunca ir absorver o que lhe foi explicado com palavras, por isso, Aqui esto dois exercicios para sentir como funciona trabalhar com layouts. Para acompanhar esses exercicios voc deve ter o tema default do Magento pronto e acessivel.

Exerccio #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 -> Configurao, 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 Configurao , e volte para o Frontend da sua loja e recarregue-a. 2. Quando a pgina 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 atravs do mdulo 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 diretrio chamado template o nome do mdulo 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 atualizaes 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 mudana refletida. Observao : Pelo menos na minha instalao para que aparecesse o carrinho, eu tive que cadastrar um produto e adicion-alo na mesma. S assim consegui fazer o exercicio. Exerccio #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 cabealho. 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 atravs do mtodo <?=$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 atualizao 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 Avanada) e contacts.xml (que chama Contact Us). 3. Agora que voc encontrou a area dos items dos links indiviuais, voc ir agora comear os passos para isolar Busca Avanada dos outros para ter seu prprio espao no cabealho. Primeiro v para a pagina. page.xml e crie um novo bloco. Now that youve 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 its 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 atualizanoes necessaris para esperar esse link em header.phtml. Abra o arquivo em questo 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 Avanada no cabealho em vez do Footer.

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