Documente Academic
Documente Profesional
Documente Cultură
para Magento
O Guia do Designer 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
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
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.
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
6
CENRIO 1 - UMA LOJA
Uma loja que no precisa de mltiplos idiomas.
Website
Bongos Instrumentos
Loja
Bongos Instrumentos
Viso de Loja
Bongos Instrumentos
Website
Dubloo Inc.
Loja
Classe A
Classe B
Classes C e D
Viso de Loja
Classe A
Classe B
Classes C e D
Website
Meus Laptops
Laptops Baratos
Loja
Meus Laptops
Laptops Baratos
Viso de Loja
Portugus
Ingls
Portugus
Ingls
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.
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.
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.
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.
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.
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
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
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.
12
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.
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.
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.
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.
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
16
<MAGENTO_BASE_DIR> + app + code + design + 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.
17
<MAGENTO_BASE_DIR> + skin + frontend + base + default + dubloo + default + css + images + js
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?
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.
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.
20
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.
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.
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.
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
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
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
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)
25
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
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.
28
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.
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.
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".
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.
33
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
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.
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>
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.
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>
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.
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.
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.