Templates

para Magento
O Guia do Designer Magento

Traduo no oficial do Designers Guide to Magento

2
SUMRIO
NOTAS.............................................................................................................................................................. 4 1. Viso Geral................................................................................................................................................... 5 2. Conceitos e Terminologia ............................................................................................................................ 5 Websites e Lojas .......................................................................................................................................... 5 Pacotes e Temas .......................................................................................................................................... 7 Temas ...................................................................................................................................................... 8 Temas Default.......................................................................................................................................... 8 Variaes de Tema ou temas no default ............................................................................................... 9 Mecanismo de Fallback do Magento..................................................................................................... 10 Blocos e Layouts ........................................................................................................................................ 10 Blocos .................................................................................................................................................... 11 Widgets...................................................................................................................................................... 12 Terminologia de widgets ....................................................................................................................... 12 Exemplos de widgets nativos do Magento: ........................................................................................... 13 3. Pacotes e Temas na estrutura de pastas do Magento .............................................................................. 13 O pacote Base ........................................................................................................................................ 13 O pacote Default ................................................................................................................................... 15 Design Packages Personalizados ........................................................................................................... 15 Temas .................................................................................................................................................... 16 4. Aplicando Temas em Magento .................................................................................................................. 17 Passo a passo 1: Criando e aplicando um tema ........................................................................................ 17 Atribuindo pacotes e temas loja ........................................................................................................ 17 Passo a Passo 2: Aplicando mltiplos temas ............................................................................................. 19 Hierarquia de temas .................................................................................................................................. 23 Regras para lembrar .............................................................................................................................. 24 Excees ................................................................................................................................................ 24 5. Customizando Temas do Magento ............................................................................................................ 25

Guia do Designer Magento Checkout Venda Mais www.checkoutexpressomagento.com.br

3
Criando o esqueleto de diretrios para o seu pacote/tema ..................................................................... 25 Criando um pacote e tema(s) .................................................................................................................... 25 Aplicando seu novo pacote e tema ao website ......................................................................................... 26 Desative a cache do sistema .................................................................................................................. 26 Atribua seu pacote e tema personalizados loja .................................................................................. 26 Customizar usando os arquivos skin.......................................................................................................... 27 Customizar usando os arquivos de layout ................................................................................................. 27 Introduo aos layouts .......................................................................................................................... 27 Como layout no Magento funciona ....................................................................................................... 29 Anatomia do arquivo de layout do Magento ........................................................................................ 31 Customizar usando o arquivo de layout local (local.xml) .......................................................................... 34 Customizando usando templates .............................................................................................................. 35 6. Guia Rpido para criar um tema do zero ................................................................................................... 36 Um: Desabilite a cache do sistema ........................................................................................................ 36 Dois: determine todas as possibilidades de estruturas para a sua loja ................................................. 37 Trs: Corte seu xHTML de acordo com a funcionalidade ...................................................................... 37 Quatro: mude o layout para refletir o seu design ................................................................................. 38 7. Outros recursos ......................................................................................................................................... 39 O CHECKOUT VENDA MAIS ............................................................................................................................ 39

Guia do Designer Magento Checkout Venda Mais www.checkoutexpressomagento.com.br

4
NOTAS
Este guia uma livre traduo do Magento Designers Guide realizada pela equipe do Checkout Venda Mais para apoiar o crescimento do Magento no Brasil. O guia original em ingls est disponvel no seguinte endereo: http://www.magentocommerce.com/resources/magento-user-guide Ao longo do documento, termos em ingls so eventualmente mantidos para assim preservar o significado. Alm disso, como h diferentes pacotes de traduo PT-BR para Magento em uso no mercado, e nem sempre as tradues utilizam os mesmos termos ou os termos mais adequados, este guia usa como referncia o pacote de traduo PT-BR disponibilizado pela equipe do Checkout Venda Mais em: http://www.checkoutvendamais.com.br/traducao-magento No guia original h referncias s edies Enterprise e Professional (esta ltima no existe mais) do Magento, as quais no foram contempladas nesta traduo.

Guia do Designer Magento Checkout Venda Mais www.checkoutexpressomagento.com.br

5
1. VISO GERAL
O Guia do Designer do Magento expande seu conhecimento da estrutura do Magento e os mtodos para customiz-lo. Ele ensina como criar seu prprio tema. Devido a extrema flexibilidade, no possvel documentar todas as diferentes formas em que ele pode ser customizado. Nos fruns do Magento voc consegue mais informaes de usurios com experincias reais. Como o Magento est sempre sendo atualizado, esta documentao pode no ser 100% adequada a sua verso do Magento. Este guia voltado apenas a Magento Community verses 1.4 e superiores.

2. CONCEITOS E TERMINOLOGIA
Para prosseguir neste documento, importante ter um bom entendimento das terminologias e conceitos utilizados no Magento que so a base para entender como customizar o frontend.

WEBSITES E LOJAS
Como o Magento suporta nativamente o gerenciamento de mltiplas lojas em uma nica instalao, h uma hierarquia de conceitos que define a relao entre cada loja individual. No Magento, um website um conjunto de lojas, que por sua vez so um conjunto de vises de loja. So essas camadas que do uma poderosa flexibilidade para lojas que usam Magento. Um website feito de 1 ou mais lojas que compartilham as mesmas informaes de cliente e carrinhos de compra. Lojas so colees de vises de loja que podem ser configuradas de diversas formas. A principal funo prover um continer lgico para voc agrupar lojas relacionadas em um mesmo site. Vises de loja so as instncias de loja no Magento. Na maior parte das vezes, haver uma nica viso de loja. Mas uma loja pode ter mltiplas vises, tipicamente usadas para diferentes idiomas.

Website

Marca 1

Marca 2

Loja

Principal

Loja 2

Principal

Viso de Loja

Portugus

Ingls

Portugus

Portugus

Guia do Designer Magento Checkout Venda Mais www.checkoutexpressomagento.com.br

6
CENRIO 1 - UMA LOJA
Uma loja que no precisa de mltiplos idiomas.

Website

Bongos Instrumentos

Loja

Bongos Instrumentos

Viso de Loja

Bongos Instrumentos

CENRIO 2 MLTIPLAS LOJAS RELACIONADAS

Uma empresa que cria 3 lojas de roupas direcionadas a pblicos diferentes. Todas devem compartilhar as informaes de clientes, mas um s idioma usado.

Website

Dubloo Inc.

Loja

Classe A

Classe B

Classes C e D

Viso de Loja

Classe A

Classe B

Classes C e D

CENRIO 3 MLTIPLAS LOJAS INDEPENDENTES

Empresa quer 2 lojas diferentes de laptop, com diferentes produtos, categorias e preos, cada uma preparada para os idiomas Portugus e Ingls. Elas no precisam compartilhar informaes e clientes.

Website

Meus Laptops

Laptops Baratos

Loja

Meus Laptops

Laptops Baratos

Viso de Loja

Portugus

Ingls

Portugus

Ingls

Guia do Designer Magento Checkout Venda Mais www.checkoutexpressomagento.com.br

7
PACOTES E TEMAS
Pela hierarquia anterior, voc pode ver que uma nica instalao do Magento pode ter diversas lojas que compartilham ou no a mesma aparncia. Para controlar a aparncia de cada loja, o Magento lhe permite criar temas. Temas relacionados so agrupados juntos em pacotes de design ou "design packages". Cada loja na sua instalao Magento pode usar seu prprio tema, ou elas podem todas compartilhar o mesmo tempo, ou ainda um meio termo entre estas duas opes. Um design package uma coleo de temas relcionados. Quando instalado, o Magento tem um design package especial chamado "base package". Tambm haver um outro pacote especfico para sua edio do Magento. Na Community, ele se chama "default" e na Enterprise se chama "enterprise". Temas dentro de um design package contm os arquivos que determinam a aparncia e as funcionalidades do frontend da loja. Eles contm informaes de design como arquivos de layout, arquivos template, arquivos de traduo, CSS, imagens e javascripts. Um tema pode pertencer a um nico design package. Por conveno, cada design package deve conter um tema default. Adicionalmente, um design package pode conter qualquer nmero de variaes do tema default.

Pacote Base

Pacote 1

Pacote 2

Tema Default

Tema Default

Tema Default

Variao Tema 1

Variao Tema 2

Ambos design package e tema podem ser associados ao nvel do website ou ao nvel da viso de loja pelo admin do Magento. Se voc associa ao nvel do Website, todas as lojas vo herdar aquela aparncia. Voc pode, depois, atribuir um pacote especfico para uma das sublojas, ignorando assim o pacote configurado para todo o website.

Guia do Designer Magento Checkout Venda Mais www.checkoutexpressomagento.com.br

8
TEMAS
Um tema no Magento formado por arquivos template (layout, template, locale) e arquivos skin (CSS, imagens e javascript) que criam a experincia visual da sua loja e esto organizados respectivamente nas pastas "App/design" e "Skin". O Magento organiza seus arquivos de tema assim para permitir maior controle sobre o nvel de segurana de cada pasta do seu servidor. Os arquivos em "skin" precisam estar acessveis aos navegadores enquanto que os arquivos em "app/design" no.

Cada pasta organizada em subpastas da seguinte forma: app/design/frontend/<nomeDesignPackage>/<nometema> o /Layout - contm os arquivos XML que definem as estruturas de blocos para as diferentes pginas da loja assim como meta informaes e a codificao das pginas. o /Template - contm os arquivos PHTML com as tags xHTML e PHP para a apresentao da pgina. o /Locale - contm os arquivos CSV de traduo para os idiomas suportados Skin/frontend/<nomeDesignPackage>/<nometema> o /CSS - contm os arquivos CSS o /Images - contm todas as imagens usadas pelo tema o /JS - contm todos os arquivos javascript especficos do tema. Javascript compartilhados entre vrios temas devem ser colocados na raz do Magento na pasta /js

TEMAS DEFAULT
Cada design package deve incluir um tema chamado default (padro) que o principal tema do pacote. Quando voc seleciona um pacote para sua loja, a menos que voc especifique um tema, o tema "default" ser automaticamente selecionado.

Guia do Designer Magento Checkout Venda Mais www.checkoutexpressomagento.com.br

Pacote Base

Pacote 1

Pacote 2

Tema Default

Tema Default

Tema Default

Variao Tema 1

Variao Tema 2

O tema default dever conter todos os arquivos de layout, template e skins para exibir a sua loja. Todos os arquivos que no forem encontrados no tema default sero buscados no tema padro do pacote base.

VARIAES DE TEMA OU TEMAS NO DEFAULT

Uma variao de tema pode conter quantos arquivos de tema quanto voc precisar. Essas variaes permitem voc facilmente criar pequenas variaes sobre o seu tema default para serem aplicadas em toda a sua loja, subsees da sua loja, pginas especficas ou a uma loja separada porm relacionada.

Pacote Base

Pacote 1

Pacote 2

Tema Default

Tema Default

Tema Default

Variao Tema 1

Variao Tema 2

Quando estiver trabalhando com um design package customizado, voc pode tanto modificar o tema padro como criar uma variao do tema padro e aplic-la sua loja.

Guia do Designer Magento Checkout Venda Mais www.checkoutexpressomagento.com.br

10
Exemplos: Uma pgina de produto mais simples, com menos informaes. Uma seo do seu website com os produtos a serem lanados na prxima estao que ainda no esto venda. Uma customizao do site temporria para uma determinada poca do ano. Um website de outra diviso da sua empresa, com a mesma identidade visual, mas com modificaes por trabalhar com outras categorias de produtos.

MECANISMO DE FALLBACK DO MAGENTO

Se um tema personalizado chama um arquivo CSS chamado "styles.css" e no encontra, Magento vai procur-lo no prximo tema da hierarquia e continuar assim at localizar o arquivo. Este mtodo chamado de "fallback".

Incio

Procura arquivo em
nome_pacote/nome_tema

Procura arquivo em
nome_pacote/default

Procura arquivo em
base/default

no

no

Achou?

Achou?

Achou?
no

sim

sim

sim

Exibe conforme indicado

Erro de renderizao

Quando usado adequadamente, este mecanismo permite que voc customize e mantenha apenas os arquivos que voc realmente precisa no seu tema personalizado e todas as outras funcionalidades so fornecidas tanto pelo tema default do pacote ou pelo pacote base. Isso faz com que seus temas personalizados sejam menos vulnerveis a atualizaes e permitem voc manter menos cdigo tambm.

BLOCOS E LAYOUTS
Estes so outros conceitos que voc precisa aprender para ser um designer Magento bem sucedido: Blocos estruturais Blocos de contedo Layout

Guia do Designer Magento Checkout Venda Mais www.checkoutexpressomagento.com.br

11
BLOCOS
Blocos so a maneira pela qual Magento distingue as funcionalidades no sistema e cria uma maneira modular de gerenciar isso do ponto de vista visual e funcional. H 2 tipos de blocos que trabalham juntos para criar a aparncia da loja: Blocos estruturais - so os blocos criados para o nico propsito de definir a estrutura visual da loja como cabealho, coluna lateral, coluna principal e rodap. Blocos de contedo - so os blocos que de fato produzem o contedo dentro de cada bloco estrutural. Eles so representaes de cada funcionalidade da pgina e usam arquivos de template para gerar o xHTML que ser inserido no bloco estrutural pai. Listagems de categorias, mini cart, tags dos produtos e listagem de produtos so exemplos de blocos de contedo. Layouts - so os arquivos que essencialmente mapeiam os blocos de contedo aos blocos estruturais. Layouts no Magento possuem duas funes: eles tanto definem os blocos estruturais e de contedo como tambm informam ao Magento como e onde conect-los.

Figura: Exemplo de Blocos Estruturais

Guia do Designer Magento Checkout Venda Mais www.checkoutexpressomagento.com.br

12

Figura: Exemplo de Blocos de Contedo mapeados em Blocos Estruturais

WIDGETS
Voc pode estar familiarizado com o termo Widget the outras aplicaes online. No Magento, widgets so blocos do frontend com configuraes pr-definidas. Essas configuraes so exibidas em um formulrio de edio especial no admin do Magento permitindo o prprio administrador da loja customiz-la com facilidade. Essencialmente, eles so uma tima forma de permitir que usurios sem conhecimento tcnico incluam contedos dinmicos em reas da loja pr-definidas pelo designer ou desenvolvedor. Exemplos: Informaes dinmicas de produtos em landing pages de aes de marketing Os itens visualizados recentemente Imagens promocionais em diferentes blocs, colunas e outras localizaes da loja Elementos interativos como reviews, enquetes e formulrios de assinatura Elementos alternativos de navegao como nuvem de tags e sliders de imagens

TERMINOLOGIA DE WIDGETS
Bloco de frontend - um elemento que cria a aparncia visual tanto por definir a estrutura visual quanto por exibir o contedo de fato. Widget Magento - um bloco de frontend que implementa uma interface especial de widget que permite diferentes configuraes para cada instncia independente do mesmo widget.

Guia do Designer Magento Checkout Venda Mais www.checkoutexpressomagento.com.br

13
Instncia do Widget Magento - um bloco em uma pgina ou em mltiplas pginas que recebe as configuraes definidas pelo administrador da loja. O mesmo widget pode ser adicionado vrias vezes gerando diferentes instncias do mesmo widget.

EXEMPLOS DE WIDGETS NATIVOS DO MAGENTO:

CMS Page Link - mostra o link para uma pgina do CMS escolhida CMS Static Block - mostra o contedo de um bloco esttico selecionado Catalog Category Link - mostra o link de uma categoria de produto escolhida Catalog Produtc Link - mostra o link de produto escolhido Recently Compared Products - mostra um bloco com os produtos recm comparados Recently Viewed Products - mostra um bloco com os produtos recm visualizados

3. PACOTES E TEMAS NA ESTRUTURA DE PASTAS DO MAGENTO

Temas so agrupados logicamente em design packages, mas, como explicado no captulo anterior, eles so fisicamente separados em duas pastas. No comeo, isso pode ser um pouco confuso, por isso este captulo vai explicar esta estrutura de pastas. Assim que voc avanar nesta seo, perceba que os nomes de pastas devem ser os MESMOS em ambas as pastas app/design e skin.

Base

Default

Pacote Personalizado

Default

Default

Default

Blank

Variao

Modern

etc

Iphone

O PACOTE BASE
O papel do pacote Base prover todas as funcionalidades core do Magento, para que seus temas personalizados incluam apenas as mudanas nessas funcionalidades especficas para a sua loja. O Magento faz isso usando o modelo "fallback" explicado anteriormente que procura pelos arquivos de tema necessrios primeiro no pacote personalizado e depois no pacote base caso no encontre.

Guia do Designer Magento Checkout Venda Mais www.checkoutexpressomagento.com.br

14
Nota: o pacote Base o ponto final no modelo fallback para todos seus design packages e NUNCA deve ser modificado. Desta forma, temos uma base limpa para iniciar a customizao, j que todos os arquivos que controlam o comportamento padro do Magento (e so MUITOS) ficam no pacote base e seu pacote personalizado precisar conter apenas os arquivos que precisarem ser modificados. O pacote base contm apenas um tema default e nenhuma outra variao de tema deve ser criada dentro do pacote base. Na estrutura de diretrios, o pacote Base contm ambas as pastas app/design e skin. No entanto, o tema padro associado no um tema completo pois a ele falta a maioria dos arquivos de skin.

A ESTRUTURA DE PASTAS DO PACOTE BASE

app/design/frontend/base/default Contm TODOS os arquivos de layout e template necessrios para as funcionalidades nativas do Magento <MAGENTO_BASE_DIR> + app + code + design + adminhtml + frontend + base + default + default + install + etc + locale Mage.php skin/frontend/base/default Contm ALGUNS arquivos CSS e Javascript necessrios para as funcionalidades nativas. No possui, no entanto, todos os CSS e imagens necessrios para customizar um site, porque esses arquivos so especficos do design e no do core do Magento. <MAGENTO_BASE_DIR> + skin + adminhtml + frontend + base + default + default + install O pacote Base na verdade um repositrio das funes core (nativas) do Magento disponveis no frontend. Desta forma, no faa qualquer tipo de customizao no pacote base. Temas personalizados devem ser criados dentro das pastas dos seus respectivos design packages. Arquivos que precisam ser modificados podem ser copiados do Base para seu design package personalizado e editados ali ou voc pode criar um conjunto novo de arquivos para realizar suas modificaes.

Guia do Designer Magento Checkout Venda Mais www.checkoutexpressomagento.com.br

15
O PACOTE DEFAULT
Voc vai perceber que em cada instalao do Magento, no h somente o pacote Base mas tambm um outro chamado de default. Na estrutura de diretrios, esses pacotes possuem ambas as pastas app/design e skin. Ao contrrio do pacote Base, os temas nesses pacotes so completos, com todos os arquivos CSS e imagens necessrios. Esses temas podem ser usados se voc quiser utilizar o tema padro do Magento como ponto de partida. Seu propsito mais poderoso, no entanto, como referncia para criar seus prprio tema personalizado. Esta estrutura de pastas no Magento assim: app/design/frontend/default <MAGENTO_BASE_DIR> + app + design + frontend + base + default + default + blank + default + iphone + modern skin/frontend/default/ <MAGENTO_BASE_DIR> + skin + frontend + base + default + default + blank + blue + default + iphone + modern

DESIGN PACKAGES PERSONALIZADOS

No restante deste documento, a maior parte do contedo ensinar o passo a passo para criar seu tema personalizado, baseado nas estruturas que vimos at agora. Se voc quer criar um design package chamado Dubloo, por exemplo, voc criaria uma pasta para o seu design package chamada "dubloo" dentro das pastas "frontend" e dentro dela uma pasta chamada "default" para o tema default. Dentro dela, voc criar o esqueleto de pastas que permitir a customizao. app/design/frontend/dubloo/default

Guia do Designer Magento Checkout Venda Mais www.checkoutexpressomagento.com.br

16
<MAGENTO_BASE_DIR> + app + code + design + frontend + base + default + dubloo + default

skin/frontend/dubloo/default/ <MAGENTO_BASE_DIR> + skin + frontend + base + default + dubloo + default

TEMAS
O que ir dentro das pastas do seu tema depende do grau de personalizao que voc est buscando. Como voc j viu, cada design package deve ter pelo menos um tema default e pode ter qualquer nmero de variaes do tema. Dentro de cada tema, a estrutura de arquivos deve ser a mesma estrutura esperada pelo Magento. Seguindo com o exemplo do design package Dubloo, o tema default deve possuir pelo menos as principais pastas como um esqueleto para que voc possa colocar os arquivos em que for trabalhando. Todos os temas devem ter esta exata estrutura. Se alguma pasta ficar vazia, ela poder ser removida se desejado.

ESTRUTURA DE PASTAS PARA OS TEMAS NO DUBLOO

app/design/frontend/dubloo/default <MAGENTO_BASE_DIR> + app + code + design + frontend + base + default + dubloo + default + layout + template skin/frontend/dubloo/default/

Guia do Designer Magento Checkout Venda Mais www.checkoutexpressomagento.com.br

17
<MAGENTO_BASE_DIR> + skin + frontend + base + default + dubloo + default + css + images + js

4. APLICANDO TEMAS EM MAGENTO

Neste captulo, veremos alguns exemplos de como o Magento processa temas e arquivos de temas.

PASSO A PASSO 1: CRIANDO E APLICANDO UM TEMA

Neste passo a passo, veremos como criar um design package e um tema e aplic-los a loja. No prximo captulo, veremos como realizar pequenas customizaes neste tema.

ATRIBUINDO PACOTES E TEMAS LOJA

Agora que voc possui um novo design package e um tema personalizados, hora de atribu-los sua loja. No admin do Magento, acesse Sistema > Configuraes > Template. Se voc possui mais de um website, loja ou viso de loja, no topo da coluna da esquerda voc ver um dropdown onde pode escolher a loja a qual voc atribuir o tema.

Para atribuir o tema ao nvel do website, selecione o nome do website no dropdown e siga os passos seguintes. O que exatamente significa atribuir o tema ao nvel do website?

Guia do Designer Magento Checkout Venda Mais www.checkoutexpressomagento.com.br

18

Dubloo Inc.

Portugus

Ingls

Espanhol

Imagina que a Dubloo tem diferentes vises de loja para diferentes idiomas, mas quer que todos tenham a mesma aparncia. Neste caso, s atribuir o tema ao nvel do website e ele ser automaticamente aplicado a todas as vises de loja (por isso, na figura acima, todos tm a mesma cor). Digamos que a Dubloo queira uma aparncia nica para cada viso de loja. Neste caso, o tema dever ser atribudo ao nvel da viso de loja desejada.

Dubloo Inc.

Portugus

Ingls

Espanhol

PASSO 1
No campo "Nome do template atual", informe o nome do pacote em que est o seu novo tema.

PASSO 2
No campo Padro (default) no painel "Temas", informe o nome do novo tema. Os demais campos (tradues, templates, skin e layout) podem ser deixados em branco e o Magento procurar no tema default ou podem ser preenchidos com o nome do tema customizado.

Guia do Designer Magento Checkout Venda Mais www.checkoutexpressomagento.com.br

19

PASSO 3
Clique em Salvar e recarregue sua loja. Agora voc v um novo tema no seu frontend. Pode ser necessrio limpar a cache da sua loja para visualiz-la. Para isso, acesse Sistema > Configuraes > Gerenciamento de Cache, selecione todos os registros e clique em executar. Vamos agora ver como Magento trata esses temas.

PASSO A PASSO 2: APLICANDO MLTIPLOS TEMAS

Magento d flexibilidade para usar mltiplos temas mesmo para um mesmo layout e template. Digamos que voc quer a mesma estrutura de template e layout em todas as lojas, mas quer variar as imagens e o esquema de cores. Magento torna isso simples. Lembra que as pastas de layout e template esto localizadas dentro de app/design/frontend/<nomePacote>/<nomeTema> e os estilos esto em skin/frontend/<nomePacote>/<nomeTema>? Os dois no precisam ter o mesmo nome! Se voc verificar a instalao padro do Magento, ver a pasta do tema default em app/code/design/frontend/default/default. Relativo a ela, h mltiplas pastas de skin. Olhe a pasta skin/frontend/default e voc ver "blank", "blue", "default", "French" e "german". Todas essas 5 skins diferentes podem ser usadas no seu tema padro. Os temas "blank", "iPhone" e "modern" tambm so listados, mas interagem separadamente do tema "default". H mais temas definidos na pasta skin do que na pasta app/design, e por isso que os temas "blue", "French" e "german" diferem do tema "default" apenas no CSS.

Guia do Designer Magento Checkout Venda Mais www.checkoutexpressomagento.com.br

20

Lembra do exemplo da loja de laptops com 2 lojas diferentes uma da outra?

Website

Meus Laptops

Laptops Baratos

Loja

Meus Laptops

Laptops Baratos

Viso de Loja

Portugus

Ingls

Portugus

Ingls

Neste caso, voc pode escolher "default" para seu layout e templates. Vamos assumir que voc quer deixar sua viso de loja "Portugus" usando a skin default. Como ns j definimos ela para todo o website, voc no precisa fazer nada para esta viso de loja.

Configurando o tema default no admin

Guia do Designer Magento Checkout Venda Mais www.checkoutexpressomagento.com.br

21

Loja Magento Community com o tema default Agora, digamos que voc quer que na sua viso de loja "Ingls", os clientes vejam diferenas significativas alm do prprio idioma. Para fazer isso, voc pode informar a variao de tema "blue" na sua viso de loja "Ingls"

Perceba que ns ainda deixamos o campo Padro como "default" para que em qualquer lugar que no se queira a variao de tema "blue" o mecanimo de fallback busque a informao do tema "default". Isso vai permitir que voc tenha um segundo conjunto de imagens e cores se assim voc quiser, baseados no idioma da sua loja.

Guia do Designer Magento Checkout Venda Mais www.checkoutexpressomagento.com.br

22

Loja com o tema blue escolhido Vamos ver outro exemplo. Natal e esta de longe a melhor poca para o e-commerce. Para melhor receber os compradores de fim de ano, sua loja deve refletir esta poca e inspirar seus clientes a explorarem a loja. O que sua loja precisa apenas de mais vermelho, neve e um Papai Noel, como abaixo.

Loja com o tema padro e com variao de tema para Natal Magento d sua loja a capacidade de gerenciar mltiplos temas exatamente para aquelas pocas em que uma personalizao extra mais necessria. Neste caso, voc no precisaria criar uma segunda viso de loja. Tudo o que voc precisa saber subir para sua loja um novo skin de Natal para sua pasta de skins e referenciar o novo skin no admin. Quando a poca de Natal acabar, s voltar para o skin anterior.

Guia do Designer Magento Checkout Venda Mais www.checkoutexpressomagento.com.br

23
HIERARQUIA DE TEMAS
Quando voc atribui mltiplos temas sua loja, voc est tirando vantagem do fato de que, embora seu principal objetivo ao construir um tema seja cri-lo da forma mais atraente e amigvel, Magento deve ser capaz de localizar e carregar todos os arquivos de tema necessrios para a loja rodar sem erros. Por exemplo, se sua pgina de listagem de categorias chama um template chamado "view.phtmk", mas o sistema no consegue encontrar o arquivo no tema respectivo, ele procurar no prximo tema da hierarquia e assim sucessivamente at encontrar o arquivo e carreg-lo. Este mecanismo chamado "fallback" j foi explicado anteriormente neste documento. A hierarquia de fallback no Magento Community a seguinte: 1. Procura o arquivo em: app/design/frontend/design_package/variacao_do_tema skin/frontend/design_package/variacao_do_tema Procura por blocos sobrescritos no arquivo local.xml

2. Se no encontrado, procura o arquivo em: app/design/frontend/design_package/default skin/frontend/design_package/default

2. Se no encontrado, procura o arquivo em: app/design/frontend/base/default skin/frontend/base/default

Por exemplo, digamos que voc possui trs temas na sua loja e cada um possui os seguintes arquivos. base todos os arquivos necessrios default templates/3-col-layout.phtml templates/header.phtml images/logo.gif css/base.css css/boxes.css variacao_tema templates/3-col-layout.phtml css/base.css

Agora vamos asusmir que os 3 temas possuem a seguinte hierarquia: Mais alta Mais baixa variacao_tema default base

Voc ver que h alguns arquivos redundantes como template/3-col-layout.phtml e css/base.css. Agora vamos reorganizar a tabela de modo que os arquivos redundantes fiquem lado a lado. base todos os arquivos necessrios default templates/3-col-layout.phtml templates/header.phtml variacao_tema templates/3-col-layout.phtml

Guia do Designer Magento Checkout Venda Mais www.checkoutexpressomagento.com.br

24
images/logo.gif css/base.css css/boxes.css Voc pode perguntar: "OK, mas o que isso quer dizer?". Bom, essa a forma como voc v os arquivos, mas no como o Magento v eles. Vamos ver como o Magento enxerga a mesma estrutura de arquivos. base todos os arquivos necessrios default variacao_tema templates/3-col-layout.phtml templates/header.phtml images/logo.gif css/base.css css/boxes.css Voc perceber que o Magento ignora os arquivos redundantes nas hierarquias mais baixas e reconhece apenas aqueles na hierarquia mais alta. Isso acontece porque ele j encontrou o arquivo que procurava e no precisa procurar mais atravs da hierarquia. Quando usado da maneira adequada, este mecanismo de fallback permite que voc edite e mantenha apenas os arquivos que voc realmente precisa modificar no tema personalizado.

css/base.css

REGRAS PARA LEMBRAR

Crie todos os seus temas personalizados dentro do seu prprio design package. Crie os diretrios app/design/frontend/seu_design_package/default e skin/frontend/seu_design_package/default e coloque seu tema l. No copie todos os arquivos de base/default para o seu design package personalizado. Copie apenas os arquivos que voc vai modificar. Isso vai ajud-lo a no se perder entre centenas de arquivos quando precisar procurar alguma coisa.

EXCEES
Permitem que os administradores da loja especifiquem temas alternativos para user-agents especficos. Ao invs de criar uma viso de loja separada para iPhone, por exemplo, excees permitem que o administrador ignore as configuraes de design de uma viso de loja, reduzindo assim o nmero de vises de loja que precisam ser gerenciadas. Por exemplo, para usar o tema iPhone voc pode adicionar uma exceo onde a coluna "Expresso Igual" (Matched Expression) "iPhone" e o valor iphone (se este for o nome do tema que voc quer usar)

Guia do Designer Magento Checkout Venda Mais www.checkoutexpressomagento.com.br

25

5. CUSTOMIZANDO TEMAS DO MAGENTO

Magento foi construdo de forma totalmente modular permitindo uma flexibilidade quase que ilimitada. Pela natureza do sistema, esta abordagem refletida tambm na personalizao dos temas da sua loja. Neste captulo, vamos explorar como exatamente customizar um tema no Magento.

CRIANDO O ESQUELETO DE DIRETRIOS PARA O SEU PACOTE/TEMA

Criar um novo pacote (design package) bastante fcil. Voc pode faz-lo incluindo apenas os arquivos que precisam ser diferentes do pacote Base. Uma regra que voc deve sempre lembrar ter certeza que a estrutura de subpastas convencionada foi preservada. Um bom ponto de partida ao criar seu pacote personalizado criar um esqueleto vazio com todas as pastas e subpastas usadas pelo Magento para que voc possa facilmente salvar os arquivos nos locais corretos. Quando voc terminar, se qualquer um dessas pastas ficar vazia, voc pode apag-la se desejar.

CRIANDO UM PACOTE E TEMA(S)

Nunca crie um tema dentro do pacote padro do Magento e nunca modifique os arquivos do diretrio default/default. A melhor forma de customizar sua loja e prevenir que sua loja seja danificada criar um novo pacote e criar seu tema personalizado dentro dele. Nas pastas app/design e skin, crie uma nova pasta para o pacote e em cada uma crie a estrutura de pastas esperada pelo Magento como abaixo:

Guia do Designer Magento Checkout Venda Mais www.checkoutexpressomagento.com.br

26
app/design/frontend/dubloo/default <MAGENTO_BASE_DIR> + app + code + design + frontend + base + default + dubloo + default + layout + template skin/frontend/dubloo/default/ <MAGENTO_BASE_DIR> + skin + frontend + base + default + dubloo + default + css + images + js

APLICANDO SEU NOVO PACOTE E TEMA AO WEBSITE

Uma vez que voc criou a estrutura de diretrio para seu novo pacote e tema, voc precisar aplic-lo sua loja para que voc veja as modificaes enquanto trabalha.

DESATIVE A CACHE DO SISTEMA

Para customizar sua loja Magento, voc deve primeiro desabilitar a cache de sistema atravs do admin em Sistema > Gerenciar Cache. Selecione os checkboxes Layout, Blocks HTML output e Tradues, no dropdown "Aes" selecione "Desabilitar" e clique em "Executar". Cada um desses trs registros dever ficar com uma barra vermelha indicando "DESATIVADO". Isso assegura que voc ver um reflexo fiel das suas alteraes na loja. Nota: Dependendo do seu objetivo, voc poder precisar desabilitar outros registros de cache neste mesmo painel ou, at mesmo, apagar arquivos de cache manualmente no seu sistema de arquivos. Nunca apague pastas de cache a no ser que voc saiba o que est fazendo.

ATRIBUA SEU PACOTE E TEMA PERSONALIZADOS LOJA

Para ver seu novo tema funcionando enquanto voc o constri, atribua-o ao seu website usando o admin do Magento. V em Sistema > Configuraes > Template. No painel "Pacote", informe no campo "Nome do template atual" o nome do seu pacote. No painel "Temas", informe no campo "Padro" o valor "default".

Guia do Designer Magento Checkout Venda Mais www.checkoutexpressomagento.com.br

27
Se voc voltar ao frontend da loja e atualizar o navegador, voc ver sua loja. Ela dever estar com todas as funcionalidades padro disponveis pelo pacote Base e ter os CSS que voc est modificando. Se voc no moveu qualquer CSS inicial ou imagens para o seu tema, o site carregar apenas como texto, sem estilos.

CUSTOMIZAR USANDO OS ARQUIVOS SKIN

Imagens e CSS podem personalizar um tema Magento de modo muito eficaz e eficiente. Se voc lembrar de um exemplo anterior, o tema "blue" difere do tema "default" apenas no CSS. No use o visibility do CSS para ativar/desativar blocos e contedos do Magento: use-o para customizar todo o estilo do seu site. Como o Magento possui muitas funcionalidades nativas organizadas em divs pr-definidos, at que voc esteja bastante experiente com temas no Magento, melhor que voc comece com folhas de estilo j existentes e modifique elas para adequar a aparncia da loja. Quando voc se torna mais experiente, voc consegue comear do zero ou com seu framework favorito. Se voc comear com CSS e imagens existentes, procure instalar uma ferramenta como o Firebug (plugin do Firefox) que vai ajud-lo a saber qual CSS est controlando e formatando cada elemento da pgina.

CUSTOMIZAR USANDO OS ARQUIVOS DE LAYOUT

Layouts so um dos recursos mais poderosos e nicos do Magento. Mesmo que voc esteja familiarizado com outros sistemas, trabalhar com layouts no Magento provavelmente novo para voc e inicialmente pode parecer mais um passo para confundir. Se voc domina o uso de layouts no Magento, voc consegue rapidamente ativar, desativar e mover praticamente qualquer contedo e bloco funcional do Magento.

INTRODUO AOS LAYOUTS

Layout a ferramenta com a qual voc consegue associar blocos de contedo a cada bloco estrutural que voc criar. Os arquivos de layout do Magento esto no formato de arquivos texto XML. Modificar o layout permite voc mover de lugar os blocos de uma pgina e associar templates aos blocos de contedo. De fato, com o auxlio de apenas alguns arquivos de layout, voc consegue modificar a aparncia visual de qualquer pgina da sua loja. Como exemplo, veja abaixo a landing page de categoria do Magento:

Guia do Designer Magento Checkout Venda Mais www.checkoutexpressomagento.com.br

28

Agora olhe a mesma tela com os blocos estruturais e de contedo marcados.

Blocos estruturais e blocos de contedo mapeados em blocos estruturais no Magento

Guia do Designer Magento Checkout Venda Mais www.checkoutexpressomagento.com.br

29
Conceitualmente, as caixas no diagrama da esquerda so os blocos estruturais. Eles so blocos pai dos blocos de contedo e servem para posicionar os blocos de contedo dentro da pgina da loja, como na imagem da direita. Esses blocos estruturais existem na forma de "rea do cabealho", "rea da coluna esquerda", "rea da coluna direita", etc, e servem para criar a estrutura visual da pgina. Neste captulo, vamos trabalhar com os blocos estruturais padro do Magento. Os blocos estruturais so controlados pelo mdulo Page do Magento e so definidos no arquivo app/design/frontend/default/layout/page.xml. Os respectivos templates padro so definidos em app/design/frontend/base/default/template/page/directory. Um bloco de contedo um bloco individual que forma um bloco estrutural. No contexto da loja, ele o verdadeiro contedo da pgina. Eles so representaes de cada funcionalidade exibida na pgina (como listagem de categorias, tags dos produtos, etc) e usam arquivos de template para gerar o xHTML que ser inserido no bloco estrutural pai. Blocos de contedo so definidos pelos arquivos de template encontrados na pasta app/design/frontend/base/default/template.

COMO LAYOUT NO MAGENTO FUNCIONA

Layout um componente virtual do Magento. Ao modificar os componentes do layout, voc pode construir sua loja de uma forma que ela pode ser atualizada sem riscos de danos. Os arquivos de layout podem parecer complicados, mas eles so na verdade construdos usando pequenos conjuntos de tags XML fceis de aprender. Ao aprender alguns conceitos e comandos chave de layout, voc em breve est pronto e confiante para facilmente modificar o design da sua loja de acordo com sua necessidade. Os arquivos base de layout so encontrados na pasta app/design/frontend/default/layout. Arquivos de layout para um tema devem ser colocados na pasta app/design/frontend/<seu_pacote>/<seu_tema>/layout Um layout compost de um layout padro (default) e atualizaes de layout feitas com tags XML. Com esses comandos, voc pode modificar ou associar blocos de contedo a blocos estruturais e tambm controlar as funcionalidades da loja. Cada mdulo Magento tem seu prprio arquivo de layout. Por exemplo, "catalog.xml" um arquivo de layout para o mdulo de catlogo e "customer.xml" para o mdulo de clientes. Cada arquivo ainda separado por "handles". Os "handles" disponveis so pr-definidos pelo core do Magento e por qualquer extenso ativa na sua loja. Na maioria das vezes, o handle corresponde a um tipo de pgina na sua loja Magento, como <catalog_category_default> e <catalog_product_view>, mas h handles que so aplicados a todas as pginas, como o handle <default>, e alguns que so aplicados em pginas conforme status especficos, como <customer_logged_in> e <customer_logged_out>.

Guia do Designer Magento Checkout Venda Mais www.checkoutexpressomagento.com.br

30

Um handle pode ocorrer em mltiplos arquivos de layout, e blocos podem ser atribudos quele handle ou sobrescritos por cada arquivo de layout. Por exemplo, a maioria dos arquivos de layout pode conter o handle <default>. Ao fazer o parse dos arquivos de layout, o Magento vai primeiro pegar as atualizaes de layout associadas ao handle <default> em cada arquivo de layout, lendo elas na ordem em que foram associadas no arquivo app/etc/modules/Mage_All.xml. O Magento ento faz o parse dos handles especficos de pgina, de novo procurando em todos os arquivos de layout por aquele handle, e finaliza construindo a pgina. O sistema de renderizao do Magento construdo desta forma para permitir incluses e remoes de mdulos de uma forma fcil e sem afetar outros mdulos do sistema. Isso significa que voc pode incluir, remover e mover de lugar a maioria das funcionalidades do Magento simplesmente incluindo, removendo e movendo declaraes de bloco nos arquivos de layout.

Guia do Designer Magento Checkout Venda Mais www.checkoutexpressomagento.com.br

31
ANATOMIA DO ARQUIVO DE LAYOUT DO MAGENTO
Layouts contm um pequeno conjunto de tags XML que agem como instrues detalhadas para a aplicao sobre como construir a pgina, com o que constru-la e o comportamento de cada bloco. Aqui esto algumas propriedades de comportamento de cada tag XML de layout.

HANDLES
Handle um identificador pelo qual a aplicao determina o que fazer com as atualizaes aninhadas ela. Se o nome do handle <default>, ento a aplicao sabe que as atualizaes aninhadas devem ser carregadas em quase todas as pginas da loja antes de carregar layouts especficos de pgina ("quase todas" porque algumas pginas excepcionais como popup de imagem do produto no carregam o layout no handle <default>). Se o Magento encontra outros handles que no o <default>, ele vai associar suas atualizaes aninhadas pgina especificada pelo handle. Por exemplo, <catalog_product_view> contm atualizaes de layout para a pgina Product View, enquanto que <catalog_product_compare_index> contm as atualizaes para a pgina Compare Product. Handles so identificadores que um designer, sem grande conhecimento de programao Magento, nunca deve modificar.

<BLOCK>
Magento determina o comportamento e a representao visual de cada bloco da pgina atravs da tag <block>. Ns j mencionamos os dois tipos de blocos que o Magento usa: estrutural e de contedo. A melhor forma de distinguir entre um e outro examinando o comportamento associado a cada um atravs dos atributos da tag. Um bloco estrutural geralmente contm o atributo "as" atravs do qual a aplicao pode se comunicar com a rea designada (usando o mtodo getChildHtml) no template. Voc notar vrias ocorrncias do atributo "as" no layout padro (default), porque pela sua natureza o layout default aquele que constri a base sobre a qual os layouts especficos de pgina realizam adies. Por exemplo, no layout default, h blocos estruturais como "left", "right", "content" e "footer" sendo includos. Embora esses blocos existam em atualizaes normais de layout, por que no configurar os blocos estruturais recorrentes no layout default primeiramente, e ento comear a adicionar contedos a cada pgina? Os atributos disponveis para <block> so: type - o identificador da classe do mdulo que define a funcionalidade do bloco. Esse atributo no deve ser modificado. name - o nome pelo qual outros blocos podem referenciar o bloco em questo. before e after - So duas formas de posicionar o bloco de contedo dentro de um bloco estrutural. before="-" e after="-" so comandos usados para posicionar o bloco ao topo ou ao final do bloco estrutural. template - Determina o template que representar a funcionalidade do bloco em questo. Por exemplo, se esse atributo for "catalog/category/view.phtml", a aplicao carregar o arquivo de template "app/design/frontend/template/catalog/category/view.phtml".

Guia do Designer Magento Checkout Venda Mais www.checkoutexpressomagento.com.br

32
action - <action> usado para controlar funcionalidades da loja como carregar ou "descarregar" um JavaScript. Voc pode aprender sobre as diferentes aes disponveis examinado os arquivos de layout j existentes. as - o nome pelo qual o template chama o bloco em questo. Quando voc v o mtodo php getChildHtml('block_name') chamado de por um template, ele est referenciando o bloco cujo atributo "as" igual a "block_name".

<REFERENCE>
usado para fazer referncia a outro bloco. Ao fazer referncia a um outro bloco, as atualizaes dentro de <reference> sero aplicadas ao <block> em que a tag est. Para fazer referncia, voc deve definir o bloco alvo usando o atributo "name". Este atributo referencia a tag "name" do <block> que se quer fazer referncia. Se voc usar <reference name="right">, voc estar referenciando o bloco <block name="right">.

REGRAS DE XML
O nico conjunto de regras que voc precisa lembrar em relao a XML que quando uma tag abre, ela deve ou ser seguida por uma tag de fechamento (<xml_tag></xml_tag>) ou "auto-fechada" (<xml_tag />) exatamente como necessrio para tags de arquivos xHTML.

Guia do Designer Magento Checkout Venda Mais www.checkoutexpressomagento.com.br

33

COMO ENCONTRAR QUAL ARQUIVO DE LAYOUT MODIFICAR

Para ter acesso aos arquivos de layout, v para app/design/frontend/<design_package>/<variacao_tema>/layout. Assim como os templates, layouts so salvos por mdulo e podem assim ser facilmente localizados com a ajuda do recurso "Exibir Caminho das Telas". Para habilitar este recurso, v em Sistema > Configuraes > Avanado > Desenvolvedor. Neste ponto, voc precisar se assegurar que seu website est selecionado no dropdown que fica ao topo da coluna da esquerda. Assim que selecionar seu website, clique no painel "Debugar". Aqui voc pode ativar o recurso "Exibir Caminho das Telas" (Template Path Hints). Se voc quer ainda mais informaes, voc tambm pode ativar o "Exibir Nomes dos Blocos" (Add Block Names to Hint).

Agora que voc possui este recurso ativado, recarregue a pgina que voc quer modificar e veja o caminho para os arquivos de template que o recurso de "Exibir Caminho das Telas" vai fornecer. Se, por

Guia do Designer Magento Checkout Venda Mais www.checkoutexpressomagento.com.br

34
exemplo, voc quer mover o mini cart, veja o caminho do template (ex: app/design/frontend/base/default/template/checkout/cart/sidebar.phtml) e use o nome da pasta dentro do tema (em negrito, que o nome do mdulo) para encontrar o respectivo arquivo de layout. No caso do mini cart, voc sabe que tem abrir o arquivo "checkout.xml" para modificar o posicionamento do mini cart. Cada arquivo de layout quebrado em handles que especificam layouts para tipos especficos de pgina. Cada rea do layout por pgina claramente marcada com comentrios que refletem seu uso, mas a aplicao sozinha reconhece a separao do layout pelos handles de cada layout.

CUSTOMIZAR USANDO O ARQUIVO DE LAYOUT LOCAL (LOCAL.XML)

Como vimos anteriormente, voc consegue mudar significativamente que blocos e contedos o Magento exibe em um tema modificando apenas alguns arquivos e incluindo apenas os arquivos modificados no seu tema personalizado, graas ao mecanismo de fallback j explicado. Seu tema personalizado precisa conter apenas os arquivos, ou na verdade apenas os blocos que so diferentes do tema base. Voc pode usar o mtodo de modificar e salvar arquivos para todas as verses do Magento e essa uma maneira perfeitamente aceitvel de customizar um tema. Uma abordagem mais elegante e fcil de manter para habilitar e desabilitar blocos que permite voc fazer boa parte deste trabalho com apenas um arquivo criando um arquivo de layout na pasta do seu tema personalizado que sobrescreve o comportamento de apenas alguns blocos do tema base. Voc no precisa copiar todos os arquivos do tema e apagar ou comentar o cdigo de cada um. Voc pode deixar que o tema base contenha todos os blocos padro e no seu tema voc apenas desabilita os blocos que voc no quer. Na lgica do Magento, depois que ele carrega todos os layouts XML e as atualizaes de layout, ele carrega por ltimo um arquivo de layout local chamado "local.xml", que pode ser usado como uma ltima chance de sobrescrever as atualizaes de layout previamente carregadas. Para fazer isso, dentro da pasta do seu pacote em app/design/frontend/<seu_pacote>/<seu_tema>/layout: Crie um arquivo chamado local.xml. No arquivo local.xml, crie um bloco <default> que ir conter e consolidar as mudanas globais.
<?xml version="1.0" ?> <layout> <default> <!- Suas sobrescritas de bloco vo aqui --> </default> </layout>

Dependendo do que voc quer habilitar e desabilitar, o local.xml pode conter algumas das linhas a seguir:
<default> <remove name="left.permanent.callout" /> <!--the dog--> <remove name="right.permanent.callout" /> <!--back to school--> <remove name="catalog.compare.sidebar" /> <!--product compare--> <remove name="paypal.partner.right.logo" /> <!--paypal logo--> <remove name="cart_sidebar" /> <!--cart sidebar--> <remove name="left.reports.product.viewed" /> <!--recently viewed prod--> <remove name="right.reports.product.viewed" /> <!--recently viewed prod--> <remove name="right.reports.product.compared" /> <!--recently compared --> </default>

Guia do Designer Magento Checkout Venda Mais www.checkoutexpressomagento.com.br

35
Isso ir variar dependendo do tema, por isso apenas uma referncia. Use a lista nas sees anteriores como um guia, encontre o arquivo XML na pasta de layout do seu tema (ou a pasta de layout do tema base) que contm o(s) bloco(s) que voc quer desabilitar e encontre os nomes dos blocos neste arquivo. Voc pode usar esses nome no seu arquivo local.xml para remover os blocos. Ainda, o exemplo acima remove blocos de contedo do escopo default, voc pode preferir remov-los apenas de um bloco estrutural especfico - como "left" ou "right". Mas isso j lhe d uma idia de como funciona. Voc tambm pode usar o local.xml para atualizar handles especficos. Por exemplo, se voc quisesse atribuir a pgina padro do template para as pginas de categoria ao template 2column-left, voc poderia usar os handles que controlam a renderizao das pginas de catlogo e incluir um cdigo como a seguir no arquivo local.xml
<catalog_category_default> <reference name="root"> <action method="setTemplate"><template>page/2columns-left.phtml</template></action> </reference> </catalog_category_default> <catalog_category_layered> <reference name="root"> <action method="setTemplate"><template>page/2columns-left.phtml</template></action> </reference> </catalog_category_layered>

Esse foi apenas um rascunho superficial sobre como usar o arquivo local.xml para sobrescrever layouts apenas para os blocos que queremos desabilitar, ao invs de copiar arquivos e deletar cdigo. Com esta mesma abordagem, voc tambm pode adicionar blocos, mudar onde eles aparecem, alterar um pouco do seu comportamento, etc, apenas sobrescrevendo o comportamento padro em um nico local e nunca precisando editar os arquivos de layout originais.

CUSTOMIZANDO USANDO TEMPLATES

Voc viu que os arquivos de layout no Magento controlam a presena ou ausncia de cada bloco de contedo em um tema. O que , especificamente, renderizado dentro do bloco controlado pelos arquivos de template. A maioria dos templates no contm qualquer lgica sobre se ele ser ou no renderizado (lembre que isso tipicamente controlado pelos arquivos de layout). Uma vez que um template chamado, espera-se que ele seja parseado e exibido. Arquivos de template no Magento so arquivos PHTML que contm cdigo xHTML e PHP que ser parseado e renderizado pelo navegador. Uma vez que voc identifica qual arquivo de template est sendo usado para gerar o contedo de um bloco especfico, voc pode modificar o arquivo de template se desejar. Ou voc pode modificar o arquivo de layout para associar um template diferente quele bloco, o que permite voc criar arquivos de template totalmente novos. Como recomendao geral, ao invs de editar os arquivos de template do Magento, uma boa prtica voc copiar o arquivo que voc quer alterar para o seu tema com um nome ligeiramente diferente e editar o novo arquivo renomeado. E ento, voc atualiza o layout para que aquele bloco use o novo template. Isso preserva o template original caso ele seja usado em mltiplos locais e assegura que, quando o Magento for atualizado, qualquer mudana no arquivo de template original no impactar seus arquivos de template modificados sem que voc saiba.

Guia do Designer Magento Checkout Venda Mais www.checkoutexpressomagento.com.br

36
Voltando ao exemplo anterior em que usamos um arquivo local.xml para sobrescrever declaraes de layout, se voc quisesse que suas pginas de categoria tivessem um template nico, voc poderia criar um novo template de pgina em app/design/frontend/<seu_pacote>/default/template/page/ chamado "2columns-custom.phtml". Nele talvez voc criasse uma verso modificada do template two-columns do Magento com uma barra lateral onde voc pode incluir novos blocos estruturais para promoes e produtos relacionados que apareceriam apenas nas pginas de categoria. Neste caso, seu arquivo local.xml na pasta app/design/frontend/<seu_pacote>/default/layout poderia incluir o seguinte cdigo que diz ao Magento para renderizar aquelas pginas usando o novo arquivo de template:
<?xml version="1.0" ?> <layout> <catalog_category_default> <reference name="root"> <action method="setTemplate"><template>page/2columns-custom.phtml</template></action> </reference> </catalog_category_default> <catalog_category_layered> <reference name="root"> <action method="setTemplate"><template>page/2columns-custom.phtml</template></action> </reference> </catalog_category_layered> </layout>

6. GUIA RPIDO PARA CRIAR UM TEMA DO ZERO

Muitos temas para Magento so construdos da forma descrita no captulo anterior - modificando arquivos e sobrescrevendo blocos que so definidos no pacote base do Magento. possvel, no entanto, criar um novo tema do zero e no usar os blocos estruturais e de contedo padro do Magento - voc no est limitado ao cabealho, rodap, esquerda, direita, e contedo como contineres estruturais se voc no quiser assim. Se voc decide criar um tema do zero, mesmo que parcialmente, voc ter muito mais trabalho, mas dependendo do projeto, pode ser a melhor abordagem para voc. Este captulo fornece um pouco de orientao sobre como estruturar o design e reconstruir os layouts, templates e skins do Magento para o design pretendido.

UM: DESABILITE A CACHE DO SISTEMA

Para customizar sua loja Magento, voc deve primeiro desabilitar a cache de sistema atravs do admin em Sistema > Gerenciar Cache. Selecione os checkboxes Layout, Blocks HTML output e Tradues, no dropdown "Aes" selecione "Desabilitar" e clique em "Executar". Cada um desses trs registros dever ficar com uma barra vermelha indicando "DESATIVADO". Isso assegura que voc ver um reflexo fiel das suas alteraes na loja. Nota: Dependendo do seu objetivo, voc poder precisar desabilitar outros registros de cache neste mesmo painel ou, at mesmo, apagar arquivos de cache manualmente no seu sistema de arquivos. Nunca apague pastas de cache a no ser que voc saiba o que est fazendo.

Guia do Designer Magento Checkout Venda Mais www.checkoutexpressomagento.com.br

37
DOIS: DETERMINE TODAS AS POSSIBILIDADES DE ESTRUTURAS PARA A SUA LOJA
Antes at mesmo de comear a criar as marcaes para a loja, voc primeiro precisa perguntar a si mesmo que tipo de estrutura de pgina voc gostaria de ter para cada pgina da sua loja. Faa uma lista parecida com esta: Home vai ter uma estrutura de 3 colunas Listagem de categorias ter uma estrutura de 2 colunas com uma coluna direita Pginas de cliente tero uma estrutura de 2 colunas com uma coluna esquerda

TEMPLATE ESQUELETO
Uma vez que sua lista esteja completa, crie as marcaes xHTML para cada tipo de estrutura e salve-as como TEMPLATE ESQUELETO em app/design/frontend/<seu_pacote>/<variacao_tema>/template/page. Um template esqueleto chamado assim pelo seu propsito: tudo que ele realmente contm (fora os elementos <head>) so marcaes de apresentao que servem para posicionar cada bloco estrutural de acordo com as reas marcadas. Exemplo de template esqueleto:

Ao analisar o template esqueleto acima, voc notar um mtodo PHP chamado "<?=$this>getChildHtml()?>" dentro de cada marcao de apresentao. Esse o modo pelo qual o Magento carrega blocos estruturais nos templates esqueleto para ento posicionar todos os contedos dos blocos estruturais dentro da pgina da loja. Cada getChildHtml chama um nome como em <div class="header"><?=$this>getChildHtml('header')?></div>, e esses nomes so a forma pela qual cada bloco estrutural identificado no layout. Templates esqueleto so atribudos loja atravs do layout.

TRS: RECORTE SEU XHTML DE ACORDO COM A FUNCIONALIDADE

Assim que voc criar os templates esqueleto, voc precisar criar templates para cada bloco de contedo.

Guia do Designer Magento Checkout Venda Mais www.checkoutexpressomagento.com.br

38
MAGENTO GOSTA DE TEMPLATES COM SIGNIFICADO
Voc precisar recortar as marcaes xHTML criadas para a sua pgina e fornercer os respectivos marcadores para todas as funcionalidades da pgina. Por exemplo, se voc tem uma rea para o minicart, a marcao para esta rea sozinha se tornar seu prprio arquivo de template. O mesmo para as reas de tags de produto, assinatura de newsletter, etc. Todas essas funcionalidades j vm com o Magento, assim voc pode consultar as tags de template j existentes para montar a lgica das suas marcaes.

ONDE SALVAR OS TEMPLATES

A marcao completa para qualquer pgina na sua loja introduzida por um array de templates cada um representando uma funcionalidade de um mdulo. Para saber quais templates esto sendo chamados em uma pgina que voc deseja modificar, voc pode ativar o recurso de "Exibir Caminhos nas telas" (Template Path hints). Para tanto: No Admin, v em Sistema > Configuraes > Avanado > Desenvolvedor. No topo da coluna da esquerda, seleciona a sua loja no dropdown Depois da pgina recarregar, clique no painel "Debugar". Aqui voc pode ativar o recurso "Exibir Caminho das Telas" (Template Path Hints). Se voc quer ainda mais informaes, voc tambm pode ativar o "Exibir Nomes dos Blocos" (Add Block Names to Hint). Volte para a loja, recarregue a pgina e voc ver o caminho para todos os arquivos de template nos seus respectivos blocos. Para modificar a marcao, tudo que voc precisa fazer encontrar o arquivo de template a partir do caminho exibido na tela e modific-lo.

QUATRO: MUDE O LAYOUT PARA REFLETIR O SEU DESIGN

Depois de organizar as marcaes, voc provavelmente desejar mover os templates pela pgina para ver o progresso do seu trabalho.

LAYOUT DEFAULT VERSUS ATUALIZAES DE LAYOUT

H dois tipos de layout - default e atualizaes. O layout default (page.xml) o layout que por padro aplicado a praticamente todas as pginas da loja. Todos os outros arquivos de layout so Atualizaes de Layout que simplesmente atualizam o layout padro para cada pgina. Vamos ver o exemplo do template esqueleto: No layout default, voc definiu trs colunas, o que significa que por padro todas as pginas da loja tero uma estrutura de pgina de trs colunas. Mas no essa estrutura que voc quer para a pgina de produto. Para ela, voc quer uma estrutura de duas colunas com uma coluna direita. Voc precisar ento deixar o layout padro como est e abrir o catalog.xml no qual voc pode inserir alguns comandos de layout que dizem ao Magento para carregar a estrutura de duas colunas na sua pgina de produto ao invs das trs colunas padro. Isso chamado de processo de atualizao do layout. Exemplo para o template esqueleto:

Guia do Designer Magento Checkout Venda Mais www.checkoutexpressomagento.com.br

39
<reference name=root> <action method=setTemplate><template>page/2columns-right.phtml</template></action> </reference>

Vamos ver outro exemplo: Digamos que voc quer um formulrio de assinatura de newsletter na sua coluna da direita, mas nas pginas do cliente voc quer exclu-lo. Neste caso, voc pode no mexer no layout default e abrir o customer.xml, no qual voc colocar um comando que desabilita o bloco de contedo da newsletter, excluindo essa funcionalidade das pginas de cliente.

7. OUTROS RECURSOS
O Magento oferece diversos recursos para ajud-lo a customizar sua loja e estimula o uso e a participao nos seguintes: Artigos da base de conhecimento Webseminrios Frum oficial para o Brasil

O Magento tambm convida voc a compartilhar seus designs, discutir a documentao e enviar todas as suas perguntas para os fruns sobre design e template da comunidade.

O CHECKOUT VENDA MAIS

O Checkout Venda Mais o jeito MAIS FCIL de vender mais no Magento. Ele reduz o checkout do Magento para 1 nico passo, compatvel com os principais mdulos de pagamentos e vem preparado para o Brasil. Veja demonstrao em http://www.checkoutexpressomagento.com.br

Guia do Designer Magento Checkout Venda Mais www.checkoutexpressomagento.com.br