Temas em Magento

© 2013 – Gugliotti Consulting
T E M A S E M M A G E N T O
C U R S O E M V Í D E O - A U L A S
M Ó D U L O 1 – T E O R I A
Cursos de Magento

Temas em Magento - Teoria
• ConceituaçãoAula 1
• ConfiguraçãoAula 2
• Skin / Locale / LayoutAula 3
• Layout / TemplateAula 4

André Gugliotti
andre@gugliotti.com.br
Consultor em planejamento e estratégia de
lojas virtuais na Gugliotti Consulting
Engenheiro Comercial Magento, pela
eCommerce Academy, em Paris
Google Adwords Professional, em Search
Advertising
Reconhecido como Magento Evangelist no
Brasil, atuando desde 2008 na plataforma
Organizador do Bargento Brasil, série de
eventos sobre Magento

A U L A 1 – C O N C E I T U A Ç Ã O

Frontend e Backend

Modularidade do Magento
CORE
Funções
nativas
Módulos de
envio
Módulos de
Pagamento
Newsletter
Catálogo de
Produtos
Impostos Outras funções
COMMUNITY
Correios
Outros
módulos de
pagamento
Integração com
Cielo/Redecard
Boleto Bancário
MercadoPago
Módulos de
Imagens
Lightbox
Superzoom
Outros
módulos
Marketing
Sliders
Afiliados
Seu módulo

Modularidade do Magento
Magento Design Guide

• manipulação dos dados e conteúdoModel
• apresenta os dados no formato e
layout desejadosView
• recebe as requisições do usuário e
organiza os recursos necessários
para processá-las
Controller
Arquitetura MVC

meu-tema/default meu-tema/variacao-1
Pacotes de Design

Pacote
Base
Tema
Default
Pacote 1
Tema
Default
Variação
de Tema 1
Variação
de Tema 2
Pacote 2
Tema
Default
Pacote 3
Tema
Default
Variação
de Tema 1
Pacote 4
Tema
Default
Variação
de Tema 1
Variação
de Tema 2
Pacotes de Design

tema Base/Default – tema padrão do Magento,
contendo todo os arquivos necessários para o
funcionamento da loja
tema Package 1/Default – tema que contém os
arquivos necessários ao funcionamento do tema
personalizado
temas Package 1/Variations – tema que contém os
arquivos para o funcionamento dos temas sazonais
Pacotes de Design

Hierarquia de Temas

os arquivos são procurados na ordem inversa da
importância dos temas
primeiro, na variação mais específica de um Design
Package
depois, na variação default do Design Package
e por último, todos os arquivos não encontrados até
aqui serão carregados a partir do tema Padrão
Hierarquia de Temas

catálogo
visão de loja
loja
website
servidor instalação
Magento
siteA.com
Loja de
Sapatos
Populares
português
categorias e
produtos
inglês
categorias e
produtos
Loja de
Sapatos
Finos
português
categorias e
produtos
inglês
categorias e
produtos
siteB.com
Loja de
Celulares
português
categorias e
produtos
Múltiplos sites e múltiplas lojas

A U L A 2 – C O N F I G U R A Ç Õ E S
Temas em Magento

Hierarquia das configurações
GLOBAL = é aplicada para toda a
instalação; conhecida como Todas
as Lojas
WEBSITE = configuração é aplicada
para aquele site específico (e
portanto, para as lojas dentro dele)
STORE/STORE VIEW
Em Store, não se aplicam configurações
Configurações são aplicadas na Store
View (Visão de Loja)

Cache e Índices
Excesso de arquivos na
construção das páginas
Excesso de consultas ao
banco de dados
Cache: prepara as
páginas previamente
Índice: concentra os
dados em uma tabela

utilize o Template Path Hints, ferramenta que exibe
no frontend o caminho de cada um dos blocos
utilizados na construção de uma página
Sistema -> Configurações -> Desenvolvedor
ATENÇÃO! Essa função só está disponível quando as
configurações são definidas em nível de visão de loja
Template Path Hints

base/default
• arquivos originais do
Magento
• não devem ser
alterados
• são usados como base
para o funcionamento
do sistema
• 467 arquivos, em 237
pastas
meu-tema/default
• arquivos que farão
parte do tema
personalizado
• só serão criados
quando houver
necessidade de
modificação
• não são substituídos
em uma atualização
Temas

Layout
• arquivos XML
• responsáveis
pela exibição e
posição dos
blocos da página
• estão
relacionados à
área de atuação
Template
• arquivos
PHTML
• responsáveis
pelo corpo do
tema, pela
construção de
cada um dos
blocos da página
• arquivos
pequenos, muito
segmentados
Skin
• arquivos CSS e
Javascript +
imagens
• dão o
acabamento nos
blocos da página
• pode-se mudar
um tema apenas
com CSS
app/design/frontend skin/frontend
Estrutura dos temas

• arquivos XML
• são os responsáveis pelo definição e
posicionamento dos blocos, estruturais e de
conteúdo
layout
• arquivos PHTML
• são os blocos de código PHP e HTML
responsáveis pelo corpo das páginas e inclusão
de conteúdo dinâmico
template
• arquivos CSV
• arquivos com a tradução dos termos, do inglês
para o idioma desejado
locale
Pastas

• arquivos CSS
• compreende os estilos e classes CSScss
• imagens
• podem ser organizadas em sub-
pastas
images
• arquivos js
• compreende as bibliotecas de scripts
e rotinas de javascript
js
Pastas

Habilitando os temas

A U L A 3 – S K I N / L O C A L E / L A Y O U T
Temas em Magento

identifique todos os blocos que estão sendo
utilizados na home do Magento
em seguida, atribua um dono a cada um dos blocos
listados acima
CONCEITO CHAVE: PROPRIETÁRIO DO
BLOCO ESTÁTICO
Exercício 1

CSS
• arquivo styles.css
• diferentes arquivos CSS
JS
• bibliotecas
• funções específicas
• minificação do CSS e JS
Trabalhando o skin

a partir do tema Base/Default, sem mexer em nada
além de classes CSS, altere o visual conforme as
indicações do professor
CONCEITO CHAVE: CÓPIA DOS ARQUIVOS
CSS, JS E IMAGENS
Exercício 2

/app/locale
•vários
arquivos
meu-
tema/locale
•translate.csv
Trabalhando o locale

modificar textos especificamente no tema aplicado
na loja virtual, a partir do translate.csv
CONCEITO CHAVE: TRADUÇÕES
EXCLUSIVAS DO TEMA
Exercício 3

Blocos

estruturais
• blocos que compõem
a página, definindo
as posições onde
serão inseridos os
conteúdos
• definidos no
page.xml
conteúdo
• blocos que serão
responsáveis pelo
posicionamento e
inserção do conteúdo
nas páginas
• são definidos nos
XML conforme os
seus grupos de
utilização
Blocos

<default>: valerão para todas as páginas
<sua_tag>: valerão apenas para a área desejada
<reference>
<block>
<action></action>
</block>
</reference>
Tags XML

<reference name="left">
<block type="core/template" name="left.permanent.callout"
template="callouts/left_col.phtml“>
<action
method="setImgSrc"><src>images/media/col_left_callout.jpg<
/src></action>
<action method="setImgAlt" translate="alt"
module="catalog"><alt>Our customer service is available 24/7.
Call us at (555) 555-0123.</alt></action>
<action
method="setLinkUrl"><url>checkout/cart</url></action>
</block>
</reference>
Tags XML

<action
method="setImgSrc"><src>images/media/col_left_callout.jpg<
/src></action>
<action
</block>
</reference>
<reference> - indica a qual o
elemento do layout as instruções
estarão vinculadas
name=“left” - refere-se à coluna esquerda
Tags XML

<action
method="setImgSrc"><src>images/media/col_left_callout.jpg
</src></action>
<action
</block>
</reference>
<block> - indica que é um bloco de
conteúdo
type=“core/template” – sinaliza que é um
bloco de template
name=“left.permanent.callout” – nome do
bloco de template
template=“callouts/left_col.phtml” – indica
qual é o arquivo do template a ser utilizado
Tags XML

<action
method="setImgSrc"><src>images/media/col_left_callout.jpg
</src></action>
<action
</block>
</reference>
<action> - indica ações a serem executadas
method=“stImgSrc” – indica que deverá definir uma
imagem e sua fonte
<src> - informa onde está localizado o arquivo da imagem,
dentro do skin escolhido no painel de controle
Tags XML

A U L A 4 – L A Y O U T / T E M P L A T E / C M S
Temas em Magento

em todas as páginas, passar a caixa “Boletim
Informativo” para a direita e desligar a caixa
“Comparar Produtos”
alterar a ordem dos itens no menu superior
acrescentar a caixa “Boletim Informativo”, na
coluna direita, da página “Contato”
CONCEITO CHAVE: UTILIZAÇÃO DO XML
PARA MUDANÇA, INSERÇÃO E EXCLUSÃO
DE BLOCOS
Exercício 4

sem abrir os arquivos XML, identifique todos os
arquivos de layout disponíveis no tema Base do
Magento e tente atribuir possíveis elementos de cada
um deles
CONCEITO CHAVE: PROPRIETÁRIO DO
BLOCO ESTÁTICO
Exercício 5

<div class="block block-banner">
<div class="block-content">
<?php if(strtolower(substr($this->getLinkUrl(),0,4))==='http'): ?>
<a href="<?php echo $this->getLinkUrl() ?>" title="<?php echo $this-
>__($this->getImgAlt()) ?>">
<?php elseif($this->getLinkUrl()): ?>
<a href="<?php echo $this->getUrl($this->getLinkUrl()) ?>" title="<?php echo
$this->__($this->getImgAlt()) ?>">
<?php endif; ?>
<img src="<?php echo $this->getSkinUrl($this->getImgSrc()) ?>"<?php
if(!$this->getLinkUrl()): ?> title="<?php echo $this->__($this-
>getImgAlt()) ?>"<?php endif; ?> alt="<?php echo $this->__($this-
>getImgAlt()) ?>" /><?php if($this->getLinkUrl()): ?>
</a>
<?php endif ?>
</div>
</div>
PHTML

<div id="messages_product_view">
<?php echo $this->getMessagesBlock()->getGroupedHtml() ?>
</div>
<div class="page-title">
<h1><?php echo Mage::helper('contacts')->__('Contact Us') ?></h1>
</div>
PHTML

<li class="wide">
<label for="comment" class="required"><em>*</em><?php echo
Mage::helper('contacts')->__('Comment') ?></label>
<div class="input-box">
<textarea name="comment" id="comment" title="<?php echo
Mage::helper('contacts')->__('Comment') ?>" class="required-entry
input-text" cols="5" rows="3"></textarea>
</div>
</li>
PHTML

Conforme as instruções do professor:
crie um menu adicional no rodapé
modifique o carrinho de compras
crie um menu lateral
CONCEITO CHAVE: DEFINIÇÃO DA
NECESSIDADE DE MODIFICAÇÃO E
CONSTRUÇÃO DE NOVOS BLOCOS
Exercício 6

CMS – Content Management System
páginas
blocos estáticos
widgets
semelhante aos arquivos do tema: conteúdo HTML +
atualização via XML
regra de ouro: tudo que puder ser atualizado pelo
cliente, deve utilizar bloco estático
CMS

crie um bloco estático no CMS
adicione o bloco via XML
adicione o bloco via PHP
adicione o bloco via widget
CONCEITO CHAVE: UTILIZANDO BLOCOS
ESTÁTICOS PARA FACILITAR A VIDA DO
USUÁRIO
Exercício 7

manter o tema
padrão intacto
criar apenas os
arquivos
necessários
procurar sempre
seguir a ordem de
trabalho: CSS ->
XML -> PHTML
manter os grupos
de informações
XML, nos
arquivos originais
manter a
separação MVC
use o Firebug para
verificar os estilos
CSS
Boas práticas

C U R S O E M V Í D E O - A U L A S – T E M 1
A P O S T I L A D E S U P O R T E
G U G L I O T T I C O N S U L T I N G
C U R S O S D E M A G E N T O
W W W . C U R S O S D E M A G E N T O . C O M . B R
© 2 0 1 3 – T O D O S O S D I R E I T O S R E S E R V A D O S
Temas em Magento

Temas em Magento

Mais conteúdo relacionado

Semelhante a Temas em Magento

Mais de Andre Gugliotti

Temas em Magento