Terminologias de design do Magento Você já ouviu falar sobre o inacreditável open-source Magento e que ele oferece recursos recursos incriveis já no seu pacote básico. Você dedicou bastante tempo para ve-lo em ação. 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. Então, por onde começar? 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 começar a criar um tema de sua preferencia para a ferramenta. Isto dito, devido à dimensão considerável e flexibilidade que oferecem as funcionalidades do Magento, não é possível documentar todas as maneiras diferentes em que pode ser personalizados para uso. Para ajudar com isso, você pode consultar fóruns e WIKI na comunidade, onde pessoas com experiências da vida real serão capazes de aponta-lo no sentido correto. Além disso, lembre-se que Magento é uma aplicação em constante desenvolvimento, pois apesar dos nossos maiores esforços para esta documentação pode não refletir fielmente a versão que você está trabalhando no momento. Esta documentação é amplamente dividido em quatro capítulos e pode ser ignorado tanto para frente ou para trás . Para acessar rapidamente apenas as informações que você mais precisa. No entanto, porque cada capítulo funciona como um prelúdio para a próxima, aconselhamo-lo a seguir a documentação na ordem em que foi escrito. Magento Design Terminologias

Para acompanhar, juntamente com a documentação, é fundamental que você tenha uma boa compreensão das terminologias usadas para descrever os aspectos do sistema Magento. As terminologias introduzidas neste capítulo são provavelmente um novo território para você, leia-os com calma e atenção. Mas mais importante ainda, não se desanime se você não compreender plenamente o conceito de todas estas novas terminologias – Este capítulo serve apenas para apresentar todos de uma vez e os capítulos futuros irão se aprofundar e expandir as simples definições. Terminologias abordados neste capítulo são: • Website, Loja e Visualização de loja • Interface • Temas

o Layouts o Modelos o Skins

• Blocos o Blocos Estruturais

o Blocos de Conteudo

Website e Lojas

Um website é um conjunto de lojas que compartilham o mesmo cliente e informação do pedido, assim como os carrinhos de compra. A loja é uma coleção de visualizações de loja. Estes são termos gerais que podem ser adotados para definir as necessidades específicas dos comerciantes individuais. Alguns cenários para definir os diferentes usos do site, loja e loja pontos de vista são as seguintes: Cenário 1

Uma empresa chamada Dubloo Inc cria uma presença on-line, com três lojas de roupa diferentes para atender três tipos de publico-alvo com três niveis de preços. Dubloo Inc quer todas as três de suas lojas compartilhem clientes e informações de compra. Dubloo Inc teria um Web Site e três lojas sobre sua presença online. Loja iria definir lojas dividias por niveis de preço e website seria DUBLOO inc umbrella. Cenário 2

Uma empresa chamada My Laptops quer abrir dois websites separados onde ambas vendem laptops só que com preços diferentes. Eles tambem querem oferecer opçoes de Ingles e Espanhol em cada um dos sites, cada um podendo ter items que correspondem a linguagem selecionada. Eles tambem precisam sincronizar informações de clientes e pedidos entre os sites. Nesse cenário a visualisação de loja estaria definido como Ingles e Espanhol e Meus Laptops e Laptops Baratos estariam definidos como lojas.

Cenario 3

Uma empresa chamada Bongo´s Instruments quer criar uma presença online. Sem nenhuma outro ramos de lojas. Bongo´s Instruments é a loja e tambem é o website. Interface

Interface é uma coleção de temas que determinal a saida visual e as funcionalidades da visualização da sua loja. Uma interface pode ser selecionada tanto no nivel de website quanto no nivel de visualização de loja pela interface do painel de adminstração. (Aprenda selecionar uma interface para seu website ou loja aqui). Se você selecionar uma interface no nivel de website, todas as lojas irão herdar a interface do seu site. Você pode depois selecionar uma interface no nivel de

visualização 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 “John´s Panacea” , estudando os efeitos de cada um dos métodos mostrados abaixo. Você pode facilmente determinar o método a aplicar para as necessidades de design do seu negócio. 1 – Declaração em nível de Website

Se você quer criar um design unificado para todas as suas 4 lojas, você irá selecionar uma interface no nível de Website, nesse caso todas as 4 lojas irão herdar a interface do website. 2 – Declaração no nível de loja.

Se você quiser incorporar um design unico para cada loja, você pode selecionar uma interface por visualização de loja, nesse caso cada loja vai ter o seu design único. Temas

Um tema é uma combinação 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 Padrão (default) Toda interface vem com um tema chamado ‘default’ que é o tema principal da interface. Quando você seleciona uma interface para sua loja, a aplcação

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 ‘não 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 não padrão Um tema não padrão pode conter quantos arquivos de temas você achar necessario. Esse tipo de tema tem o objetivo de fazer pequenas alterações 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 são basicos arquivos XML que definel a extrutura do bloco em paginas diferentes, assim como controle as informações META e encoding das paginas . Para uma visão mais aprofundada sobre o assunto leia a introdução para layouts) ● Templates (localizado em app/design/frontend/your_interface/your_theme/template/) Esses são arquivos PHTML que contem tags (X)HTML e tags em PHP necessárias para criar a lógica para apresentação visutal. ● Locale (localizado em app/design/frontend/your_interface/your_theme/locale/) Esses são arquivos de texto simples organizados por linguagem que contem as traduções dessa copia da loja. ● Skins (localizado em skin/frontend/your_interface/your_theme/) Esses são arquivos especificos em Javascript, Css e imagens específicas para um bloco que complementam seu (X)HTML.

Blocos

Termos não foram traduzidos pois vão aparecer internamenta na sua instação do magento. Blocos são 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 são blocos criados para um proposito unico de selecionar uma estrutura visual a uma pagina da loja, tais como o cabeçalho(header), coluna da esquerda(left Column), coluna da direita (right column), coluna principal (main) e rodapé (footer)(Diagrama 1). Blocos de Conteudo

Esses são os blocos que produzem o atual conteudo dentro de cada bloco de estrutura. Eles são as representações 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 são cada um deles seus proprios blocos de conteudo. (Diagram 2). Em vez de incluir template em cima de template como uma tipica aplicação eCommerce faria para agregar toda a saida (X)HTML, Magento agrega e arruma paginas de conteudo através dos blocos.

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 default my_theme_1 my_theme_2

All required files templates/3-col-layout.phtml templates/3-col-ayout.phtml

templates/header.phtml css/base.css

images/logo.gif

css/base.css

css/boxes.css

Vamos tambem assumir que os tres temas estão 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 my_theme_1 my_theme_2

All required files

templates/3-col-layout.phtml templates/3-col-layout.phtml

templates/header.phtml

images/logo.gif

css/base.css css/base.css

css/boxes.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 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 default my_theme_1 my_theme_2

All required files

templates/3-col-layout.phtml

templates/header.phtml

images/logo.gif

css/base.css

css/boxes.css

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.

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.

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 fechadasTodas 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.