temas em magento

59
© 2013 – Gugliotti Consulting TEMAS EM MAGENTO CURSO EM VÍDEO-AULAS MÓDULO 1 – TEORIA Cursos de Magento

Upload: andre-gugliotti

Post on 10-Aug-2015

2.777 views

Category:

Internet


0 download

TRANSCRIPT

Page 1: Temas em Magento

© 2013 – Gugliotti Consulting

TEMAS EM MAGENTO

CURSO EM VÍDEO-AULAS

MÓDULO 1 – TEORIA

Cursos de Magento

Page 2: Temas em Magento

© 2013 – Gugliotti Consulting

Temas em Magento - Teoria

• ConceituaçãoAula 1

• ConfiguraçãoAula 2

• Skin / Locale / LayoutAula 3

• Layout / TemplateAula 4

Page 3: Temas em Magento

© 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

Page 4: Temas em Magento

© 2013 – Gugliotti Consulting

AULA 1 – CONCEITUAÇÃO

Temas em Magento - Teoria

Page 5: Temas em Magento

© 2013 – Gugliotti Consulting

Frontend e Backend

Page 6: Temas em Magento

© 2013 – Gugliotti Consulting

Page 7: Temas em Magento

© 2013 – Gugliotti Consulting

Page 8: Temas em Magento

© 2013 – Gugliotti Consulting

Page 9: Temas em Magento

© 2013 – Gugliotti Consulting

Page 10: Temas em Magento

© 2013 – Gugliotti Consulting

Page 11: Temas em Magento

© 2013 – Gugliotti Consulting

Page 12: Temas em Magento

© 2013 – Gugliotti Consulting

Page 13: Temas em Magento

© 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

Page 14: Temas em Magento

© 2013 – Gugliotti Consulting

Modularidade do Magento

Magento Design Guide

Page 15: Temas em Magento

© 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

Page 16: Temas em Magento

© 2013 – Gugliotti Consulting

Page 17: Temas em Magento

© 2013 – Gugliotti Consulting

meu-tema/default meu-tema/variacao-1

Pacotes de Design

Magento Design Guide

Page 18: Temas em Magento

© 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

Page 19: Temas em Magento

© 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

Page 20: Temas em Magento

© 2013 – Gugliotti Consulting

Magento Design Guide

Hierarquia de Temas

Page 21: Temas em Magento

© 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

Page 22: Temas em Magento

© 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

Page 23: Temas em Magento

© 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

Page 24: Temas em Magento

© 2013 – Gugliotti Consulting

AULA 2 – CONFIGURAÇÕES

Temas em Magento

Page 25: 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)

Page 26: Temas em Magento

© 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

Page 27: Temas em Magento

© 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

Page 28: Temas em Magento

© 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

Page 29: Temas em Magento

© 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

Page 30: Temas em Magento

© 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

Page 31: Temas em Magento

© 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

Page 32: Temas em Magento

© 2013 – Gugliotti Consulting

Habilitando os temas

Page 33: Temas em Magento

© 2013 – Gugliotti Consulting

AULA 3 – SKIN/LOCALE/LAYOUT

Temas em Magento

Page 34: Temas em Magento

© 2013 – Gugliotti Consulting

Modularidade do Magento

Magento Design Guide

Page 35: Temas em Magento

© 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

Page 36: Temas em Magento

© 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

Page 37: Temas em Magento

© 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

Page 38: Temas em Magento

© 2013 – Gugliotti Consulting

/app/locale

• vários arquivos

meu-tema/locale

• translate.csv

Trabalhando o locale

Page 39: Temas em Magento

© 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

Page 40: Temas em Magento

© 2013 – Gugliotti Consulting

Blocos

Magento Design Guide

Page 41: Temas em Magento

© 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

Page 42: Temas em Magento

© 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

Page 43: Temas em Magento

© 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

Page 44: Temas em Magento

© 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

Page 45: Temas em Magento

© 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

Page 46: Temas em Magento

© 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

Page 47: Temas em Magento

© 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

Page 48: Temas em Magento

© 2013 – Gugliotti Consulting

AULA 4 – LAYOUT/TEMPLATE/CMS

Temas em Magento

Page 49: 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

Page 50: Temas em Magento

© 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

Page 51: Temas em Magento

© 2013 – Gugliotti Consulting

Blocos

Magento Design Guide

Page 52: Temas em Magento

© 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

Page 53: Temas em Magento

© 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

Page 54: Temas em Magento

© 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

Page 55: Temas em Magento

© 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

Page 56: Temas em Magento

© 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

Page 57: Temas em Magento

© 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

Page 58: Temas em Magento

© 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

Page 59: Temas em Magento

© 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