Upload
rubens-fernandes
View
220
Download
0
Embed Size (px)
Citation preview
7/23/2019 Templates Para Magento Pt Br Checkoutvendamais
http://slidepdf.com/reader/full/templates-para-magento-pt-br-checkoutvendamais 1/39
Templates
para MagentoO Guia do Designer Magento
Tradução não oficial do Designer’s Guide to Magento
7/23/2019 Templates Para Magento Pt Br Checkoutvendamais
http://slidepdf.com/reader/full/templates-para-magento-pt-br-checkoutvendamais 2/39
Guia do Designer Magento Checkout Venda Maiswww.checkoutexpressomagento.com.br
2
SUMÁRIO
NOTAS.............................................................................................................................................................. 4
1. Visão Geral ............................................................. ................................................................. ..................... 5
2. Conceitos e Terminologia ............................................................................................ ................................ 5
Websites e Lojas ............................................................... ................................................................. .......... 5
Pacotes e Temas ............................................................... ................................................................. .......... 7
Temas ................................................................ ................................................................ ...................... 8
Temas Default.......................................................................................................................................... 8
Variações de Tema ou temas não 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 múltiplos temas .......................................................................... ................... 19
Hierarquia de temas ......................................................... ................................................................. ........ 23
Regras para lembrar ................................ ................................................................ .............................. 24
Exceções .................................................................................. .............................................................. 24
5. Customizando Temas do Magento ......................................................... ................................................... 25
7/23/2019 Templates Para Magento Pt Br Checkoutvendamais
http://slidepdf.com/reader/full/templates-para-magento-pt-br-checkoutvendamais 3/39
Guia do Designer Magento Checkout Venda Maiswww.checkoutexpressomagento.com.br
3
Criando o esqueleto de diretórios 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
Introdução 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 Rápido 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
Três: 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
7/23/2019 Templates Para Magento Pt Br Checkoutvendamais
http://slidepdf.com/reader/full/templates-para-magento-pt-br-checkoutvendamais 4/39
Guia do Designer Magento Checkout Venda Maiswww.checkoutexpressomagento.com.br
4
NOTAS
Este guia é uma livre tradução do Magento Designer’s Guide realizada pela equipe do Checkout Venda
Mais para apoiar o crescimento do Magento no Brasil.
O guia original em inglês está disponível no seguinte endereço:
http://www.magentocommerce.com/resources/magento-user-guide
Ao longo do documento, termos em inglês são eventualmente mantidos para assim preservar o
significado.
Além disso, como há diferentes pacotes de tradução PT-BR para Magento em uso no mercado, e nem
sempre as traduções utilizam os mesmos termos ou os termos mais adequados, este guia usa como
referência o pacote de tradução PT-BR disponibilizado pela equipe do Checkout Venda Mais em:
http://www.checkoutvendamais.com.br/traducao-magento
No guia original há referências às edições Enterprise e Professional (esta última não existe mais) doMagento, as quais não foram contempladas nesta tradução.
7/23/2019 Templates Para Magento Pt Br Checkoutvendamais
http://slidepdf.com/reader/full/templates-para-magento-pt-br-checkoutvendamais 5/39
Guia do Designer Magento Checkout Venda Maiswww.checkoutexpressomagento.com.br
5
1. VISÃO GERAL
O Guia do Designer do Magento expande seu conhecimento da estrutura do Magento e os métodos para
customizá-lo. Ele ensina como criar seu próprio tema.
Devido a extrema flexibilidade, não é possível documentar todas as diferentes formas em que ele pode
ser customizado.
Nos fóruns do Magento você consegue mais informações de usuários com experiências reais.
Como o Magento está sempre sendo atualizado, esta documentação pode não ser 100% adequada a sua
versão do Magento.
Este guia é voltado apenas a Magento Community versões 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 são a base para entender como customizar o frontend.
WEBSITES E LOJAS
Como o Magento suporta nativamente o gerenciamento de múltiplas lojas em uma única instalação, há
uma hierarquia de conceitos que define a relação entre cada loja individual.
No Magento, um website é um conjunto de lojas, que por sua vez são um conjunto de visões de loja. São
essas camadas que dão uma poderosa flexibilidade para lojas que usam Magento.
Um website é feito de 1 ou mais lojas que compartilham as mesmas informações de cliente e
carrinhos de compra.
Lojas são coleções de visões de loja que podem ser configuradas de diversas formas. A principal
função é prover um contêiner lógico para você agrupar lojas relacionadas em um mesmo site.
Visões de loja são as instâncias de loja no Magento. Na maior parte das vezes, haverá uma única
visão de loja. Mas uma loja pode ter múltiplas visões, tipicamente usadas para diferentes
idiomas.
Visão de Loja
Loja
Website Marca 1 Marca 2
Principal Loja 2 Principal
PortuguêsPortuguêsInglêsPortuguês
7/23/2019 Templates Para Magento Pt Br Checkoutvendamais
http://slidepdf.com/reader/full/templates-para-magento-pt-br-checkoutvendamais 6/39
Guia do Designer Magento Checkout Venda Maiswww.checkoutexpressomagento.com.br
6
CENÁRIO 1 - UMA LOJA
Uma loja que não precisa de múltiplos idiomas.
CENÁRIO 2 – MÚLTIPLAS LOJAS RELACIONADAS
Uma empresa que cria 3 lojas de roupas direcionadas a públicos diferentes. Todas devem compartilhar as
informações de clientes, mas um só idioma é usado.
CENÁRIO 3 – MÚLTIPLAS LOJAS INDEPENDENTES
Empresa quer 2 lojas diferentes de laptop, com diferentes produtos, categorias e preços, cada uma
preparada para os idiomas Português e Inglês. Elas não precisam compartilhar informações e clientes.
Visão de Loja
Loja
Website Bongo’s Instrumentos
Bongo’s Instrumentos
Bongo’s Instrumentos
Website
Visão de Loja
Loja
Dubloo Inc.
Classe A
Classe A
Classes C e D
Classes C e D
Classe B
Classe B
Website
Visão de Loja
Loja
Meus Laptops
Português
Meus Laptops
Inglês
Laptops Baratos
Português
Laptops Baratos
Inglês
7/23/2019 Templates Para Magento Pt Br Checkoutvendamais
http://slidepdf.com/reader/full/templates-para-magento-pt-br-checkoutvendamais 7/39
Guia do Designer Magento Checkout Venda Maiswww.checkoutexpressomagento.com.br
7
PACOTES E TEMAS
Pela hierarquia anterior, você pode ver que uma única instalação do Magento pode ter diversas lojas que
compartilham ou não a mesma aparência.
Para controlar a aparência de cada loja, o Magento lhe permite criar temas. Temas relacionados são
agrupados juntos em pacotes de design ou "design packages".
Cada loja na sua instalação Magento pode usar seu próprio tema, ou elas podem todas compartilhar o
mesmo tempo, ou ainda um meio termo entre estas duas opções.
Um design package é uma coleção de temas relcionados. Quando instalado, o Magento tem um
design package especial chamado "base package". Também haverá um outro pacote específico
para sua edição do Magento. Na Community, ele se chama "default" e na Enterprise se chama
"enterprise".
Temas dentro de um design package contêm os arquivos que determinam a aparência e asfuncionalidades do frontend da loja. Eles contêm informações de design como arquivos de
layout, arquivos template, arquivos de tradução, CSS, imagens e javascripts. Um tema pode
pertencer a um único design package. Por convenção, cada design package deve conter um tema
default. Adicionalmente, um design package pode conter qualquer número de variações do tema
default.
Ambos design package e tema podem ser associados ao nível do website ou ao nível da visão de loja pelo
admin do Magento. Se você associa ao nível do Website, todas as lojas vão herdar aquela aparência. Você
pode, depois, atribuir um pacote específico para uma das sublojas, ignorando assim o pacote configurado
para todo o website.
Pacote Base Pacote 1 Pacote 2
Tema
Default
Tema
Default
Variação
Tema 1
Variação
Tema 2
Tema
Default
7/23/2019 Templates Para Magento Pt Br Checkoutvendamais
http://slidepdf.com/reader/full/templates-para-magento-pt-br-checkoutvendamais 8/39
Guia do Designer Magento Checkout Venda Maiswww.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 experiência visual da sua loja e estão organizados respectivamente nas
pastas "App/design" e "Skin".
O Magento organiza seus arquivos de tema assim para permitir maior controle sobre o nível de segurança
de cada pasta do seu servidor. Os arquivos em "skin" precisam estar acessíveis aos navegadores enquanto
que os arquivos em "app/design" não.
Cada pasta é organizada em subpastas da seguinte forma:
app/design/frontend/<nomeDesignPackage>/<nometema>
o /Layout - contém os arquivos XML que definem as estruturas de blocos para as
diferentes páginas da loja assim como meta informações e a codificação das páginas.
o /Template - contém os arquivos PHTML com as tags xHTML e PHP para a apresentação
da página.
o /Locale - contém os arquivos CSV de tradução para os idiomas suportados
Skin/frontend/<nomeDesignPackage>/<nometema>
o /CSS - contém os arquivos CSS
o /Images - contém todas as imagens usadas pelo tema
o /JS - contém todos os arquivos javascript específicos do tema. Javascript compartilhados
entre vários temas devem ser colocados na raíz do Magento na pasta /js
TEMAS DEFAULT
Cada design package deve incluir um tema chamado default (padrão) 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.
7/23/2019 Templates Para Magento Pt Br Checkoutvendamais
http://slidepdf.com/reader/full/templates-para-magento-pt-br-checkoutvendamais 9/39
Guia do Designer Magento Checkout Venda Maiswww.checkoutexpressomagento.com.br
9
O tema default deverá conter todos os arquivos de layout, template e skins para exibir a sua loja. Todos os
arquivos que não forem encontrados no tema default serão buscados no tema padrão do pacote base.
VARIAÇÕES DE TEMA OU TEMAS NÃO DEFAULT
Uma variação de tema pode conter quantos arquivos de tema quanto você precisar. Essas variações
permitem você facilmente criar pequenas variações sobre o seu tema default para serem aplicadas em
toda a sua loja, subseções da sua loja, páginas específicas ou a uma loja separada porém relacionada.
Quando estiver trabalhando com um design package customizado, você pode tanto modificar o tema
padrão como criar uma variação do tema padrão e aplicá-la à sua loja.
Pacote Base Pacote 1 Pacote 2
Tema
Default
Tema
Default
Variação
Tema 1
Variação
Tema 2
Tema
Default
Pacote Base Pacote 1 Pacote 2
Tema
Default
Tema
Default
VariaçãoTema 1
Variação
Tema 2
Tema
Default
7/23/2019 Templates Para Magento Pt Br Checkoutvendamais
http://slidepdf.com/reader/full/templates-para-magento-pt-br-checkoutvendamais 10/39
Guia do Designer Magento Checkout Venda Maiswww.checkoutexpressomagento.com.br
10
Exemplos:
Uma página de produto mais simples, com menos informações.
Uma seção do seu website com os produtos a serem lançados na próxima estação que ainda não
estão à venda.
Uma customização do site temporária para uma determinada época do ano.
Um website de outra divisão da sua empresa, com a mesma identidade visual, mas com
modificações por trabalhar com outras categorias de produtos.
MECANISMO DE FALLBACK DO MAGENTO
Se um tema personalizado chama um arquivo CSS chamado "styles.css" e não encontra, Magento vai
procurá-lo no próximo tema da hierarquia e continuar assim até localizar o arquivo. Este método é
chamado de "fallback".
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 são
fornecidas tanto pelo tema default do pacote ou pelo pacote base.
Isso faz com que seus temas personalizados sejam menos vulneráveis a atualizações e permitem você
manter menos código também.
BLOCOS E LAYOUTS
Estes são outros conceitos que você precisa aprender para ser um designer Magento bem sucedido:
Blocos estruturais
Blocos de conteúdo
Layout
Início
Procura arquivo emnome_pacote/nome_tema
Achou?
Procura arquivo emnome_pacote/default
Achou?
Procura arquivo embase/default
Achou?
Exibe conforme indicadoErro de
renderização
sim sim sim
não não
não
7/23/2019 Templates Para Magento Pt Br Checkoutvendamais
http://slidepdf.com/reader/full/templates-para-magento-pt-br-checkoutvendamais 11/39
Guia do Designer Magento Checkout Venda Maiswww.checkoutexpressomagento.com.br
11
BLOCOS
Blocos são 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 aparência da loja:
Blocos estruturais - são os blocos criados para o único propósito de definir a estrutura visual da loja como
cabeçalho, coluna lateral, coluna principal e rodapé.
Blocos de conteúdo - são os blocos que de fato produzem o conteúdo dentro de cada bloco estrutural.
Eles são representações de cada funcionalidade da página 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 são exemplos de blocos de conteúdo.
Layouts - são os arquivos que essencialmente mapeiam os blocos de conteúdo aos blocos estruturais.
Layouts no Magento possuem duas funções: eles tanto definem os blocos estruturais e de conteúdo como
também informam ao Magento como e onde conectá-los.
Figura: Exemplo de Blocos Estruturais
7/23/2019 Templates Para Magento Pt Br Checkoutvendamais
http://slidepdf.com/reader/full/templates-para-magento-pt-br-checkoutvendamais 12/39
Guia do Designer Magento Checkout Venda Maiswww.checkoutexpressomagento.com.br
12
Figura: Exemplo de Blocos de Conteúdo mapeados em Blocos Estruturais
WIDGETS
Você pode estar familiarizado com o termo Widget the outras aplicações online. No Magento, widgets são
blocos do frontend com configurações pré-definidas. Essas configurações são exibidas em um formulário
de edição especial no admin do Magento permitindo o próprio administrador da loja customizá-la com
facilidade.
Essencialmente, eles são uma ótima forma de permitir que usuários sem conhecimento técnico incluam
conteúdos dinâmicos em áreas da loja pré-definidas pelo designer ou desenvolvedor. Exemplos:
Informações dinâmicas de produtos em landing pages de ações de marketing
Os itens visualizados recentemente
Imagens promocionais em diferentes blocs, colunas e outras localizações da loja
Elementos interativos como reviews, enquetes e formulários de assinatura
Elementos alternativos de navegação como nuvem de tags e sliders de imagens
TERMINOLOGIA DE WIDGETS
Bloco de frontend - um elemento que cria a aparência visual tanto por definir a estrutura visual quanto
por exibir o conteúdo de fato.
Widget Magento - um bloco de frontend que implementa uma interface especial de widget que permite
diferentes configurações para cada instância independente do mesmo widget.
7/23/2019 Templates Para Magento Pt Br Checkoutvendamais
http://slidepdf.com/reader/full/templates-para-magento-pt-br-checkoutvendamais 13/39
Guia do Designer Magento Checkout Venda Maiswww.checkoutexpressomagento.com.br
13
Instância do Widget Magento - um bloco em uma página ou em múltiplas páginas que recebe as
configurações definidas pelo administrador da loja. O mesmo widget pode ser adicionado várias vezes
gerando diferentes instâncias do mesmo widget.
EXEMPLOS DE WIDGETS NATIVOS DO MAGENTO:
CMS Page Link - mostra o link para uma página do CMS escolhida
CMS Static Block - mostra o conteúdo de um bloco estático 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 recém comparados
Recently Viewed Products - mostra um bloco com os produtos recém visualizados
3. PACOTES E TEMAS NA ESTRUTURA DE PASTAS DO MAGENTO
Temas são agrupados logicamente em design packages, mas, como explicado no capítulo anterior, eles
são fisicamente separados em duas pastas. No começo, isso pode ser um pouco confuso, por isso este
capítulo vai explicar esta estrutura de pastas.
Assim que você avançar nesta seção, perceba que os nomes de pastas devem ser os MESMOS em ambas
as pastas app/design e skin.
O PACOTE BASE
O papel do pacote Base é prover todas as funcionalidades core do Magento, para que seus temas
personalizados incluam apenas as mudanças nessas funcionalidades específicas para a sua loja. O
Magento faz isso usando o modelo "fallback" explicado anteriormente que procura pelos arquivos de
tema necessários primeiro no pacote personalizado e depois no pacote base caso não encontre.
Base DefaultPacote
Personalizado
Default Default
Blank
Modern
Iphone
Default
Variação
etc
7/23/2019 Templates Para Magento Pt Br Checkoutvendamais
http://slidepdf.com/reader/full/templates-para-magento-pt-br-checkoutvendamais 14/39
Guia do Designer Magento Checkout Venda Maiswww.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 customização, já que todos os arquivos que controlam o
comportamento padrão do Magento (e são MUITOS) ficam no pacote base e seu pacote personalizado
precisará conter apenas os arquivos que precisarem ser modificados.
O pacote base contém apenas um tema default e nenhuma outra variação de tema deve ser criada dentro
do pacote base.
Na estrutura de diretórios, o pacote Base contém ambas as pastas app/design e skin. No entanto, o tema
padrão associado não é 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
Contém TODOS os arquivos de layout e template necessários 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
Contém ALGUNS arquivos CSS e Javascript necessários para as funcionalidades nativas. Não possui, no
entanto, todos os CSS e imagens necessários para customizar um site, porque esses arquivos são
específicos do design e não do core do Magento.
<MAGENTO_BASE_DIR>
+ skin
+ adminhtml+ frontend
+ base
+ default
+ default
+ install
O pacote Base é na verdade um repositório das funções core (nativas) do Magento disponíveis no
frontend. Desta forma, não faça qualquer tipo de customização 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 modificações.
7/23/2019 Templates Para Magento Pt Br Checkoutvendamais
http://slidepdf.com/reader/full/templates-para-magento-pt-br-checkoutvendamais 15/39
Guia do Designer Magento Checkout Venda Maiswww.checkoutexpressomagento.com.br
15
O PACOTE DEFAULT
Você vai perceber que em cada instalação do Magento, não há somente o pacote Base mas também um
outro chamado de default.
Na estrutura de diretórios, esses pacotes possuem ambas as pastas app/design e skin. Ao contrário do
pacote Base, os temas nesses pacotes são completos, com todos os arquivos CSS e imagens necessários.
Esses temas podem ser usados se você quiser utilizar o tema padrão do Magento como ponto de partida.
Seu propósito mais poderoso, no entanto, é como referência para criar seus próprio 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 conteúdo 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
customização.
app/design/frontend/dubloo/default
7/23/2019 Templates Para Magento Pt Br Checkoutvendamais
http://slidepdf.com/reader/full/templates-para-magento-pt-br-checkoutvendamais 16/39
Guia do Designer Magento Checkout Venda Maiswww.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 personalização que você está buscando.
Como você já viu, cada design package deve ter pelo menos um tema default e pode ter qualquer número
de variações 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/
7/23/2019 Templates Para Magento Pt Br Checkoutvendamais
http://slidepdf.com/reader/full/templates-para-magento-pt-br-checkoutvendamais 17/39
Guia do Designer Magento Checkout Venda Maiswww.checkoutexpressomagento.com.br
17
<MAGENTO_BASE_DIR>
+ skin
+ frontend+ base
+ default
+ dubloo+ default
+ css
+ images
+ js
4. APLICANDO TEMAS EM MAGENTO
Neste capítulo, 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 próximo
capítulo, veremos como realizar pequenas customizações 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 > Configurações > Template.
Se você possui mais de um website, loja ou visão 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 nível do website, selecione o nome do website no dropdown e siga os passos
seguintes.
O que exatamente significa atribuir o tema ao nível do website?
7/23/2019 Templates Para Magento Pt Br Checkoutvendamais
http://slidepdf.com/reader/full/templates-para-magento-pt-br-checkoutvendamais 18/39
Guia do Designer Magento Checkout Venda Maiswww.checkoutexpressomagento.com.br
18
Imagina que a Dubloo tem diferentes visões de loja para diferentes idiomas, mas quer que todos tenham
a mesma aparência. Neste caso, é só atribuir o tema ao nível do website e ele será automaticamente
aplicado a todas as visões de loja (por isso, na figura acima, todos têm a mesma cor).
Digamos que a Dubloo queira uma aparência única para cada visão de loja. Neste caso, o tema deverá ser
atribuído ao nível da visão de loja desejada.
PASSO 1
No campo "Nome do template atual", informe o nome do pacote em que está o seu novo tema.
PASSO 2
No campo Padrão (default) no painel "Temas", informe o nome do novo tema. Os demais campos
(traduções, templates, skin e layout) podem ser deixados em branco e o Magento procurará no temadefault ou podem ser preenchidos com o nome do tema customizado.
Dubloo Inc.
Português EspanholInglês
Dubloo Inc.
Português EspanholInglês
7/23/2019 Templates Para Magento Pt Br Checkoutvendamais
http://slidepdf.com/reader/full/templates-para-magento-pt-br-checkoutvendamais 19/39
Guia do Designer Magento Checkout Venda Maiswww.checkoutexpressomagento.com.br
19
PASSO 3
Clique em Salvar e recarregue sua loja. Agora você vê um novo tema no seu frontend.
Pode ser necessário limpar a cache da sua loja para visualizá-la. Para isso, acesse Sistema > Configurações
> Gerenciamento de Cache, selecione todos os registros e clique em executar.
Vamos agora ver como Magento trata esses temas.
PASSO A PASSO 2: APLICANDO MÚLTIPLOS TEMAS
Magento dá flexibilidade para usar múltiplos 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 estão localizadas dentro de
app/design/frontend/<nomePacote>/<nomeTema> e os estilos estão em
skin/frontend/<nomePacote>/<nomeTema>? Os dois não precisam ter o mesmo nome!
Se você verificar a instalação padrão do Magento, verá a pasta do tema default em
app/code/design/frontend/default/default. Relativo a ela, há múltiplas 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 padrão. Os temas "blank", "iPhone" e "modern" também sãolistados, 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.
7/23/2019 Templates Para Magento Pt Br Checkoutvendamais
http://slidepdf.com/reader/full/templates-para-magento-pt-br-checkoutvendamais 20/39
Guia do Designer Magento Checkout Venda Maiswww.checkoutexpressomagento.com.br
20
Lembra do exemplo da loja de laptops com 2 lojas diferentes uma da outra?
Neste caso, você pode escolher "default" para seu layout e templates. Vamos assumir que você quer
deixar sua visão de loja "Português" usando a skin default. Como nós já definimos ela para todo o website,
você não precisa fazer nada para esta visão de loja.
Configurando o tema default no admin
Website
Visão de Loja
Loja
Meus Laptops
Português
Meus Laptops
Inglês
Laptops Baratos
Português
Laptops Baratos
Inglês
7/23/2019 Templates Para Magento Pt Br Checkoutvendamais
http://slidepdf.com/reader/full/templates-para-magento-pt-br-checkoutvendamais 21/39
Guia do Designer Magento Checkout Venda Maiswww.checkoutexpressomagento.com.br
21
Loja Magento Community com o tema default
Agora, digamos que você quer que na sua visão de loja "Inglês", os clientes vejam diferenças significativas
além do próprio idioma. Para fazer isso, você pode informar a variação de tema "blue" na sua visão de loja
"Inglês"
Perceba que nós ainda deixamos o campo Padrão como "default" para que em qualquer lugar que não se
queira a variação de tema "blue" o mecanimo de fallback busque a informação 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.
7/23/2019 Templates Para Magento Pt Br Checkoutvendamais
http://slidepdf.com/reader/full/templates-para-magento-pt-br-checkoutvendamais 22/39
Guia do Designer Magento Checkout Venda Maiswww.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 padrão e com variação de tema para Natal
Magento dá à sua loja a capacidade de gerenciar múltiplos temas exatamente para aquelas épocas em
que uma personalização extra é mais necessária. Neste caso, você não precisaria criar uma segunda visão
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.
7/23/2019 Templates Para Magento Pt Br Checkoutvendamais
http://slidepdf.com/reader/full/templates-para-magento-pt-br-checkoutvendamais 23/39
Guia do Designer Magento Checkout Venda Maiswww.checkoutexpressomagento.com.br
23
HIERARQUIA DE TEMAS
Quando você atribui múltiplos 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 amigável, Magento deve ser
capaz de localizar e carregar todos os arquivos de tema necessários para a loja rodar sem erros.
Por exemplo, se sua página de listagem de categorias chama um template chamado "view.phtmk", mas o
sistema não consegue encontrar o arquivo no tema respectivo, ele procurará no próximo 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 não encontrado, procura o arquivo em:
app/design/frontend/design_package/default
skin/frontend/design_package/default
2. Se não encontrado, procura o arquivo em:
app/design/frontend/base/default
skin/frontend/base/default
Por exemplo, digamos que você possui três temas na sua loja e cada um possui os seguintes arquivos.
base default variacao_tema
todos os arquivos necessários templates/3-col-layout.phtmltemplates/header.phtmlimages/logo.gif css/base.csscss/boxes.css
templates/3-col-layout.phtmlcss/base.css
Agora vamos asusmir que os 3 temas possuem a seguinte hierarquia:
Mais alta variacao_tema
default
Mais baixa 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 default variacao_tema
todos os arquivos necessáriostemplates/3-col-layout.phtmltemplates/header.phtml
templates/3-col-layout.phtml
7/23/2019 Templates Para Magento Pt Br Checkoutvendamais
http://slidepdf.com/reader/full/templates-para-magento-pt-br-checkoutvendamais 24/39
Guia do Designer Magento Checkout Venda Maiswww.checkoutexpressomagento.com.br
24
images/logo.gif css/base.csscss/boxes.css
css/base.css
Você pode perguntar: "OK, mas o que isso quer dizer?".
Bom, essa é a forma como você vê os arquivos, mas não como o Magento vê eles. Vamos ver como o
Magento enxerga a mesma estrutura de arquivos.
base default variacao_tema
todos os arquivos necessários
templates/header.phtmlimages/logo.gif
css/boxes.css
templates/3-col-layout.phtml
css/base.css
Você perceberá que o Magento ignora os arquivos redundantes nas hierarquias mais baixas e reconheceapenas aqueles na hierarquia mais alta. Isso acontece porque ele já encontrou o arquivo que procurava e
não precisa procurar mais através 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.
REGRAS PARA LEMBRAR
Crie todos os seus temas personalizados dentro do seu próprio design package. Crie os diretórios
app/design/frontend/seu_design_package/default e skin/frontend/seu_design_package/default
e coloque seu tema lá. Não 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 não se perder entre centenas de
arquivos quando precisar procurar alguma coisa.
EXCEÇÕES
Permitem que os administradores da loja especifiquem temas alternativos para user-agents específicos.
Ao invés de criar uma visão de loja separada para iPhone, por exemplo, exceções permitem que o
administrador ignore as configurações de design de uma visão de loja, reduzindo assim o número de
visões de loja que precisam ser gerenciadas.
Por exemplo, para usar o tema iPhone você pode adicionar uma exceção onde a coluna "Expressão Igual"
(Matched Expression) é "iPhone" e o valor é iphone (se este for o nome do tema que você quer usar)
7/23/2019 Templates Para Magento Pt Br Checkoutvendamais
http://slidepdf.com/reader/full/templates-para-magento-pt-br-checkoutvendamais 25/39
Guia do Designer Magento Checkout Venda Maiswww.checkoutexpressomagento.com.br
25
5. CUSTOMIZANDO TEMAS DO MAGENTO
Magento foi construído de forma totalmente modular permitindo uma flexibilidade quase que ilimitada.
Pela natureza do sistema, esta abordagem é refletida também na personalização dos temas da sua loja.
Neste capítulo, vamos explorar como exatamente customizar um tema no Magento.
CRIANDO O ESQUELETO DE DIRETÓRIOS PARA O SEU PACOTE/TEMA
Criar um novo pacote (design package) é bastante fácil. 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 padrão do Magento e nunca modifique os arquivos do diretório
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:
7/23/2019 Templates Para Magento Pt Br Checkoutvendamais
http://slidepdf.com/reader/full/templates-para-magento-pt-br-checkoutvendamais 26/39
Guia do Designer Magento Checkout Venda Maiswww.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 diretório para seu novo pacote e tema, você precisará aplicá-lo à
sua loja para que você veja as modificações enquanto trabalha.
DESATIVE A CACHE DO SISTEMA
Para customizar sua loja Magento, você deve primeiro desabilitar a cache de sistema através do admin em
Sistema > Gerenciar Cache. Selecione os checkboxes Layout, Blocks HTML output e Traduções, no
dropdown "Ações" selecione "Desabilitar" e clique em "Executar". Cada um desses três registros deverá
ficar com uma barra vermelha indicando "DESATIVADO". Isso assegura que você verá um reflexo fiel das
suas alterações 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 não ser que você saiba o que está fazendo.
ATRIBUA SEU PACOTE E TEMA PERSONALIZADOS À LOJA
Para ver seu novo tema funcionando enquanto você o constrói, atribua-o ao seu website usando o admin
do Magento. Vá em Sistema > Configurações > Template. No painel "Pacote", informe no campo "Nome
do template atual" o nome do seu pacote. No painel "Temas", informe no campo "Padrão" o valor
"default".
7/23/2019 Templates Para Magento Pt Br Checkoutvendamais
http://slidepdf.com/reader/full/templates-para-magento-pt-br-checkoutvendamais 27/39
Guia do Designer Magento Checkout Venda Maiswww.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 padrão disponíveis pelo pacote Base e terá os CSS que você está modificando. Se você
não 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. Não use o visibility do CSS
para ativar/desativar blocos e conteúdos 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 aparência da loja. Quando você se torna mais experiente, você
consegue começar do zero ou com seu framework favorito. Se você começar 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 página.
CUSTOMIZAR USANDO OS ARQUIVOS DE LAYOUT
Layouts são 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 conteúdo e bloco funcional do Magento.
INTRODUÇÃO AOS LAYOUTS
Layout é a ferramenta com a qual você consegue associar blocos de conteúdo a cada bloco estrutural que
você criar. Os arquivos de layout do Magento estão no formato de arquivos texto XML. Modificar o layout
permite você mover de lugar os blocos de uma página e associar templates aos blocos de conteúdo. De
fato, com o auxílio de apenas alguns arquivos de layout, você consegue modificar a aparência visual de
qualquer página da sua loja.
Como exemplo, veja abaixo a landing page de categoria do Magento:
7/23/2019 Templates Para Magento Pt Br Checkoutvendamais
http://slidepdf.com/reader/full/templates-para-magento-pt-br-checkoutvendamais 28/39
Guia do Designer Magento Checkout Venda Maiswww.checkoutexpressomagento.com.br
28
Agora olhe a mesma tela com os blocos estruturais e de conteúdo marcados.
Blocos estruturais e blocos de conteúdo mapeados em blocos estruturais no Magento
7/23/2019 Templates Para Magento Pt Br Checkoutvendamais
http://slidepdf.com/reader/full/templates-para-magento-pt-br-checkoutvendamais 29/39
Guia do Designer Magento Checkout Venda Maiswww.checkoutexpressomagento.com.br
29
Conceitualmente, as caixas no diagrama da esquerda são os blocos estruturais. Eles são blocos pai dos
blocos de conteúdo e servem para posicionar os blocos de conteúdo dentro da página da loja, como na
imagem da direita.
Esses blocos estruturais existem na forma de "área do cabeçalho", "área da coluna esquerda", "área da
coluna direita", etc, e servem para criar a estrutura visual da página.
Neste capítulo, vamos trabalhar com os blocos estruturais padrão do Magento. Os blocos estruturais são
controlados pelo módulo Page do Magento e são definidos no arquivo
app/design/frontend/default/layout/page.xml. Os respectivos templates padrão são definidos em
app/design/frontend/base/default/template/page/directory.
Um bloco de conteúdo é um bloco individual que forma um bloco estrutural. No contexto da loja, ele é o
verdadeiro conteúdo da página. Eles são representações de cada funcionalidade exibida na página (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 conteúdo são 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 são na verdade construídos usando pequenos conjuntos de tags
XML fáceis 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 são 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 padrão (default) e atualizações de layout feitas com tags XML. Com
esses comandos, você pode modificar ou associar blocos de conteúdo a blocos estruturais e também
controlar as funcionalidades da loja.
Cada módulo Magento tem seu próprio arquivo de layout. Por exemplo, "catalog.xml" é um arquivo de
layout para o módulo de catálogo e "customer.xml" para o módulo de clientes.
Cada arquivo ainda é separado por "handles". Os "handles" disponíveis são pré-definidos pelo core do
Magento e por qualquer extensão ativa na sua loja. Na maioria das vezes, o handle corresponde a um tipo
de página na sua loja Magento, como <catalog_category_default> e <catalog_product_view>, mas há
handles que são aplicados a todas as páginas, como o handle <default>, e alguns que são aplicados em
páginas conforme status específicos, como <customer_logged_in> e <customer_logged_out>.
7/23/2019 Templates Para Magento Pt Br Checkoutvendamais
http://slidepdf.com/reader/full/templates-para-magento-pt-br-checkoutvendamais 30/39
Guia do Designer Magento Checkout Venda Maiswww.checkoutexpressomagento.com.br
30
Um handle pode ocorrer em múltiplos arquivos de layout, e blocos podem ser atribuídos à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 atualizações
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 então faz o parse dos handles
específicos de página, de novo procurando em todos os arquivos de layout por aquele handle, e finaliza
construindo a página.
O sistema de renderização do Magento é construído desta forma para permitir inclusões e remoções de
módulos de uma forma fácil e sem afetar outros módulos do sistema. Isso significa que você pode incluir,
remover e mover de lugar a maioria das funcionalidades do Magento simplesmente incluindo, removendo
e movendo declarações de bloco nos arquivos de layout.
7/23/2019 Templates Para Magento Pt Br Checkoutvendamais
http://slidepdf.com/reader/full/templates-para-magento-pt-br-checkoutvendamais 31/39
Guia do Designer Magento Checkout Venda Maiswww.checkoutexpressomagento.com.br
31
ANATOMIA DO ARQUIVO DE LAYOUT DO MAGENTO
Layouts contém um pequeno conjunto de tags XML que agem como instruções detalhadas para a
aplicação sobre como construir a página, com o que construí-la e o comportamento de cada bloco. Aqui
estão algumas propriedades de comportamento de cada tag XML de layout.
HANDLES
Handle é um identificador pelo qual a aplicação determina o que fazer com as atualizações aninhadas à
ela.
Se o nome do handle é <default>, então a aplicação sabe que as atualizações aninhadas devem ser
carregadas em quase todas as páginas da loja antes de carregar layouts específicos de página ("quase
todas" porque algumas páginas excepcionais como popup de imagem do produto não carregam o layout
no handle <default>).
Se o Magento encontra outros handles que não o <default>, ele vai associar suas atualizações aninhadas à
página especificada pelo handle. Por exemplo, <catalog_product_view> contém atualizações de layout
para a página Product View, enquanto que <catalog_product_compare_index> contém as atualizações
para a página Compare Product. Handles são identificadores que um designer, sem grande conhecimento
de programação Magento, nunca deve modificar.
<BLOCK>
Magento determina o comportamento e a representação visual de cada bloco da página através da tag
<block>. Nós já mencionamos os dois tipos de blocos que o Magento usa: estrutural e de conteúdo. A
melhor forma de distinguir entre um e outro é examinando o comportamento associado a cada umatravés dos atributos da tag.
Um bloco estrutural geralmente contém o atributo "as" através do qual a aplicação pode se comunicar
com a área designada (usando o método getChildHtml) no template. Você notará várias ocorrências do
atributo "as" no layout padrão (default), porque pela sua natureza o layout default é aquele que constrói
a base sobre a qual os layouts específicos de página realizam adições. Por exemplo, no layout default, há
blocos estruturais como "left", "right", "content" e "footer" sendo incluídos. Embora esses blocos existam
em atualizações normais de layout, por que não configurar os blocos estruturais recorrentes no layout
default primeiramente, e então começar a adicionar conteúdos a cada página?
Os atributos disponíveis para <block> são:
type - É o identificador da classe do módulo que define a funcionalidade do bloco. Esse atributo
não deve ser modificado.
name - É o nome pelo qual outros blocos podem referenciar o bloco em questão.
before e after - São duas formas de posicionar o bloco de conteúdo dentro de um bloco
estrutural. before="-" e after="-" são 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 questão. Por
exemplo, se esse atributo for "catalog/category/view.phtml", a aplicação carregará o arquivo de
template "app/design/frontend/template/catalog/category/view.phtml".
7/23/2019 Templates Para Magento Pt Br Checkoutvendamais
http://slidepdf.com/reader/full/templates-para-magento-pt-br-checkoutvendamais 32/39
Guia do Designer Magento Checkout Venda Maiswww.checkoutexpressomagento.com.br
32
action - <action> é usado para controlar funcionalidades da loja como carregar ou "descarregar"
um JavaScript. Você pode aprender sobre as diferentes ações disponíveis examinado os arquivos
de layout já existentes.
as - É o nome pelo qual o template chama o bloco em questão. Quando você vê o método 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 referência a outro bloco. Ao fazer referência a um outro bloco, as atualizações dentro
de <reference> serão aplicadas ao <block> em que a tag está.
Para fazer referência, você deve definir o bloco alvo usando o atributo "name". Este atributo referencia a
tag "name" do <block> que se quer fazer referência. 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 relação a XML é que quando uma tag abre, eladeve ou ser seguida por uma tag de fechamento (<xml_tag></xml_tag>) ou "auto-fechada" (<xml_tag />)
exatamente como necessário para tags de arquivos xHTML.
7/23/2019 Templates Para Magento Pt Br Checkoutvendamais
http://slidepdf.com/reader/full/templates-para-magento-pt-br-checkoutvendamais 33/39
Guia do Designer Magento Checkout Venda Maiswww.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 são
salvos por módulo e podem assim ser facilmente localizados com a ajuda do recurso "Exibir Caminho das
Telas".
Para habilitar este recurso, vá em Sistema > Configurações > Avançado > 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 informações, você também
pode ativar o "Exibir Nomes dos Blocos" (Add Block Names to Hint).
Agora que você possui este recurso ativado, recarregue a página 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
7/23/2019 Templates Para Magento Pt Br Checkoutvendamais
http://slidepdf.com/reader/full/templates-para-magento-pt-br-checkoutvendamais 34/39
Guia do Designer Magento Checkout Venda Maiswww.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 módulo) 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
específicos de página. Cada área do layout por página é claramente marcada com comentários que
refletem seu uso, mas a aplicação sozinha reconhece a separação 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 conteúdos o Magento
exibe em um tema modificando apenas alguns arquivos e incluindo apenas os arquivos modificados no
seu tema personalizado, graças ao mecanismo de fallback já explicado. Seu tema personalizado precisa
conter apenas os arquivos, ou na verdade apenas os blocos que são diferentes do tema base.
Você pode usar o método de modificar e salvar arquivos para todas as versões do Magento e essa é uma
maneira perfeitamente aceitável de customizar um tema. Uma abordagem mais elegante e fácil 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ê não precisa copiar todos os arquivos do
tema e apagar ou comentar o código de cada um. Você pode deixar que o tema base contenha todos os
blocos padrão e no seu tema você apenas desabilita os blocos que você não quer. Na lógica do Magento,
depois que ele carrega todos os layouts XML e as atualizações 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 atualizações 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 mudanças globais.
<?xml version="1.0" ?><layout>
<default><! — - Suas sobrescritas de bloco vão 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>
7/23/2019 Templates Para Magento Pt Br Checkoutvendamais
http://slidepdf.com/reader/full/templates-para-magento-pt-br-checkoutvendamais 35/39
Guia do Designer Magento Checkout Venda Maiswww.checkoutexpressomagento.com.br
35
Isso irá variar dependendo do tema, por isso é apenas uma referência. Use a lista nas seções anteriores
como um guia, encontre o arquivo XML na pasta de layout do seu tema (ou a pasta de layout do tema
base) que contém 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 conteúdo do escopo default, você pode preferir removê-los apenas de um bloco
estrutural específico - como "left" ou "right". Mas isso já lhe dá uma idéia de como funciona.
Você também pode usar o local.xml para atualizar handles específicos. Por exemplo, se você quisesse
atribuir a página padrão do template para as páginas de categoria ao template 2column-left, você poderia
usar os handles que controlam a renderização das páginas de catálogo e incluir um código 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 invés de copiar arquivos e deletar código. Com esta
mesma abordagem, você também pode adicionar blocos, mudar onde eles aparecem, alterar um pouco
do seu comportamento, etc, apenas sobrescrevendo o comportamento padrão 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 presença ou ausência de cada bloco de
conteúdo em um tema. O que , especificamente, é renderizado dentro do bloco é controlado pelos
arquivos de template.
A maioria dos templates não contém qualquer lógica sobre se ele será ou não 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 são arquivos PHTML que contém código 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 conteúdo de um bloco específico, você pode modificar o arquivo de template sedesejar. 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 recomendação geral, ao invés de editar os arquivos de template do Magento, é uma boa prática
você copiar o arquivo que você quer alterar para o seu tema com um nome ligeiramente diferente e
editar o novo arquivo renomeado. E então, você atualiza o layout para que aquele bloco use o novo
template. Isso preserva o template original caso ele seja usado em múltiplos locais e assegura que,
quando o Magento for atualizado, qualquer mudança no arquivo de template original não impactará seus
arquivos de template modificados sem que você saiba.
7/23/2019 Templates Para Magento Pt Br Checkoutvendamais
http://slidepdf.com/reader/full/templates-para-magento-pt-br-checkoutvendamais 36/39
Guia do Designer Magento Checkout Venda Maiswww.checkoutexpressomagento.com.br
36
Voltando ao exemplo anterior em que usamos um arquivo local.xml para sobrescrever declarações de
layout, se você quisesse que suas páginas de categoria tivessem um template único, você poderia criar um
novo template de página em app/design/frontend/<seu_pacote>/default/template/page/ chamado
"2columns-custom.phtml". Nele talvez você criasse uma versão modificada do template two-columns do
Magento com uma barra lateral onde você pode incluir novos blocos estruturais para promoções e
produtos relacionados que apareceriam apenas nas páginas de categoria.
Neste caso, seu arquivo local.xml na pasta app/design/frontend/<seu_pacote>/default/layout poderia
incluir o seguinte código que diz ao Magento para renderizar aquelas páginas 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 RÁPIDO PARA CRIAR UM TEMA DO ZERO
Muitos temas para Magento são construídos da forma descrita no capítulo anterior - modificando
arquivos e sobrescrevendo blocos que são definidos no pacote base do Magento.
É possível, no entanto, criar um novo tema do zero e não usar os blocos estruturais e de conteúdo padrãodo Magento - você não está limitado ao cabeçalho, rodapé, esquerda, direita, e conteúdo como
contêineres estruturais se você não 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 capítulo fornece um pouco de orientação 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 através do admin em
Sistema > Gerenciar Cache. Selecione os checkboxes Layout, Blocks HTML output e Traduções, no
dropdown "Ações" selecione "Desabilitar" e clique em "Executar". Cada um desses três registros deverá
ficar com uma barra vermelha indicando "DESATIVADO". Isso assegura que você verá um reflexo fiel das
suas alterações 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 não ser que você saiba o que está fazendo.
7/23/2019 Templates Para Magento Pt Br Checkoutvendamais
http://slidepdf.com/reader/full/templates-para-magento-pt-br-checkoutvendamais 37/39
Guia do Designer Magento Checkout Venda Maiswww.checkoutexpressomagento.com.br
37
DOIS: DETERMINE TODAS AS POSSIBILIDADES DE ESTRUTURAS PARA A SUA LOJA
Antes até mesmo de começar a criar as marcações para a loja, você primeiro precisa perguntar a si
mesmo que tipo de estrutura de página você gostaria de ter para cada página da sua loja. Faça 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
Páginas de cliente terão uma estrutura de 2 colunas com uma coluna à esquerda
TEMPLATE ESQUELETO
Uma vez que sua lista esteja completa, crie as marcações 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 propósito: tudo que ele realmente contém (fora os
elementos <head>) são marcações de apresentação que servem para posicionar cada bloco estrutural deacordo com as áreas marcadas.
Exemplo de template esqueleto:
Ao analisar o template esqueleto acima, você notará um método PHP chamado "<?=$this-
>getChildHtml()?>" dentro de cada marcação de apresentação. Esse é o modo pelo qual o Magento
carrega blocos estruturais nos templates esqueleto para então posicionar todos os conteúdos dos blocos
estruturais dentro da página da loja.
Cada getChildHtml chama um nome como em <div class="header"><?=$this-
>getChildHtml('header')?></div>, e esses nomes são a forma pela qual cada bloco estrutural é
identificado no layout. Templates esqueleto são atribuídos à loja através do layout.
TRÊS: RECORTE SEU XHTML DE ACORDO COM A FUNCIONALIDADE
Assim que você criar os templates esqueleto, você precisará criar templates para cada bloco de conteúdo.
7/23/2019 Templates Para Magento Pt Br Checkoutvendamais
http://slidepdf.com/reader/full/templates-para-magento-pt-br-checkoutvendamais 38/39
Guia do Designer Magento Checkout Venda Maiswww.checkoutexpressomagento.com.br
38
MAGENTO GOSTA DE TEMPLATES COM SIGNIFICADO
Você precisará recortar as marcações xHTML criadas para a sua página e fornercer os respectivos
marcadores para todas as funcionalidades da página. Por exemplo, se você tem uma área para o mini-
cart, a marcação para esta área sozinha se tornará seu próprio arquivo de template. O mesmo para as
áreas de tags de produto, assinatura de newsletter, etc. Todas essas funcionalidades já vêm com o
Magento, assim você pode consultar as tags de template já existentes para montar a lógica das suas
marcações.
ONDE SALVAR OS TEMPLATES
A marcação completa para qualquer página na sua loja é introduzida por um array de templates cada um
representando uma funcionalidade de um módulo. Para saber quais templates estão sendo chamados em
uma página que você deseja modificar, você pode ativar o recurso de "Exibir Caminhos nas telas"
(Template Path hints). Para tanto:
No Admin, vá em Sistema > Configurações > Avançado > Desenvolvedor.
No topo da coluna da esquerda, seleciona a sua loja no dropdown
Depois da página recarregar, clique no painel "Debugar".
Aqui você pode ativar o recurso "Exibir Caminho das Telas" (Template Path Hints). Se você quer
ainda mais informações, você também pode ativar o "Exibir Nomes dos Blocos" (Add Block
Names to Hint).
Volte para a loja, recarregue a página e você verá o caminho para todos os arquivos de template
nos seus respectivos blocos. Para modificar a marcação, 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 marcações, você provavelmente desejará mover os templates pela página para ver
o progresso do seu trabalho.
LAYOUT DEFAULT VERSUS ATUALIZAÇÕES DE LAYOUT
Há dois tipos de layout - default e atualizações. O layout default (page.xml) é o layout que por padrão é
aplicado a praticamente todas as páginas da loja. Todos os outros arquivos de layout são Atualizações de
Layout que simplesmente atualizam o layout padrão para cada página.
Vamos ver o exemplo do template esqueleto:
No layout default, você definiu três colunas, o que significa que por padrão todas as páginas da loja terão
uma estrutura de página de três colunas. Mas não é essa estrutura que você quer para a página de
produto. Para ela, você quer uma estrutura de duas colunas com uma coluna à direita.
Você precisará então deixar o layout padrão 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
página de produto ao invés das três colunas padrão. Isso é chamado de processo de atualização do layout.
Exemplo para o template esqueleto:
7/23/2019 Templates Para Magento Pt Br Checkoutvendamais
http://slidepdf.com/reader/full/templates-para-magento-pt-br-checkoutvendamais 39/39
39
<reference name=“root”>
<action method=“setTemplate”><template>page/2columns-right.phtml</template></action>
</reference>
Vamos ver outro exemplo:
Digamos que você quer um formulário de assinatura de newsletter na sua coluna da direita, mas naspáginas do cliente você quer excluí-lo. Neste caso, você pode não mexer no layout default e abrir o
customer.xml, no qual você colocará um comando que desabilita o bloco de conteúdo da newsletter,
excluindo essa funcionalidade das páginas de cliente.
7. OUTROS RECURSOS
O Magento oferece diversos recursos para ajudá-lo a customizar sua loja e estimula o uso e a participação
nos seguintes:
Artigos da base de conhecimento
Webseminários
Fórum oficial para o Brasil
O Magento também convida você a compartilhar seus designs, discutir a documentação e enviar todas as
suas perguntas para os fóruns sobre design e template da comunidade.
O CHECKOUT VENDA MAIS
O Checkout Venda Mais é o jeito MAIS FÁCIL de vender mais no Magento. Ele reduz o checkout do
Magento para 1 único passo, é compatível com os principais módulos de pagamentos e vem preparado
para o Brasil.
Veja demonstração em http://www.checkoutexpressomagento.com.br