templates para magento pt br checkoutvendamais

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



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




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




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.










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




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

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




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.




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.


Tema

Default

Tema

Default

Variação

Tema 1

Variação

Tema 2

Tema

Default


Tema

Default

Tema

Default

VariaçãoTema 1

Variação

Tema 2

Tema

Default




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




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




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.




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




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.




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




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


<MAGENTO_BASE_DIR>

+ app

+ code

+ design+ frontend

+ base

+ default

+ dubloo

+ default

+ layout

+ template





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?




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




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.




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




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.




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.




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.


todos os arquivos necessáriostemplates/3-col-layout.phtmltemplates/header.phtml

templates/3-col-layout.phtml




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.


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)




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:




26


<MAGENTO_BASE_DIR>

+ app

+ code

+ design+ frontend

+ base

+ default

+ dubloo

+ default

+ layout

+ template


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




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:




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




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




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.




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




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.




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

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" /> <remove name="right.permanent.callout" /> <remove name="catalog.compare.sidebar" /> <remove name="paypal.partner.right.logo" /> <remove name="cart_sidebar" /> <remove name="left.reports.product.viewed" /> <remove name="right.reports.product.viewed" /> <remove name="right.reports.product.compared" /> </default>




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>


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




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>


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




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.




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:



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

http://www.magentocommerce.com/knowledge-base


http://www.magentocommerce.com/media/webinars


http://www.magentocommerce.com/boards/viewforum/39/


http://www.checkoutexpressomagento.com.br/







templates para magento pt br checkoutvendamais

Documents