© 2013 – Gugliotti Consulting
TEMAS EM MAGENTO
CURSO EM VÍDEO-AULAS
MÓDULO 1 – TEORIA
Cursos de Magento
© 2013 – Gugliotti Consulting
Temas em Magento - Teoria
• ConceituaçãoAula 1
• ConfiguraçãoAula 2
• Skin / Locale / LayoutAula 3
• Layout / TemplateAula 4
© 2013 – Gugliotti Consulting
Temas em Magento - Teoria
André [email protected]
� Consultor em planejamento e estratégia de lojas virtuais na Gugliotti Consulting
� Engenheiro Comercial Magento, pela eCommerce Academy, em Paris
� Google Adwords Professional, em SearchAdvertising
� Reconhecido como Magento Evangelist no Brasil, atuando desde 2008 na plataforma
� Organizador do Bargento Brasil, série de eventos sobre Magento
© 2013 – Gugliotti Consulting
AULA 1 – CONCEITUAÇÃO
Temas em Magento - Teoria
© 2013 – Gugliotti Consulting
Frontend e Backend
© 2013 – Gugliotti Consulting
© 2013 – Gugliotti Consulting
© 2013 – Gugliotti Consulting
© 2013 – Gugliotti Consulting
© 2013 – Gugliotti Consulting
© 2013 – Gugliotti Consulting
© 2013 – Gugliotti Consulting
© 2013 – Gugliotti Consulting
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
CorreiosOutros
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
© 2013 – Gugliotti Consulting
Modularidade do Magento
Magento Design Guide
© 2013 – Gugliotti Consulting
• 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
© 2013 – Gugliotti Consulting
© 2013 – Gugliotti Consulting
meu-tema/default meu-tema/variacao-1
Pacotes de Design
Magento Design Guide
© 2013 – Gugliotti Consulting
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
© 2013 – Gugliotti Consulting
� 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
© 2013 – Gugliotti Consulting
Magento Design Guide
Hierarquia de Temas
© 2013 – Gugliotti Consulting
� 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
© 2013 – Gugliotti Consulting
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
© 2013 – Gugliotti Consulting
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
© 2013 – Gugliotti Consulting
AULA 2 – CONFIGURAÇÕES
Temas em Magento
© 2013 – Gugliotti Consulting
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 StoreView (Visão de Loja)
© 2013 – Gugliotti Consulting
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
© 2013 – Gugliotti Consulting
� 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
© 2013 – Gugliotti Consulting
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
© 2013 – Gugliotti Consulting
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
© 2013 – Gugliotti Consulting
• 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
© 2013 – Gugliotti Consulting
• 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
© 2013 – Gugliotti Consulting
Habilitando os temas
© 2013 – Gugliotti Consulting
AULA 3 – SKIN/LOCALE/LAYOUT
Temas em Magento
© 2013 – Gugliotti Consulting
Modularidade do Magento
Magento Design Guide
© 2013 – Gugliotti Consulting
� 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
© 2013 – Gugliotti Consulting
CSS• arquivo styles.css• diferentes arquivos CSS
JS• bibliotecas• funções específicas
• minificação do CSS e JS
Trabalhando o skin
© 2013 – Gugliotti Consulting
� 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
© 2013 – Gugliotti Consulting
/app/locale
• vários arquivos
meu-tema/locale
• translate.csv
Trabalhando o locale
© 2013 – Gugliotti Consulting
� modificar textos especificamente no tema aplicado na loja virtual, a partir do translate.csv
� CONCEITO CHAVE: TRADUÇÕES EXCLUSIVAS DO TEMA
Exercício 3
© 2013 – Gugliotti Consulting
Blocos
Magento Design Guide
© 2013 – Gugliotti Consulting
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
© 2013 – Gugliotti Consulting
� <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
© 2013 – Gugliotti Consulting
<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
© 2013 – Gugliotti Consulting
<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>
<reference> - indica a qual o elemento do layout as instruções
estarão vinculadas
name=“left” - refere-se à coluna esquerda
Tags XML
© 2013 – Gugliotti Consulting
<reference name="left"><block type="core/template" name="left.permanent.callout" template="callouts/left_col.phtml“><actionmethod="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><actionmethod="setLinkUrl"><url>checkout/cart</url></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
© 2013 – Gugliotti Consulting
<reference name="left"><block type="core/template" name="left.permanent.callout" template="callouts/left_col.phtml“><actionmethod="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><actionmethod="setLinkUrl"><url>checkout/cart</url></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
© 2013 – Gugliotti Consulting
<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
© 2013 – Gugliotti Consulting
AULA 4 – LAYOUT/TEMPLATE/CMS
Temas em Magento
© 2013 – Gugliotti Consulting
� 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
© 2013 – Gugliotti Consulting
� 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
© 2013 – Gugliotti Consulting
Blocos
Magento Design Guide
© 2013 – Gugliotti Consulting
<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
© 2013 – Gugliotti Consulting
<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
© 2013 – Gugliotti Consulting
<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
© 2013 – Gugliotti Consulting
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
© 2013 – Gugliotti Consulting
� 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
© 2013 – Gugliotti Consulting
� 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
© 2013 – Gugliotti Consulting
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
© 2013 – Gugliotti Consulting
C U R S O E M V Í D E O - A U L A S – T E M 1A 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 GC 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
Top Related