Guia Basico Design Magento v1.0

7/24/2019 Guia Basico Design Magento v1.0

1/56

GUIA BSICO DE DESIGN PARA MAGENTO

http://www.ronaldodiniz.com.br

https://www.facebook.com/pages/RonaldoDiniz/128411380596779

Verso 1.0

GUIA BSICODE

DESIGNPARA

MAGENTO

Baseado no Magento design Guide


2/56




Verso 1.0

Guia bsico de design para Magento

Baseado no Magento design Guide

Verso 1.0


3/56




Verso 1.0

ndice

1 Viso geral. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5Escopo deste manual. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5Prrequisitos. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5Sobre este Guia. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6Sobre a traduo. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6

2 Design Magento - Conceitos e terminologia. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7Sites, Lojas e visualizaes de loja . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7Pacotes de temas (design package) e temas. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9Temas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10 Tema default . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11 Variaes ou tema personalizado (no default). . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12

O modelo FALLBACK do Magento . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13Blocks e layouts . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14Blocks . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14Widgets. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16Terminologia widget . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16Exemplos de widget . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16

3 Estrutura de diretrios dos Pacotes de temas e dos temas no Magento. . . . . . . . . . . . . . . 18O pacote BASE . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18O pacote default . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20

Pacotes de tema personalizado. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20Temas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21

4 Aplicando temas em Magento. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22Passo a passo 1: Criando e aplicando um tema. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22Atribuindo um pacote e um tema para a loja . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22Passo a passo 2 Aplicando mltiplos temas. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25Hierarquia dos temas. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .30Importantes regras de hierarquia a se lembrar . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32Excees de design . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33


4/56




Verso 1.0

5 Customizando temas Magento. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34Criando os diretrios bsicos para seu pacote/tema. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34Criando um novo pacote e tema(s) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34Aplicando seu novo pacote e tema para seu site. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35Desabilite o sistema de cache . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .35Aplique seu pacote/tema personalizado em sua loja . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 36Customizando os arquivos skin . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 36Exerccios rpidos para comear . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 36Exerccio 1: Modifique o CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 36Exerccio 2: Alterar a LOGO . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 36Customizando com arquivos de layout. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 37Introduo ao layout . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 37Como o layout do Magento funciona . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .40A anatomia de um arquivo de layout . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 42Controladores . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 42 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 42 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 43Regras do XML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 44Como encontrar o arquivo de layout para modificar . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 45Exerccios rpidos para comear . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 46Exerccio 1 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 46Exerccio 2 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 47

Customizando com o arquivo de layout local (local.xml) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 47Customizando com arquivos templates. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 49Exerccio 1 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 50

6 Guia rpido para criao de um tema do zero. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 52Primeiro: desabilite o cache do sistema . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 52Segundo: defina todos os tipos de estruturas possveis para sua loja . . . . . . . . . . . . . . . . . . . . . . . . . 52Terceiro: corte seu xHTML de acordo para funcionalidade . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 53Quarto: altere o layout para refletir seu design . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 55

7 Outros Recursos. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 56


5/56




Verso 1.0

1 Viso geral

Guia bsico de design para Magento uma introduo ao conhecimento sobre ofuncionamento estrutural do Magento e os mtodos para desenvolvimento de temas.Explica como criar um tema totalmente personalizado com todas suas preferncias,

descreve o mtodo mais rpido e descomplica o desenvolvimento de um novo tema. Sevoc est comeando j deve ter percebido que o Magento um sistema extremamenteflexvel e complexo, no cabendo aqui explicar todos os diferentes mtodos depersonalizao, no entanto, este guia trar o bsico indispensvel para criao de temasque garantir a voc um ponto de partida para sua curva de aprendizagem.Para se manter atualizado, visite sempre o frum oficial da comunidade, o wiki paraadquirir mais detalhes e meu blog www.ronaldodiniz.com.br onde sempre incluo dicasimportantes de design em geral com foco principal no Magento. Alm disso, lembrese queo Magento est em constante atualizao, portanto, esta documentao pode no refletirfielmente a sua verso do Magento, mas ainda sim sero teis todos os conceitos

apresentados a voc.Com este guia voc entender a estrutura de um tema para Magento, se familiarizar comtermos mais comuns usados pela comunidade e principalmente entender que estesistema no um bicho de sete cabeas (risos).

Escopo deste manualO foco deste guia voltado para o Magento Comunity Edition e suporta a partir dar verso1.4, no vou aqui falar sobre o Magento Go ou Enteprise pois no atendem ao publicobrasileiro em geral, mas fique tranqilo pois a diferena fica apenas na nomenclatura dealgumas pastas, para mais detalhes consulte o Magento Design Guide.

PrrequisitosVoc precisar de uma verso Magento CE instalada para praticar os exerccios mostradosneste manual. Eu recomendo, mas no obrigatrio o domnio de xHTML, CSS, e noesbsicas de PHP e XMLAlm disso, para facilitar o entendimento do Magento aconselho a instalao da traduofeita pelo Mrio SAM, que na minha opinio a traduo mais fiel e atualizada, confira opacote de traduo no e baixe a traduo mais recente.www.mariosam.com.br

5


6/56




Verso 1.0

Sobre este GuiaEste guia foi baseado no Magento design Guide, distribudo gratuitamente pela Magentoinc (original em ingls).Este guia contm captulos que podem ser ignorados a fim de acessar informaes maisimportantes para voc no momento. Cada captulo, no entanto, funciona como umpreldio para o prximo, ento aconselho a estudar este manual na ordem descrita e nofuturo use como fonte de consulta.

Sobre a traduoAntes de ler este manual entenda que eu no sou especializado em tradues, meu intuitoaqui trazer a voc, caro leitor, um contedo que me ajudou muito no inicio do meuaprendizado com o Magento e juntamente melhorar meu conhecimento em ingls.Por isso perdoe alguns possveis erros que este manual possa conter e ficarei muito gratoque me informe dos mesmos pois asism oderei melhorar cada vez mais.Esta a primeira verso da traduo do guia, portanto periodicamente visite meu site parasaber sobre verses mais atuais deste guia, ou uma verso melhorada do mesmo. use o linkno topo da pagina ou acesse: http://www.ronaldodiniz.com.br.Bons estudos.

6


7/56




Verso 1.0

2 Design Magento - Conceitos e terminologia

Figura 1 Hierarquia sobre Sites, Lojas e Visualizaes de lojas no Magento

Para acompanhar este guia importante que voc entenda a terminologia e os conceitosfundamentais dos aspectos frontend do Magento. provvel que estes termos sejamnovidade para voc, no desanime caso no entenda tudo de imediato. Aqui darei uma

viso geral e no decorrer dos prximos captulos entraremos com mais detalhes, destaforma voc entender estes termos com mais fluidez.

Sites, Lojas e visualizaes de lojaO Magento suporta a criao e manuteno de mltiplas lojas em uma nica instalao, porisso, estabeleceu uma hierarquia que define vrias lojas individuais em uma nicainstalao.No Magento um site uma coleo de lojas e estas so subdividas em visualizaes delojas. Estas camadas, embora parea confuso inicialmente, garante uma poderosaflexibilidade quando se projeta solues para negcios com Magento.

Um site composto de uma ou mais lojas que compartilham as mesmas informaes,formas de pagamento e carrinho de comprasLojasso colees de visualizaes de loja e podem ser configuradas de diferentesmaneiras. Sua principal funo fornecer uma plataforma que permite agrupar asvisualizaes de lojadentro de uma lgica para se relacionarem entre s junto ao site.Visualizaes ou vises de lojas (como preferir) so as instncias de lojaspropriamente ditas. A maioria das lojas ter uma nica viso de loja associada, Mas aloja tambm pode ter mltiplas vises de loja, este recurso normalmente usadopara diferenciar idiomas. Portanto, caso queira ter uma loja em Portugus eEspanhol, por exemplo, com o mesmo banco de dados podemos criar duasvisualizaes de lojas diferentes para cada idioma.

Site

Loja

Visualizaode loja

Marca 1 Marca 2

Loja Principal Loja secundria Loja Principal

Portugs Espanhol Portugs Portugs

7


8/56




Verso 1.0

Estes so conceitos muito gerais e podem ser adaptados para atender s necessidadesexclusivas de cada loja, veja a seguir alguns cenrios para ilustrar os diferentes usos desites, lojas e visualizaes de lojas.

Cenrio 1 loja nicaUm a empresa chamada Bongo Ferramentas quer expandir seus negcios para internet.A Bongo tem um nico catlogo e no precisa de suporte para idiomas. Este o cenriomais simples onde a estrutura ser: Site, Loja, Visualizao de loja.

Figura 2 Simples Site, Loja e Visualizao de Loja

Cenrio 2 Mltiplas lojas relacionadasUma Companhia chamada Dubloo cria uma empresa online, com trs lojas de roupascom diferentes nveis de preo para pblicos especficos. Dubloo quer que todas as lojascompartilhem seus clientes, de forma que ao se cadastrar em uma das lojas ele estarcadastrado em todas. Neste cenrio Dubloo ter um Site com trs lojas online. Pelo fato decada loja suportar um nico idioma, cada loja ter apenas uma visualizao de loja.

Figura 3 nico Site com mltiplas lojas

Site

Loja

Visualizao de loja

Bongo Ferramentas

Bongo Ferramentas

Bongo Ferramentas

Site

Loja

Visualizao de loja

Menor preo

Menor preo

intermedirio

intermedirio

Melhor nvel

Melhor nvel

Dubloo

Cenrio 3 Mltiplas lojas independentesA companhia Home Laptops quer uma presena online com duas lojas distintas em queambas vendem notebooks, mas com diferentes preos e diferentes selees de produtosem algumas categorias. Eles tambm querem oferecer opes de idioma ingls e

portugus em cada loja. O cliente precisa se cadastrar individualmente em cada loja, mas as8


9/56




Verso 1.0

lojas no precisam compartilhar estas informaes entre si. Neste cenrio Home Laptopsteria dois sites (com clientes separados compartilhados em um nico backend) cada umacom uma loja e duas visualizaes de loja (uma para ingls e outra para portugus).

Figura 4 Mltiplos sites com mltiplas lojas e visualizaes de lojas

Site

Loja

Visualizao de loja

Home Laptops

Portugus

Home Laptops Promo Laptops

Ingls

PromoLaptops

Portugus Ingls

Pacotes de temas (design package) e temasAo observar a hierarquia de sites, lojas e visualizaes de lojas na seo anterior, voc podever que uma nica instalao Magento pode executar vrias lojas que podem, ou no,compartilhar o visual e algumas informaes.Para controlar exatamente a aparncia de cada loja na sua instalao, o Magento permite

que voc crie temas. Temas relacionados so agrupados em pacotes de temas (original:design packages, algumas vezes chamado apenas de pacote o package). Cada lojaMagento pode usar seu prprio tema, ou todos eles podem compartilhar um nico tema,ou uma combinao de ambos.

Um pacote de temas uma coleo de temas relacionados. Obrigatoriamente terao menos um pacote instalado, mas voc pode ter quantos pacotes quiser.Quando instalado, Magento tem um pacote de tema especial chamado base eoutro pacote de exemplo chamado default. Voc pode instalar quantos pacotesde tema desejar.Um Temadentro de um pacote de temas contm os arquivos reais quedeterminam a aparncia e a funcionalidade do forntend de sua loja. Os temas soabordados com mais detalhes na prxima seo, mas resumidamente um temacontm arquivos de estrutura (layout, template e traduo especficos) einformaes de estilo (arquivos css, imagens e arquivos javascripts especficos dotema). Cada tema pode pertencer a penas um pacote. Por conveno cada pacotede temas deve conter um tema padro chamado default. Alm disso, um pacotede temas pode ter um nmero ilimitado de variaes desse tema padro e podemter o nome que desejar.

9


10/56




Verso 1.0

Figura 5 Relao entre pacote de temas e temas no Magento

Tanto o pacote de temas quanto o tema pode ser atribudo ao site e/ou a visualizao deloja atravs do painel administrativo do Magento. Se voc atribuir um pacote no nvel desite, todas as visualizaes de loja herdaro esse pacote. Voc pode atribuir mais de umpacote na loja e/ou visualizao de loja de sobrepondo a configurao do site de formasimples e eficaz.

Pacote Base Pacote design 1 Pacote design 2

Tema Default Tema Default Tema Default

Variao deTema 1

Variao de Tema 2

TemasUm tema Magento composto de arquivos estruturais (layout, template e locale) earquivos de skin (css, imagens e JavaScripts especficos do tema) que so responsveispela experincia visual da sua loja. Estes arquivos residem em duas principais pastas dentrodo seu sistema: Diretrio app/design so arquivos que controlam a forma como os modelos de

pgina so montados. Diretrio skin arquivos que controlam os aspectos visuais do site, arquivos css,

imagens, etc.

O Magento quebra seus arquivos de tema em diretrios separados para um maior nvel desegurana de cada pasta em seu servidor. Os arquivos do diretrio skin precisam seracessados pelo browser e tem uma configurao de permisso muito aberto. Os arquivosno diretrio app/design s precisam ser acessveis ao aplicativo e tem um nvel maisfechado, bloqueando o acesso via browser.Dentro de cada diretrio, os arquivos so divididos em mais subdiretrios de acordo com otipo:

10


11/56




Verso 1.0

Figura 6 Tipos de arquivos associados aos temas Magento e suas localizaes

Abaixo uma pequena explicao sobre cada diretrio e os arquivos contidos.Arquivos de template na pasta app/design/fontend/< pacote de temas>// soorganizados nas seguintes pastas: Layout contm arquivos XML bsicos que definem a estrutura de diferentes blocos

para todas as pginas bem como os metadados e codificao. Template contm arquivos PHTML neles temos marcaes (x)HTML e PHP necessrio

para apresentao lgica. Alguns arquivos so pginas do tema e outras so blocos domesmo.

Locale simples arquivos de texto CSV organizados em uma base por contedo detraduo (como pares de nome e valor) para todo texto produzido pelo Magento (porexemplo: para elementos de interface e mensagens e no para produtos e categorias).

Arquivos de visual so organizados em skin/frontend/< pacote de temas>/< tema>/ nasseguintes subcategorias: css contm os arquivos CSS usadas no visual do site. Images contm todas as imagens usadas pelo tema. Js contm JavaScript especficos do tema como rotinas e funes. Bibliotecas

javaScript e demais arquivos que possam ser compartilhados entre os temas socolocados na pasta /js no diretrio raiz do Magento.

skin

css

images

js

app/design

layout

template

locale

Tema defaultCada pacote de temas do Magento deve conter um tema chamado default, o temaprincipal do pacote.Ao atribuir um pacote de tema em sua loja, a menos que descrimine um tema especfico, oMagento automaticamente procurar pelo tema default no diretrio do pacote e ir uslo para montar o frontend.

11


12/56




Verso 1.0

Figura 7 Os pacotes de tema devem ter um tema default.

O tema default deve conter todos os requeridos layouts, templates e skins necessriospara montagem da loja. Para qualquer arquivo que no for encontrado no temapersonalizado o Magento ir olhar o tema default do pacote.

Variaes ou tema personalizado (no default)Uma variao do tema no precisa ter todos os arquivos como no default, ele deve conteros arquivos necessrios para a personalizao. Variaes de tema permitem que voc faafacilmente modificaes do tema padro e que podem ser aplicadas a toda sua loja,subsees de loja, pginas especficas ou a uma loja separada dentro da mesma instalaoMagento. Voc pode alterar o tema default para o tema personalizado, alm de carreglojunto com o padro.

Figura 8 Variaes de tema em um pacote de temas.



Variao deTema 1

Variao de Tema 2



Variao deTema 1

Variao de Tema 2

12


13/56




Verso 1.0

Para exemplificar, ns podemos: Sobrescrever uma parte do seu site que precise de menos detalhe na pgina de

produto. Criar uma seo de sua loja que antecipa a prxima coleo de produtos, mas sem

ofereclos a venda. Mudar de visual para uma data comemorativa, mas apenas por um perodo. Criar um hotsite de outra diviso da sua empresa, que precisa da mesma marca

global como a do site principal, mas com modificaes para adequar o catlogo e opblico.

O modelo FALLBACK do MagentoA arquitetura dos temas para Magento mudaram da verso 1.3 para 1.4 de forma a garantirmaior integridade perante tantas atualizaes. Nessa mudana os arquivos do tema foramreformulados consideravelmente para melhorar o desempenho e acessibilidade, mas amaior mudana foi na estrutura e na hierarquia usada pelo Magento.Magento sempre usou a lgica fallback para renderizao da loja, mas na verso 1.4 isso foiampliado para incluir o pacote de temas base como ponto de fallback final. Em versesanteriores o fallback era apenas dentro do tema e uma funo personalizada no poderiaser compartilhada entre os temas sem replicar todos os arquivos.Veja este exemplo para entender o qu fallback e como ele funciona dentro do Magento,caso seu tema personalizado exija um arquivo CSS chamado styles.css, mas o Magento incapaz de encontrar este arquivo dentro do seu tema personalizado, o Magento ir entopesquisar na pasta do tema seguinte da hierarquia e continuar a procurar seguindo ahierarquia at encontrar o arquivo styles.css. Este mtodo de construo chamado defallback porque a aplicao cai para traz para a prxima fonte retroativa possvel dearquivos necessrios para recuperar e carregar um arquivo perdido.A hierarquia fallback do Magento funciona como mostrada no diagrama a seguir.

Figura 9 lgica de fallback seguida pelos temas do Magento.

StartProcurar em:

nome_do_pacote/tema

Procurar em:nome_do_pacote/

default

Procurar em:base/default

Funcionou? Funcionou? Funcionou?

Mostra comoindicado

Mostraum erro

sim

no no no

sim sim

13


14/56




Verso 1.0

BlocksBlocos uma maneira pela qual o Magento distingue o conjunto de funcionalidades nosistema e forma modular para gerencilo tanto do ponto de vista visual como funcional.Existem dois tipos de blocos que trabalham juntos para criar uma sada visual.Blocos estruturais criados com o nico propsito de atribuir uma estrutura visual a umapgina da loja como head, coluna da esquerda, coluna principal e footer.Blocos de contedo produzem o contedo real dentro de cada bloco estrutural. Estesrepresentam cada funcionalidade de cada recurso dentro de uma pgina e utilizam osarquivos de template para gerar o xHTML a ser inserido no seu bloco estrutural pai. Algunsblocos de contedo so: Category list, mini cart, product tags, product listing, etc. Ao invsde incluir contedo aps contedo a fim de reunir toda a produo do xHTML, algo tpicoem outros sistemas de loja, o Magento organiza e agrupa todo o contedo em blocos.Layout essencialmente so arquivos que mapeiam os blocos de contedo para seusblocos estruturais. Layouts em Magento possuem duas funes: Definir os blocosestruturais e de contedo e informar ao Magento como e onde eles se conectam.

Quando usada de forma correta, este mecanismo permite que voc edite e mantenhaapenas os arquivos que precisa personalizar para seu tema personalizado e todas as outrasfuncionalidades so fornecidas pelo tema default ou pelo pacote de temas base.Por exemplo, o Magento mantm 4 temas de demonstrao default, blank, modern eiphone. Antes da introduo do pacote base, todos os arquivos do tema tinham que sercopiados para cada pacote e mantido, testado e debugado em cada um. Com a introduodo pacote base mantemos trs vezes menos cdigo. Para entender veja os temasdefault/default e default/blank que so implementados somente com mudanas de estiloCSS e obtm todos os arquivos de template do pacote base.E por ltimo, faz que seus temas sejam mais upgrade proof (literalmente a prova deupgrades) e permite que voc precise administrar bem menos cdigo. A maioria dos temaspersonalizados s altera um subconjunto das funcionalidades Magento, por isso, todas asprincipais funcionalidades estaro disponveis no pacote base e pode ser sobrescrito porum arquivo especfico do tema personalizado.

Blocks e layoutsExistem alguns conceitos e ferramentas que voc precisa entender para ser um designerbem sucedido no Magento: Blocos estruturais (Structural Blocks) Blocos de contedo (Content Blocks) Layout

14


15/56




Verso 1.0

Figura 10 Um exemplo de blocos estruturados.

Figura 11 Um exemplo de blocos de contedos mapeado para blocos estruturados especficos.15


16/56




Verso 1.0

WidgetsVoc deve estar familiarizado com o termo widgets de outras plataformas online. NoMagento widgets so blocos do frontend com um conjunto de opes configuraes prdefinicas. Estas opes de configuraes so exibidas em uma rea especfica no backendda loja onde um widget criado ou editado pelo administrador da loja. A facilidade deconfigurar opes do widget permite o total controle de uma pgina para osadministradores. Um aspecto importante dos widgets que a sua utilizao elimina algunsnveis de personalizao do tema que era exigida para a configurao de uma loja.Essencialmente um mtodo que permite aos usurios inserir cdigos dinmicos semnenhum conhecimento de programao (incluindo os dados do produto, por exemplo), emreas da Loja Magento prdefinidas pelo desinger / programador. Isso garante maiorcontrole e flexibilidade na criao de informao e de contedo de marketing por meio deferramentas do administrador, permitindo um controle intuitivo e eficiente do contedo,tais como:

Dados de produtos dinmicos em uma pgina de marketing. Informaes dinmicas como produtos vistos recentemente em uma pgina. Imagens promocionais posicionadas em diferentes blocos, coluna do site e em

outros locais em todo frontend. Elementos interativos e blocos de ao (sistemas externos, Chats, vdeos, votao, etc). Elementos flash dinmico e interativo facilmente editado e incorporado dentro de

uma pgina aprimorando a experincia interativa para o usurio.

Terminologia widget

Frontend Block elemento que cria uma sada estrutura visual atribuindo umaestrutura visual ou produo de contedo real

Magento Widget um bloco frontend que implementa um widget especial quepermite diferentes opes de configurao por cada instncia do bloco, bem como a

capacidade de ter mltiplos blocos independentes na pgina. Magento widget instance um bloco em uma ou vrias pginas que receba estas

opes de configurao definidas pelo administrador da loja. O mesmo widget podeser adicionado vrias vezes em lugares diferentes, gerando vrias instncias domesmo widget.Note que a mesma instncia pode ser adicionada em vrias pginas (com as mesmasopes de configurao) e editada em um nico lugar.

Exemplos de widget

Por padro o Magento inclui os seguintes widgets configurveis, novos widgets podem ser

criados por desenvolvedores livremente.16


17/56




Verso 1.0

CMS Page Link mostra um link de uma pgina selecionada e permite especificar otexto e ttulo. Dois temas esto disponveis neste widget, links em linha ou em bloco.

CMS Static Block exibe o contedo de um bloco esttico. Catalog Category Link mostra um link de uma categoria selecionada e permite

especificar o texto e o ttulo, dois temas (em linha ou bloco) esto disponveis. Catalog Product Link mostra um link de um produto selecionado e permite

especificar o texto e o ttulo, dois temas (em linha ou bloco) esto disponveis. Recently Compared Products exibe um bloco que contm produtos que foram

comparados recentemente. Este widget permite especificar o nmero de produtos aserem exibidos e tem dois modelos disponveis (lista ou grade).

Recently Viewed Products exibe os produtos recentemente visualizados. Permiteespecificar o nmero de produtos a serem exibidos e tem dois modelos disponveis:lista e grade.

17


18/56




Verso 1.0

3 Estrutura de diretrios dos Pacotes de temas e dos temasno Magento

Temas so agrupados em um pacote de temas, mas, como descrito no captulo anterior, osarquivos de tema so separados em dois diretrios. Isto soa muito estranho quando seest iniciando na tematizao do Magento. Por isso este captulo mostra a estrutura de

diretrio associada a cada um dos principais pacotes e temas usados no Magento. medida que passar por esta seo observe que os nomes de diretrios para os pacotes etemas devem ser os mesmos em ambos app/design e skin. Observe tambm que abaixodesse nvel em cada diretrio, o Magento tem um conjunto de diretrios necessrios emque seus arquivos de estrutura e skin residem.

Figura 12 Tipos de pacotes e temas no MagentoO pacote BASE

O pacote base foi introduzido no CE v1.4. Sua funo garantir uma base para todas asprincipais funcionalidades do Magento, de modo que seus temas personalizados possamincluir somente as alteraes especficas do projeto ou negcio que se destinam. OMagento faz isso usando o modelo fallback, no qual ele procura os arquivos necessriospara processar em uma pgina primeiramente dentro de seu pacote de temas e caso noencontre ele seguir para o pacote base.Nota: O pacote base o ponto final de falback para todos os seus pacotes de temas,

nunca deve ser alterado quando voc criar seus prprios pacotes de tema.

Pacote Base Pacote default Pacote personalizado

Tema Default Tema Default

blank

modern

Tema Default

Variao deTema

etc

iphone

18


19/56




Verso 1.0

Isto promove uma base de cdigo limpa e um melhor meio de atualizao para seus temasporque o pacote base conter todos os arquivos que controlam o comportamento padrodo Magento (e existe um monte deles), mas seu tema personalizado apenas precisa conteros arquivos que voc tenha alterado ou usado para substituir o comportamento padro. Opacote base possui apenas o tema default e nenhuma variao pacote/tema deve serincluda dentro do pacote base.Na estrutura de diretrio, o tema base tem tanto templates quanto skin que esto nosdiretrios app/design e skin, respectivamente. O pacote base possui apenas um temadefault associado a ele, embora no seja realmente um tema completo, pois lhe falta amaioria dos arquivos de skin.

Estrutura de diretrio do pacote baseapp/design/frontend/base/defaultContem todos os arquivos de layout etemplate necessrios para asfuncionalidades do core do Magento - app

+ core - design + adminhtml - frontend - base +default + default + install + etc + locale Mage.php

skin/frontend/base/defaultContm alguns arquivos CSS e javaScript quesuportam as funcionalidades do core. No setrata, no entanto, de todos os CSS e deimagem necessrios ao visual de um site,porque estes so especficos do design e nodo core. - skin - adminhtml - frontend - base + default + default + instal

Base realmente um repositrio que torna as funcionalidades do core do Magento vlidaspara o frontend. Portanto no faa alteraes no pacote base arquivos no pacote basenunca devem ser editados. Temas personalizados devem ser feitos dentro das pastas deseus pacotes. Qualquer arquivo que precise alterar deve ser copiado do pacote base paraeu tema personalizado ou ainda pode criar um conjunto de arquivos para manter suasalteraes.Regras para trabalhar com o pacote base:

NUNCA editar os arquivos do pacote base. NUNCA criar um tema personalizado dentro do pacote base.

Nota:verses do Magento anteriores ao CE v1.4 no tem um pacote base, estas19


20/56




Verso 1.0

O pacote defaultVoc j notou que em cada instalao Magento no possui apenas o pacote de temas base,mas tambm pelo menos outro pacote de tema disponvel por padro, este pacote chamado de default.Na estrutura de diretrios este tema tem tanto arquivos de tema quanto de layout, queesto nos diretrios app/designe skin, respectivamente. Diferente do pacote base, ostemas neste pacote de demonstrao so temas completos, tero todos os arquivos CSS eimagens necessrios. Estes temas podem ser usados caso queira usar o tema default doMagento para edio de sua plataforma (eles se parecem com as lojas que voc v dedemonstrao) como um ponto de partida. Sua melhor finalidade, no entanto, ser comouma referncia ou exemplo para a criao do seu prprio pacote de temas.O pacote default possui vrios temas e sua estrutura semelhante a esta:

app/design/frontend/default/

- app

- design- frontend

- base+ default

- default+ default+ blank+ default+ iphone

+ modern

skin/frontend/default/

- skin

- frontend+ base

- default- default

+ default+ blank+ blue+ default+ iphone

+ modern

Pacotes de tema personalizadoComo criar um pacote de temas? A maior parte do restante deste manual abrange ospassos para fazer isso, mas voc j deve entender que, com base no que vimos at agora,voc comear criando as pastas do seu pacote nos diretrios app/design/ e skin/.Por exemplo, imagine que voc queira criar um novo tema chamado sublime, voc devecriar uma pasta de pacote de temas chamado sublime dentro de suas pastas de frontend ecriar uma pasta default dentro de cada uma delas.Diretrio do tema personalizado Sublime:

Estrutura do pacote default

informaes no so vlidas para eles, importante que voc saiba disso para no sebasear em tutoriais de tema que no use o tema base.

20


21/56




Verso 1.0

app/design/frontend/sublime/default/

- app

+ code- design

- frontend+ base+ default- sublime

+ default

skin/frontend/sublime/default/

- skin

- frontend+ base+ default- sublime

+ default

TemasO que vai dentro de cada pasta do tema sempre depender do nvel de customizaoutilizado. Tenha em mente que com o fallback do Magento, que sempre vai achar osarquivos no pacote base, cada tema precisa apenas conter os arquivos que diferemdaqueles que esto no pacote base.Como voc j sabe, cada pacote precisa ter um tema default, variaes de tema voc terquantos quiser. Dentro de cada tema, a estrutura de arquivos deve refletir a estrutura que

o Magento espera. Continuando com nosso exemplo do pacote sublime, o tema defaultdeve ter ao menos as pastas principais do tema como um esqueleto para que tenha ondealocar seus arquivos enquanto trabalha. Todos os temas precisam dessa estrutura, sendoque algumas destas pastas podem acabar fazias e podero ser excludas posteriormente.

Estrutura para o tema default do pacote sublimeapp/design/frontend/sublime/default/

- app

- design- frontend

+ base+ default- sublime

- default+ layout+ template

skin/frontend/sublime/default/

- skin - frontend + base

+ default - sublime - default + css + images + js

Outra alternativa criar seu tema dentro do pacote default como uma variao dele,muitos temas prontos vendidos na internet trabalham desta forma, mas aqui sugiro quecrie seu prprio pacote para que no mova ou apague algum arquivo acidentalmente dapasta default.

Estrutura do pacote personalizado Sublime

21


22/56




Verso 1.0

4 Aplicando temas em Magento

Neste captulo veremos em dois exemplos como o Magento processa os arquivos dopacote e seus temas

Passo a passo 1: Criando e aplicando um temaNeste passo, mostrarei a voc como criar um pacote e um tema e aplicar em uma lojaMagento. O prximo captulo vai aprofundar em como customizar um tema. Neste pontoassumo que j tenha criado um novo pacote com pequenas alteraes, seja por downloada partir do Magento connect ou de terceiros.

Atribuindo um pacote e um tema para a lojaAgora que voc criou seu prprio pacote e um tema (seja default ou personalizado), vocprecisa atribulo sua loja/site para que este faa efeito. Navegue em Magento admin (ex.:www.seudominio.com/admin), na aba visual (sistema > Configurao > guia Design ou

visual, dependendo da sua traduo). Caso tenha mais de um site, loja ou visualizao deloja definida na sua instalao Magento, no canto superior da coluna da esquerda, vocver uma caixa com o titulo deAplicar em: (Current Configuration Scope em ingls)onde voc pode selecionar a loja desejada para aplicar suas alteraes de configurao.

Figura 13 Setando o escopo no painel admin do Magento.22


23/56




Verso 1.0

Neste caso, Dubloo quer personalizar cada uma das visualizaes de loja (esto todas emlaranja), de modo que precisamos apontar seu tema por site.Para gerenciar o tema no nvel de visualizao de loja, selecione o nome da visualizao deloja no menu dropdown, em seguida aplicando os seguintes passos, vejamos como ficou aDubloo.

Figura 15 Exemplo Dubloo onde cada visualizao de loja possui um tema diferente.

Vamos dizer que Dubloo queira que seus usurios vejam um design diferente dependendoda viso de loja esto usando, para conseguir isso eles precisam gerenciar o design no nvelde visualizao de loja.

Passo 1:Na guia Visual, em Nome do Template Atual, coloque o nome da pasta em que seu novopacote de tema reside. Magento automaticamente usa o pacote default caso este campoesteja em branco.

Para gerenciar seu design no nvel de site, selecione o nome do seu site a partir da listasuspensa, em seguida, siga os seguintes passos. O que queremos dizer por nvel de site?Lembrase exemplo da empresa Dubloo?

Figura 14 Exemplo Dubloo onde todas as lojas compartilham o mesmo tema.

Dubloo

Portugus ingls Espanhol Francs

Dubloo

Portugus ingls Espanhol Francs

23


24/56




Verso 1.0

Figura 17 definindo o tema no painel administrativo do Magento.

Passo 2:No campo default (no painel do Themes), entre com o nome do novo tema que gostaria deaplicar em seu site, loja ou visualizao de loja. Caso deixe este campo em branco, oMagento aplicar o tema default do pacote de tema definido no passo 1. Lembrese: deacordo com o esquema de fallback do Magento, se voc especificar um nome de tema, oMagento ir olhar primeiro os arquivos deste tema, caso no encontre ele pesquisar napasta default do seu pacote de tema e finalmente s ento ir procurar em base/default.Observe que voc tambm pode substituir o tema a ser aplicado para tipos de arquivos

especficos, como Layouts, templates, translations e skins, se voc especificar um nomediferente em cada um desses campos, o Magento ir procurar os arquivos nestas pastas edepois executa o fallback para o default do seu pacote de temas.

Figura 16 definindo o pacote de tema no painel administrativo do Magento.

24


25/56




Verso 1.0

Figura 18 ScreenShot dos diretrios (temas) em pacote default.

Passo 3Quando estiver pronto clique em salvar configuraes (Save config) e atualize sua loja,Voila! Agora voc v seu novo tema aplicado no frontend.Agora que vimos como criamos e configuramos um tema no Magento, veremos como oMagento lida com os temas.

Passo a passo 2 Aplicando mltiplos temas.O Magento permite a flexibilidade de usar mltiplos temas mesmo dentro do mesmo

layout e modelo. Vamos dizer que voc quer ter a mesma estrutura e modelo de layoutpara todas as visualizaes de loja, mas que varie as imagens e a paleta de cores. NoMagento isso realmente simples.Lembra como as pastas de layout e template esto localizadas emapp/design/frontend/[pacote]/[tema] e nosso atual visual localizado emskin/frontend/[pacote]/[tema]? Os dois no precisam ter o mesmo nome!Si voc olhar para a instalao padro do Magento, voc vai ver a pasta do tema defaultem app/code/design/frontend/default/default. Correspondente a isso so varias pastas deskin. D uma olhada em skin/frontend/default e voc ver blank, blue, default,French e german. Todas as cinco so diferentes skins que podem ser usadas com otema default. Os temas blank, iPhone e modern so listados tambm, masinteragem separadamente a partir do tema default. Existem mais temas definidos nodiretrio skin do que no diretrio app/design, isso porque os temas blue, French egerman diferem do tema default apenas nos arquivos CSS.

25


26/56




Verso 1.0

Voltemos ao terceiro cenrio da nossa sesso sobre terminologias. Lembra da loja HomeLaptops?

Figura 19 Home Laptops com mltiplos sites, lojas e visualizaes de loja.

Neste caso voc poderia escolher default para seu layout e templates. Vamos supor quevoc queira deixar a visualizao em ingls usando a skin default. Como definimos estacomo o padro para a configurao geral, no ser necessrio fazer qualquer alteraopara esta visualizao.

Figura 20 Configurao a viso de ingls para o tema default/default.

Site

Loja

Visualizao de loja

Home Laptops

Portugus

Home Laptops Promo Laptops

Ingls

PromoLaptops

Portugus Ingls

26


27/56




Verso 1.0

Figura 21 frontend da loja em ingls com tema default/default.

Agora, digamos que voc queira que seus usurios que portugus vejam uma variao,alm da linguagem, quando eles mudarem a viso da loja. Faa isso marcando a variao detema blue para sua visualizao de loja em portugus.

Figura 22 Configurando a viso em portugus para tema default/blue.27


28/56




Verso 1.0

Deixamos o padro como default assim qualquer lugar que no tenha alterao emnossa variao de tema blue dar um fallback para o default. Isso permitir que voctenha um segundo conjunto de imagens e paleta de cores baseado no seu pblico alvo.Veja o que acontece quando mudamos a viso da loja para o portugus:

Figura 23 Configurando a viso em espanhol para tema default/blue .

Vejamos outro exemplo: Datas comemorativas, de longe, oferecem a melhor oportunidadede vendas para qualquer loja de ecommerce. Clientes fazem fila para comprar presentespara sua famlia e amigos. E mais filas para comprar fantasias para carnaval e dia dasbruxas, por exemplo. A fim de se adaptar para estes clientes sazonais, sua loja deve refletirfielmente estas ocasies, de forma a inspirar seus clientes a navegar mais por sua loja. Umaloja com o visual do dia a dia mostrada abaixo apenas faz uma mudana durante o Natal. Oque precisa apenas de alguns vermelhos, flocos de neve e de um Papai Noel Assim como mostrado abaixo no visual de Natal.

28


29/56




Verso 1.0

Figura 24 Visuais sazonais so baseados em algum tema mas com algumas variaes.

Visual do dia a dia trocada na poca de natal Visual de natal. Tudo que precisa.

O Magento oferece a capacidade de lidar com vrios temas de sua escolha exatamentepara aqueles momentos em que um toque extra necessrio. Neste caso, voc no precisacriar uma nova viso de loja, como fizemos com o Ingls e Portugus. Tudo que vocprecisa fazer enviar uma nova skin de Natal para a sua pasta de skins e, em seguida, fazerreferncia a ela em sua configurao onde foi atribudo "default" e "portugus". Ao fazerisso, voc ainda est preservando o seu projeto e estrutura da loja no sazonal normal,reforandoa com o tema natalino. Quando a poca de Natal termina, simplesmente mudeo nome da skin de volta para sua escolha tpica e voila! Sua loja voltou ao normal.Voc perceber a semelhanas de conceito nos dois projetos acima. O visual passou para

Natal no diagrama 4, mas por traz disso possvel ver a estrutura do design da loja normal.As nicas diferenas reais so em alguns CSS, imagens e alteraes de palavras nosarquivos de template. Porque as mudanas so de fato mnimas, voc no precisa de umtema padro para alocar seu tema de natal. O que voc precisa est em poucas alteraesde arquivos e voc chegar a uma loja muito mais alegre. A funo do multitemas doMagento exatamente esta, dando o poder de ligar e desligar os temas sazonais semalterar seu tema padro.

29


30/56




Verso 1.0

Hierarquia dos temas

Quando voc atribuir vrios temas para sua loja, voc estar mais prximo de entenderque, embora o seu principal objetivo na construo de um tema seja criar a interfacegrfica mais til e visualmente agradvel, a aplicao capaz de localizar e carregar todosos arquivos do tema necessrio para manter o sistema em execuo livre de erros.Por exemplo, se sua categoria listing Page chama o template view.phtml (neste caso otemplate se torna um arquivo requerido), mas o sistema no consegue achar o arquivo do

tema no ponto mais alto da hierarquia. Se isso acontece o sistema vai continuar descendona hierarquia at ser capaz de encontrar o arquivo view.phtml, ento vai carreglo eencerrar a pesquisa. Este mtodo de trabalho chamamos de fallback porque o sistema vairetrocedendo para o prximo local possvel onde o arquivo possa estar e carreglo. Veja omodelo falback do Magento para entendlo.A hierarquia do fallback do Magento funciona assim:

1 Procura o arquivo em: app/design/frontend/pacote/tema_personalizado skin/frontend/pacote/tema_personalizado Procura por substituies especficas no arquivo de layout local.xml

2 Se no encontra, procura em: app/design/frontend/pacote/default skin/frontend/pacote/default

3 Se no encontra, procura em: app/design/frontend/base/default skin/frontend/base/default

4 Se no encontra, ocorrer um erro de renderizaoPor exemplo, digamos que voc tenha trs temas instalados dentro da sua loja e cada umdesses temas tem os seguintes arquivos:

Tabela 1base default tema personalizado

Todos os arquivos templates/3collayout.phtml

templates/header.phtml

images/logo.gif

css/base.css

css/boxes.css

templates/3collayout.phtml

css/base.css

30


31/56




Verso 1.0

Tabela 2Mais alto

Mais baixo

Tema personalizado

default

base

Voc vai ver que existem alguns arquivos que so redundantes como o templates/3collayout.phtml e css/base.css na tabela 1. Agora vamos arrumar a tebela de forma que osarquivos redundantes fiquem na mesma linha.

Tabela 3

Vamos supor tambm que esses trs temas so dispostos nesta hierarquia:

default tema personalizado

Todos os arquivos


templates/header.phtmlimages/logo.gif

css/base.css

css/boxes.css


css/base.css

base

Voc Talvez pergunte Ok, legal. Mas o que isso quer dizer?Bem, a tabela 3 como voc v os arquivos em cada pasta do tema e no como o Magentov.

Vejamos como o Magento v a mesma estrutura de arquivos na tabela 4

31


32/56




Verso 1.0

Voc pode perceber como o Magento elimina a redundncia, ignorando os arquivos nonvel mais baixo e reconhecendo apenas os arquivos mais altos da hierarquia. Isso aconteceporque o arquivo j foi encontrado e no pesquisou mais, portanto, encerrou a pesquisadesses arquivos encontrados e continuou apenas dos arquivos faltantes.Quando usado corretamente, o mecanismo de fallback permite a voc editar e mantersomente os arquivos que precisa alterar para um tema personalizado e todos os outros

arquivos sero fornecidos pelo tema default do pacote personalizado ou pelo pacote base.Por exemplo, O Magento mantm quatro temas de demonstrao default, black, iPone eModern. Antes da introduo do pacote base, todos os arquivos de tema tinham que sercopiados para cada tema, testados e debugados um a um. O cdigo no pacote base maiseficiente.Por exemplo, o tema default/default e defatult/blank so implementados apenas comalteraes de CSS herdam todos os arquivos de template e de layout do pacote base.Para finalizar, esse mtodo torna seu tema mais upgrade proof ou mais compatvel comatualizaes do sistema e permite a voc manter muito menos cdigo. Muitos temasapenas personalizam um subconjunto de funcionalidades do tema default do Magento.

Portanto, toda a funcionalidade do core do Magento vem do tema base e podem sersubstitudos seletivamente por um pacote/tema personalizado.

Importantes regras de hierarquia a se lembrar Crie seu tema customizado dentro de seu prprio pacote. Faa diretrios como

app/design/frontend/seu_pacote/default e skin/frontend/seu_pacote/default econstrua seu tema personalizado l.

Nunca copie todos os arquivos de base/default no seu pacote personalizado. Copieapenas os arquivos que voc precisa modificar. Isso ajudar voc a saber o queprocurar, quando os arquivos personalizados necessitarem de atualizao sem ter

que procurar no meio de arquivos no modificados desnecessariamente.

Tabela 4

default tema personalizado

Todos os arquivos

templates/header.phtml

images/logo.gif

css/boxes.css


css/base.css

base

32


33/56




Verso 1.0

Excees de designExcees de design permitem aos gerenciadores escolher um tema alternativo para umsistema de usurio especfico ao invs de criar uma viso de loja separada para um agenteque visualiza a loja (ex.: iPhone), excees de design permitem ao administrador sobreporconfiguraes de uma viso de loja, limitando a quantidade de vises de loja que precisaradministrar.

Figura 25 Aplicando exceo de design permitindo que o Magento use um tema diferente paradiferentes clientes / browsers.

33


34/56




Verso 1.0

5 Customizando temas Magento

O Magento foi construdo seguindo um modelo totalmente modular, que ofereceflexibilidade quase ilimitada. Naturalmente isto aproveitado para programao edesenvolvimento de temas para sua loja. Neste captulo Entenderemos o que isso significa

e veremos exatamente como desenvolver um tema para sua loja com Magento.Este captulo ajudar a entender como modificar um tema existente. A partir disso vocganhar confiana e conhecimento para desenvolver voc mesmo seu prprio tema.Lembrese que construiremos sobre o pacote base ao invs de totalmente do zero. Nossoobjetivo final customizar a loja visualmente e com funcionalidade que deseja, mas queseu tema tenha o mnimo de arquivos para editar e deixe que o tema base cuide de todo oresto.

Criando os diretrios bsicos para seu pacote/temaCom a incluso do pacote base, criar um novo pacote e o tema default nunca foi to fcil.

Voc pode criar um novo tema incluindo apenas os arquivos que precisam ser diferente dopacote base. Uma regra que nunca pode deixar de seguir sempre manter a convenodos subdiretrios do Magento. Um bom ponto para comear a criao de um pacotepersonalizado e um tema criar um esqueleto que reflita todo o template principal ediretorios de temas usado pelo Magento, ento salvar os arquivos em seus locais corretos.Quando estiver pronto, se algum desses diretrios permanecerem vazios e sejamdesnecessrios, voc pode deletlos.

Criando um novo pacote e tema(s)Por favor, ignore as instrues legais do Magento e tutoriais que ensinam a criar seu tema

personalizado dentro do pacote default, ou editar arquivos diretamente no diretriodefault/default. Ao invs disso, o mtodo que proporciona melhor resultado paraatualizaes e mais proteo de alteraes acidentas criar um novo pacote e criar seutema personalizado dentro dele.Dentro de app/design e skin, crie um novo diretrio de pacote e os diretrios de templatese de skins requeridos pelo Magento como mostrado abaixo.

34


35/56




Verso 1.0

+ app + design + frontend

+ base + default + seu_pacote + default + layout + template

+ skin + frontend + base

+ default + seu_pacote + default + css + images + js

skin/frontend/dubloo/default/app/design/frontend/sublime/default/

Isto tudo que precisa fazer para comear, o Magento ir procurar os arquivos no temapadro para seu pacote personalizado e em seguida retorna ao pacote base para todos os

arquivos que no encontrou. Como o diretrio base no tem o CSS completo, uma boaidia copiar os arquivos de skin de um dos temas do pacote default como um ponto departida. Os CSS e imagens do tema default/blanck so mais clean.

Aplicando seu novo pacote e tema para seu siteAgora que criamos o esqueleto de diretrios para acomodar seu novo pacote e tema,precisamos dizer ao Magento que use este pacote e assim acompanhar as alteraes emtempo real.

Desabilite o sistema de cache

Prepare o Magento para produo do tema, precisaremos desabilitar o cache indo nopainel administrativo (HTTP://seudominio.com.br/admin ou localhost/magento/admin) enavegando em Sistema > Gerenciar Cache (system > cache management). Selecione ascheck boxes referentes a Layouts, Blocks HTML outpute Translationse dentro de Aes(Actions) selecione Desabilitar (Disable) e clique em Enviar (Submit). Em cada um dessesitens, na rea Status, aparecer como DESATIVADO (DISABLED) com fundovermelho. Isso garante que as alteraes sejam aplicadas na loja conforme voc altera seutema.Nota: Dependendo do que voc est alterando, pode ser necessrio desativar itensadicionais nesta rea ou at mesmo deletar os arquivos de cache em sua estrutura de

diretrios. No exclua as pastas manualmente a menos que saiba o que est fazendo.

Estrutura de diretrios para temas personalizados no pacote sublime

35


36/56




Verso 1.0

Aplique seu pacote/tema personalizado em sua loja

Para ver seu novo tema enquanto o desenvolve, tenha certeza de aplicar para loja emdesenvolvimento usando o painel administrativo. V em ADMIN: sistema > Configuraona aba Visual (Design). No painel Pacote coloque o nome do seu pacote de temas em Nome do Template Atual. No painel Temas, ponha como default parausar seu tema padro ou o nome do seu tema personalizado conforme for.Volte ao frontend e atualize o browser para recarregar a pgina. Ela deve conter todas asfuncionalidades padro validada pelo pacote base e ver algum estilo CSS caso tenhacopiado algum para dentro de seu tema. Caso no tenha movido nenhum arquivo de estiloe imagens no seu tema, o site mostrar apenas texto, sem nenhuma formatao.

Customizando os arquivos skinManipular imagens e arquivos CSS vai personalizar a loja Magento de forma eficiente. Sebuscar nos exemplos passados, o tema blue do pacote default usa apenas CSS. No useCSS para mostrar ou esconder blocos ou contedos do Magento, useo para trabalhar todoo estilo do seu site.Como o Magento tem muitas funcionalidades escritas envolto de divs prdefinidas, at

que voc tenha mais experincia em criao de temas Magento, ser melhor comearmoscom folhas de estilo j existentes e modificlos para se adequar sua identidade e visual.Quando tiver mais experincia com Magento, voc poder escrever do zero ou a partir doframework de sua preferncia. Se voc vai iniciar com CSS e imagens j existentes, tenhacerteza de instalar uma ferramenta como o plugin firebug do Firefox, que vai ajudar vocpara achar qual regra CSS est controlando um elemento em uma pgina.

Exerccios rpidos para comearExerccio 1: Modifique o CSS

1. Use o firebug para explorar o css usado na pgina.

2. Faa alteraes de cor, padding, etc. no arquivo CSS principal do seu tema.Lembrese de sempre fazer as alteraes dentro do seu pacote e temapersonalizado. Se o arquivo CSS principal o style.css, voc o encontrar nestelocal: skin/frontend///css/style.css

3. Volte ao frontend do seu site e recarregue a pgina para ver suas alteraes.

Exerccio 2: Alterar a LOGOCertamente uma das primeiras coisas que todos querem fazer quando customizam umaloja Magento alterar a logo. A logo da loja est associada ao tema que vai ser usada paraesta loja e fica armazenada em skin/diretrio de imagens desta loja. Por conveno, o

Magento usa trs arquivos de logo chamados:36


37/56




Verso 1.0

Customizando com arquivos de layoutLayouts so uma das caractersticas mais poderosas e mais originais do Magento paracriao de temas. Mesmo que esteja familiarizado com outros sistemas de templates,trabalhar com layouts provavelmente ser uma novidade para voc. Se voc dominar seuuso, voc poder rapidamente ligar, desligar, mover quase todos os componentes efunes do Magento.

Introduo ao layoutLayout a ferramenta com que voc pode atribuir informao para cada bloco que criou.Os arquivos de layout do Magento esto no formato XML e modificando o Layout vocpode mover os blocos de uma pgina e atribuir templates para blocos de contedoproduzindo marcaes de blocos de estrutura. Na verdade com alguns arquivos de layoutapenas voc capaz de modificar o visual de cada pgina de sua loja.Como por exemplo, veja esta screenShot da categoria landing Page no Magento:

logo_gif usado no cabealho (header) do prprio site logo_email.gif usado em emails de sada do site logo_print.gif usado quando uma pgina do site impressa.Se olhar para o diretrio de imagens da pasta skin de um tema existente, como odefault/blank, no diretrio skin/frontend/default/blank/images, voc ver estes trsarquivos.Voc pode alterar a logo do site usando seu tema simplesmente colocando seu prpriologo em seu tema personalizado da pasta skin usando o mesmo nome, se desejar.

1 Coloque seu logo com o mesmo nome no diretrioskin/frontend///imagesVoc pode trocar o nome e o tipo de arquivo do logo alterando o nome do arquivono painel administrativo.

2 V ao ADMIN e no menu Sistema > Configuraes (System > Configuration) na abavisual (Design), no painel header, voc vai setar a pasta e o nome do arquivoprincipal da logo. Isto altera apenas o arquivo usado no header do site, no nasverses _email e _print.

3 Insira seu logo principal com novo nome na pasta

skin/frontend///images

37


38/56




Verso 1.0

Figura 26 Exemplo da pgina de categoria da loja de exemplo do Magento.

Agora veja a quebra do exemplo acima em blocos estruturais do Magento e em blocos de

contedo atribudos a cada um desses blocos.

38


39/56




Verso 1.0

Blocos estruturais padro

do Magento

Blocos de contedo mapeados

pelos blocos estruturais

Figura 27 Representao do uso dos blocos estruturais e blocos de contedo do Magento.

Os quadrados na imagem a esquerda acima so os blocos estruturais.Eles so os pais dosblocos de contedo, servem para posicionar seus blocos de contedo dentro do contexto

da pgina (como na imagem da direita acima). Tais blocos estruturais existem na forma deHeader, coluna left, coluna right, etc. que criam a estrutura visual de uma pgina de loja.Neste captulo, trabalharemos com a estrutura padro de blocos do Magento. Blocosestruturais so manipulados pela pgina de mdulos do Magento e so definidos noarquivo app/design/frontend/base/default/layout/page.xml e nas pginas de templatepadro em app/design/frontend/base/default/template/page/.Um bloco de contedo cada bloco colorido que compem um bloco estrutural. Emsntese, o verdadeiro contedo da loja. So representaes de cada funcionalidade em umapgina (como uma lista de categorias, tags do produto, etc.), implementam os arquivos detemplate para gerar o (x)HTML a ser inserido no bloco estrutural pai. Blocos de contedo

combinam a maior parte dos arquivos de template da pasta39


40/56




Verso 1.0

Como o layout do Magento funcionaLayout um componente virtual da aplicao do Magento. Modificando os componentesdo layout, voc pode trabalhar as pginas de loja com melhor compatibilidade comatualizaes do sistema. Os arquivos de layout podem parecer confusos no comeo, masna realidade, so construdos usando um pequeno conjunto de tags XML que so fceis deaprender. Ao aprender alguns conceitos de chaves e comandos do layout, em poucotempo, voc ter mais confiana e conhecimento para facilmente modificar o design daloja com suas especificaes desejadas.Os arquivos base de layout ficam no diretrio app/design/frontend/base/default/layout.Arquivos de layout podem ser copiados para o diretrio do seu temaapp/design/frontend///layout.Um layout composto por layout padro e ayout de atualizao que so feitas de tagsXML simples. Com estes comandos de layout, voc pode atribuir / modificar blocosestruturais, blocos de contedo e qualquer controle de funes da loja como carregar ouremover um especfico bloco javaScript para uma pgina.Cada mdulo do Magento tem seu arquivo de layout prprio, por exemplo o catalog.xml o layout do mdulo de catlogo e customer.xml o mdulo de clientes. Cada arquivo ainda dividido em controladores. Os controladores que so variveis que esto prdefinidas pelo core do Magento e em todas as extenses ativas na sua loja. Para a maiorparte, cada controlador corresponde a um tipo de pgina em sua loja Magento. Como o

e , mas existem alguns controladoresque se aplicam a todas as pginas, tais como o e tambm controladoresaplicados em pginas com status especficos, como o e.

app/design/frontend/base/default/template/.Com Magento, voc no ter mais um arquivo de template chamado left_colun.ext cominterminveis marcaes que devam ser gerenciadas manualmente, dependendo de cadafuncionalidade necessria para cada pgina de loja. Em vez disso, suas funes sogerenciadas em um modelo por funcionalidade que permite carregar e descarregarrecursos da sua pgina de loja com apenas alguns comandos de layout.

40


41/56




Verso 1.0

Figura 28 Exemplo de cdigo de arquivo de layout do Magento mostrando o uso dos controladoes

Um controlador pode aparecer em vrios arquivos de layout e os blocos podem seratribudos a ele ou sobrescritos em cada arquivo de layout. Por exemplo, vrios arquivos delayout podem ter o controlador . Analisando os arquivos de layout, o Magentoprimeiro pega as atualizaes de layout dentro de em cada um dos arquivos delayout, lendo na ordem que foram atribudas em app/etc/modules/Mage_All.xml. Emseguida, analisa os controladores especficos, novamente olhando todos os arquivos delayout e finaliza a construo da pgina da loja.O sistema de renderizao do Magento construdo dessa forma para permitir adioperfeita e remoo de mdulos sem afetar outros mdulos do sistema. Isto significa quevoc pode adicionar, remover e mover muitas das funes do Magento, basta adicionar,

remover ou mover as declaraes de blocos nos arquivos de layout.41


42/56




Verso 1.0

A anatomia de um arquivo de layoutArquivos de layout contm um pequeno conjunto de tags XML que atuam como instruesdetalhadas para aplicao em como trabalhar uma pgina, o que fazer e o comportamentode cada construo de bloco. Aqui esto algumas propriedades comportamentais de cadatag XML do layout.

ControladoresUm controlador (diagrama 1) um identificador pelo qual a aplicao determina o que

fazer com as atualizaes aninhadas por ele.Se o nome do controlador , a aplicao sabe que suas atualizaes devero sercarregadas em quase todas as pginas da loja antes de carregar o layout da pginaespecfica ("quase todas", porque algumas pginas excepcionais, como a imagem de popup do produto no carregam o ).Se o magento encontra um controlador diferente do , ele atribuir asatualizaes listadas no controlador de acordo com a pgina especfica desse controlador.Por exemplo, contm as atualizaes de layout da pgina devisualizao do produto. Controladores so pedaos de algo maior que um designer, semum conhecimento profundo da programao Magento, nunca deve precisar modificar.

Magento determina o comortamento e a representao visual de cada bloco trabalhadopra uma pgina atravs da tag . Ns j falamos sobre os dois tipos de bloco que oMagento aplica, bloco de estrutura e bloco de contedo. A melhor maneira de distinguir osdois olhando o comportamento atribuido a cada um pelas tags atribuidas.Um blocoestrutural normalmente tem o atributo as atravs do qual o aplicativo capaz decomunicarse com a rea designada (usando o mtodo getChildHtml) em um template.Voc perceber vrias ocorrncias deste atributo as no layout default, porquenaturalmente o layout default um dos que constroi as bases sobre as quais os layouts

especficos podem comear para adcionar. Por exemplo, no layout default temos blocosestruturais como left, right, content e footer sendo introduzidos. Embora estesblocos possam existir em atualizaes de layout normais, melhor setar os blocosestruturais recorrentes no layout padro primeiro, e ento, adcionar os blocos decontedo por pgina. Os atributos vlidos para o so: type este o identificador de mdulo de classe que define o funcionamento do bloco.

Este atributo no pode ser modificado. name o nome pelo qual outros blocos podem fazer referncia para o bloco em que

este atributo foi dado (diagrama 3) beforee after so dois mtodos de posicionar um bloco de contedo dentro de um

42


43/56




Verso 1.0

bloco estrutural. before= e after= so comandos usados para posicionar o blocoem primeiro ou em ultimo lugar dentro de um bloco estrutural

templatedetermina o template que representa a funcionalidade do bloco em que esteatributo dado. Por exemplo, se neste atributo escrito 'catalog/category/view.phtml',a aplicao vai carregar o arquivo de template'app/design/frontend/template/catalog/category/view.phtml'

action usado para controlar funcionalidades da frente da loja, comocarregar ou remover um javaScript. Algum dia teremos uma lista completa de todos osmetodos do action, mas no momento a melhor maneira de estudar sobre os diferentesmtodos do action brincar com eles nas atualizaes de layout disponveis

as este o nome que um template chama um bloco em que este atributo designado. Quando voc v um metodo PHP chamada getChildHtml('block_name'), eleest fazendo referncia ao bloco em que o atributo as foi definido comoblock_name (ex.: em um arquivo de template fazreferencia ao ).

usado para fazer referncia a outro . Fazendo uma referncia paraoutro bloco, as atualizaes dentro de sero aplicadas no para que secorrelacione (diagrama 3).Para fazer uma referncia, voc precisa marcar a referncia para um bloco pelo atributoname. Este atributo chama o marcado pelo atributo name. Ento, quandovoc faz uma referencia como , voc est marcando o blocochamado .

43


44/56




Verso 1.0

Figura 29 Exemplo de cdigo de arquivo de layout mostrando o uso do .

Regras do XMLA nica regra que preciso lembrar em relao a XML que, quando uma tag se abre, oudeve ser seguido por uma tag de fechamento ( ) ou deve fechar ems mesma () exatamente como nas tags de xHTML.

Figura 30 Exemplo de cdigo de arquivo de layout sobre a sintaxe XML.44


45/56




Verso 1.0

Como encontrar o arquivo de layout para modificarPara acessar os arquivos de layout, v para app/design/frontend/pacote/tema/layout/.Assim como os templates, os layouts so salvos com base no mdulo, ento, voc podefacilmente localizar o arquivo de layout para modificar com a ajuda da dica de template.Para habilitar a dica de template, v em Sistema > configuraes > Avanado >Desenvolvedor. Neste ponto voc deve se sertificar que selecionou uma loja no dropdownque fica no canto superior esquerdo Aplicar em (Current Configuration Scope) ao invesde todas as lojas. Uma vez que seu site foi selecionado, clique em debugar. Nele vocpode mudar Exibir Caminho das Telas para sim, se quiser mais informaes, pode marcaro Exibir Nome dos Blocos para sim.

Figura 31, habilitando a dica para o caminho do template

Agora que tem a dica de template habilitado, atualize a a pgina que deseja modificar eveja o caminho do arquivo do template no qual a dica mostra, se voc quer, por exemplo,mover o mini carrinho, referencie o caminho do template (ex:app/design/frontend/base/default/template/checkout/cart/sidebar.phtml) e use a primeirapasta do caminho dentro da pasta template (indicado em negrito, que tambm o nomedo mdulo) para encontrar o arquivo de layout correspondente. Neste caso, portanto,voc sabe que deve procurar em checkout.xml para modificar a posio do minicarrinho. Cada arquivo de lauyout ainda dividido em controladores, que definem umlayout de pgina especfico. Cada rea de layout por pgina claramente marcado comcomentrios que indicam seu uso. Mas o prprio sistema reconhece essa diviso atravs

dos controladoes de cada arquivo de layout.45


46/56




Verso 1.0

Exerccios rpidos para comearAqui temos dois exerccios para voc sentir como trabalhar com layout. Nestes exercciosvoc ir copiar os arquivos de layout do tema base e modificalos dentro do seu temapersonalizado. Exploraremos, depois, outros mtodos que no exigem que copie o arquivointeiro.

Exerccio 1Na pgina de categorias, mova o Meu carrinho de compras da coluna da

direita para coluna da esquerda1. Ligue a dica de template indo no admin e navegando para Sistema > Configurao.

Quando a pgina carregar, selecione a loja que est trabalhando usando o menudropdown no topo esquerdo da pgina. Espere a pgina recarregar e selecione aaba Desenvolvedor. Selecione sim para Exibir caminho das telas. Clique emsalvar. Volte ao frontend da loja e recarrege a pgina.

2. Quando a pgina recarregar, veja o caminho do template do bloco meu carrinhode compras que vai mostrar algo comofrontend/base/default/template/checkout/cart/sidebar.phtml. Olhando para a

pasta, sabemos que o template inicialmente introduzido pelo modulocheckout. Como sei disso? R=frontend/base/default/template/checkout/cart/sidebar.phtml. O caminho dotemplate relacionado ao seu mdulo. O diretrio imediatamente abaixo da pastatemplate o nome do mdulo pelo qual um template introduzido.

3. Como agora sabemos que estamos lidando com o mdulo checkout, copie oarquivo checkout.xml do pacote base para seu pacote personalizado. Copieapp/design/frontend/base/default/layout/checkout.xml paraapp/design/frontend//default/layout/checkout.xml

4. Abra o arquivo copiado

app/design/frontend//default/layout/checkout.xml, procure porcheckout/cart/sidebar.phtml (nome do template meu carrinho de compras)nas atualizaes de layout. Voc vai encontrar uma rea semelhante a esta:Troque pelo seguinte cdigo (note que estamos apenas trocando esta linha para ).


47/56




Verso 1.0

template=checkout/cart/sidebar.phtml/>

5. Salve e recarregue a pgina para ver a alterao

Exerccio 2Use o mesmo mtodo para identificar e remover ou mover o bloco decontedo

1. Com a diga de template, identifique qual mdulo do Magento controla outro blocoque voc gostaria de mover ou remover (ex.: include do cachorro, da pesquisa, nonewsletter, etc.)

2. Copie o arquivo de layout que controla esse bloco do pacote base para seu pacotepersonalizado.

3. Modifique o arquivo de layout em seu pacote / tema personalizado da forma quevoc gostaria de fazer. (comente ou delete o bloco que voc no quer ou movapara bloco left, right ou footer, etc.) salve suas alteraes.

4. Recarregue a loja para ver suas alteraes.

Customizando com o arquivo de layout local (local.xml)Como vimos acima, podemos mudar dramaticamente qualquer bloco e contedo que oMagento mostra em um tema modificando alguns arquivos e incluindo apenas os arquivosmodificados em seu tema personalizado. Isso funciona porque o Magento trabalha com osistema de fallback que faz com que a aplicao procure por cada arquivo de tema oudeclarao de bloco primeiramente em seu pacote de temas e s ento, caso noencontre, pesquisar no pacote base, Seu tema precisa ter apenas os arquivos ou blocosque diferem do pacote base.Voc pode usar o mtodo de alterar e salvar arquivos para todas verses do Magento e perfeitamente aceitvel para customizar um tema. Uma abordagem mais elegante e

sustentvel para alterar, ligar ou desligar blocos, que permite fazer a maioria dasalteraes em um nico arquivo a criao de um arquivo layout em seu temapersonalizado que subistitui o comportamento de alguns blocos no tema base. Voc noprecisar copiar todos os arquivos do tema e deletar ou comentar cada bloco de cdigo.Voc pode contar com o tema base para todos os blocos padro e em seu temasimplesmente remover a referncia do bloco que no quer. Alm disso, pode ainda fazertudo em um nico lugar, de modo que mais fcil controlar. Na lgica do Magentofunciona asism: depois de ter juntado todos os arquivos XML de layout e atualizaes, eleir puxar e processar o arquivo de layout local, chamado local.xm, finalizando, que podeser usado como uma reviso final para todas as atualizaes de tema anteriores.

Faa isso dentro de seu pacote de temas, no diretrio47


48/56




Verso 1.0

app/design/frontend///layout:Crie um arquivo chamado local.xml. Dentro dele crie um bloco que vai conter econsolidar suas alteraes globais:

version="1.0"

Dependendo do que voc deseja desligar, local.xml pode conter algumas das seguinteslinhas:

name="left.permanent.callout" name="right.permanent.callout" name="catalog.compare.sidebar" name="paypal.partner.right.logo"

name="cart_sidebar" name="left.reports.product.viewed" name="right.reports.product.viewed" name="right.reports.product.compared"

O contedo vai variar dependendo do seu tema, aqui demos apenas uma orientao. Useesta lista como um guia, encontre o xml no diretrio de layout do seu tema (ou no diretriodo tema base) que contm o(s) blocos(s) que deseja desabilitar e encontre os nomes dosblocos nesse arquivo. Voc poder, ento, inserir esses nomes no local.xml para remover

os blocos. Alm disso, o exemplo acima remove blocos do escopo padro, talvez vocprefira removelos apenas de um bloco estrutural especfico, como left ou right, aquidou uma idia de como funciona.Tambm possvel usar o local.xml para atualizar controladores especficos. Por exemplo,se quisesse definir a pagina padro de categorias como duas colunas com sidebar aesquerda (2columnleft) voc poderia usar os controladores responsveis que renderizamas pginas de catlogo inserindo um cdigo seelhante a este em seu local.xml.

48


49/56




Verso 1.0

name="root"

method="setTemplate" page/2columns-left.phtml

name="root" method="setTemplate" page/2columns-left.phtml

Ns apenas arramnhamos a superfcie ta usabilidade do arquivo local.xml para atualizar oslayouts para os blocos que queira desativar, ao invs de copiar os arquivos e excluir ocdigo. Usando este mtodo, voc tambm pode adicionar blocos, alterar suas posies,mudar alguns dos seus comportamentos, etc. Assim, substituindo o comportamentopadro em um nico local sem nunca editar os arquivos de layout reais.

Customizando com arquivos templates

Voc viu que os arquivos de layout no Magento controlam a presena ou ausncia de cadabloco de contedo em um tema. O que, especificamente, renderizado dentro dessesblocos controlado pelos arquivos de template. Muitos dos arquivos de template no tmqualquer lgica do que vai ou no vai ser mostrado, lembrese: os arquivos de layout quefazem este controle. Uma vez que o arquivo de template chamado, esperase obter o queser processado e exibido.Arquivos de template no Magento so os arquivos PHTML que contm cdigo xHTML ePHP que sero passados e renderizados para o browser. Depois que voc identificar qualarquivo de template iniciado para gerar os contedos para um especfico bloco, vocpode modificar este arquivo de template designado. Ou podese modificar o arquivo de

layout para associar um arquivo de template diferente com um bloco, que permite voc acriar um arquivo de template completamente novo.Como recomendao geral, ao invs de editar os arquivos de template do Magento, umaboa prtica copiar o arquivo de template que deseja alterar para seu tema com um nomeligeiramente diferente e editar esse novo arquivo renomeado. Ento voc altera o arquivode layout para indicar que deve usar seu arquivo novo para este bloco, preservando otemplate original do Magento no caso de ser usado em outros lugares e assegura quequando o Magento for atualizado, qualquer alterao do arquivo original no ter impactosobre sua alterao sem sua reviso explcita.Tomando com base o exemplo anterior usando um arquivo local.xml para atualizar uma

49


50/56




Verso 1.0

declarao de layout, se quiser que suas pginas de categoria tenha uma pgina detemplate nica, voc pode criar uma pgina de template emapp/design/frontend//default/template/page/ chamada 2columnscustom.phtml. Neste novo arquivo talvez queira uma verso modificada de duas colunasdo Magento com uma sidebar a esquerda para incluir tambm novos blocos estruturaispara as promoes e mensagens de frete grtis que s deva aparecer nas pginas decategoria.Neste caso, seu arquivo local.xml em seu diretrioapp/design/frontend//default/layout incluiria o seguinte cdigo dizendo aoMagento para renderizar estas pginas usando seu novo arquivo de template.

version="1.0" name="root" method="setTemplate" page/2columns-custom.phtml name="root" method="setTemplate" page/2columns-custom.phtml

Exerccio 1

Separe os links de SEO na rea de rodap ao invs de ter os links comouma lista, isole Advanced serach eo movao para o cabealho.O mdulo e arquivo de layout que atribui um contedo para uma pgina , algum

Guia Basico Design Magento v1.0

Documents

Transcript of Guia Basico Design Magento v1.0