Slides do Workshop de Magento promovido pelo PERITO.inf.br em Gramado (RS - Brasil). Exploramos a instalação, uso de extensões, meios de pagamento, integração com os Correios e temas.

1. Workshop:
Ari Stopassola Junior
@stopassola
Gramado, 23 de abril de 2012 – powered by

2. Ari Stopassola Junior
Bacharel em informática com ênfase em
Análise de Sistemas pela Unisinos, mestrando
em Engenharia Informática e de Computadores
pelo Instituto Superior Técnico da Universidade
Técnica de Lisboa (Portugal), fundador da
ACIMA Interactive, perito judicial especializado
em TI, Zend Certified Engineer #ZEND004019
(PHP 5.3), consultor web e PHP evangelist.

4. Características
• Cresce 300% ao ano
• Magento Inc. recentemente
comprada pelo eBay
• Opensource e altamente escalável
• Suporta extensões - Magento
Connect
• Desenvolvido em PHP –
ZendFramework
• Cases: Ford, Olympus, Goodyear,
Cirque du Soleil, Nespresso, Fonte: twitter.com/magento
Samsung, FOX etc.

5. Certificação profissional
• Developer: 70 questões em 90 min
• Develoer plus: 85 questões em 120 min
http://www.magentocommerce.com/certificat

6. Certificação da indústria
http://www.magentocommerce.com/partners
/

7. Versões
• Community
• Enterprise
• Enterprise Premium
• Go (software-as-a-service)
• Mobile
Mais informações em:
http://www.magentocommerce.com/product/compa
re

8. Instalação
• Baixe a versão “Full Release” estável da
Magento Community
Edition:http://www.magentocommerce.co
m/download
Obs.: o cadastro não é obrigatório mas
será necessário quando utilizarmos as
extensões disponíveis no Magento
Connect.
• Baixe a tradução oficial em:
http://www.magentocommerce.com/transla
tions

9. Mesclando a release + tradução
• Descompacte magento-1.6.2.0.tar.gz (core)
• Descompacte pt_BR.zip (tradução)
• Arraste:
app/design/frontend/default/default/locale/pt_
BR para
magento/app/design/frontend/default/default/
locale/ Faça o mesmo para o “modern”
• Arraste:
app/locale/pt_BR
para

10. 1. Faça o FTP dos arquivos para o servidor
2. Entre no diretório onde está o magento e
atribua permissões:
chmod –R 777 var/.htaccess
Erro!
chmod –R 777 app/etc/
chmod –R 777 var/
chmod –R 777 media/
3. Utilize no php.ini (se possível) as
diretrizes sugeridas em php.ini.sample
Se o PHP estiver executando como módulo do
Apache basta adicionar essas diretrizes no .htaccess
Ex.:
php_value memory_limit 64M
php_value max_execution_time 18000
php_flag magic_quotes_gpc off

11. Abra a URL

12. Configurações regionais

13. As credenciais do
banco de dados
ficarão em:
app/etc/local.xml
URLs amigáveis
mais segurança

16. Backend
• Acesse o "backend” do sistema:
http://localhost/magento/admin/
• Clique em "Go to messages inbox”, clique
em "Selecionar todos" -> Ações:
“Remover”, pressione "Enviar" e confirme
• Menu “Sistema”-> “Index Management” e
reindexe tudo

17. Alerta de loja em
desenvolvimento
Menu Sistema -> Configuração
em GERAL clique em "Design" ->
"Cabeçalho HTML"

18. Tradução do Mario
SAM
Conjunto de arquivos para a release 1.5.x mas
funcionam na 1.6.x
1. Acesse e baixe o pacote
traducao_magento_1_5_x_versao_beta_0_3
.zip
http://escolamagento.com/traducao-br-1-5/
2. Sobrescreva os arquivos .csv contidos na
pasta:
app/locale/pt_BR
3. Edite o arquivo sql/sql-pt-br.txt, adicione os
prefixos das tabelas (caso haja) e ignore as
inserções nas tabelas

19. Cadastro de produto
• Menu “Catálogo” -> “Gerenciar produtos” -
> “+ Adicionar produto”

20. Tipos de produtos
• Simples
– Possui peso e incide frete. Ex.: garrafa de
vinho
• Virtual
– Gera um voucher. Ex.: refeição, ticket
• Disponível para baixar
– Software, documentação, fotos, apostilas etc.

21. Ajustes na exibição dos
produtos
Por padrão o Magento exibe apenas os produtos
NOVOS.
Vamos alterar a página de abertura (landing page)
para fazê-la exibir todos os produtos:
• Menu CMS -> Pages -> Home page ->
Conteúdo

22. Exibição dos produtos
(continuação) com suas
Adicione os snippets de código de acordo
necessidades:
Remova os comentários pois
eles aparecem no site
//Novos produtos
{{block type="catalog/product_new" name="home.catalog.product.new"
alias="product_homepage"
template="catalog/product/new.phtml"}}
//TODOS produtos
{{block type="catalog/product_list" name="home.catalog.product.list"
alias="product_homepage"
template="catalog/product/list.phtml"}}
//Por categoria (alterar o ID)
{{block type="catalog/product_list" name="home.catalog.product.list"
alias="product_homepage" category_id="3"
template="catalog/product/list.phtml"}}

23. http://www.magentocommerce.com/magento-
connect/
• Cálculo de frete dos Correios
• NF-e
• Ferramentas de SEO
• Temas, integração com CMSs
• Formas alternativas de visualização
• Integração iPagare, MoIP, Cielo etc
• Blog, Twitter, chat, Facebook
• Envio de e-mails via SMTP
• Importação/exportação de dados
e MUITO mais…

24. Magento Connect: repositório de plug-
ins
Menu “Sistema” -> “Magento Connect” ->
“Gerenciador magento connect”
Usuário e
senha da
instalação

25. Alerta
find . -type d -exec chmod 777 {} ;

26. 1. Primeiramente é necessário localizar o
plug-in no site para então obter a chave
que é requerida no instalador.
Muitos são pagos – nesse caso, clique
na aba "Free”
2. Localize a extensão "Magento Easy
Lightbox”.
3. Alterne para o formato "Magento
Connect 2.0" e obtenha a chave
4. Copie & cole na tela de instalação
5. Clique no link "Return do admin”
Obs.: plug-ins em versão beta não são
incorporados por padrão - é necessário
autorizar

27. Easy Lightbox (continuação)
• Para configurar o plug-in acesse:
Sistema -> Configuração -> Easy Lightbox
Obs.: pode aparecer o erro 404. É
necessário sair e se logar novamente, para
que as permissões sejam devidamente
concedidas.
Lembre-se
de habilitar

28. Desabilitar o cache
Sistema -> Gerenciador de cache
Obs.: além dessa tarefa corriqueira, outras também
podem ser facilmente disparadas por comandos via
console:
http://magetool.co.uk/

29. Frete
• A cotação do frete nativa é inconsistente
• No Magento Connect busque pela palavra-
chave "correios" e instale o “NOIX Correios”
• Sistema -> Configuração -> seção
"VENDAS" -> Métodos de envio
Em "Correios - NOIX”
Atenção: ao instalar esse plug-in, a extensão não utiliza o prefixo na
criação da tabela "noix_correios_calculos" e provoca erro. Acesse o
gerenciador do SGBD e execute a query:magento_ é o prefixo
RENAME TABLE noix_correios_calculos TO
magento_noix_correios_calculos;

30. Frete
• Sistema -> Configuração -> VENDAS
Método de envio -> Correios - NOIX

31. “Tropicalizando”
• Os estados brasileiros não constam no
Magento, portanto devemos inserir
manualmente no SGBD.
• Observe a tabela:
prefixo_directory_country_region

32. • Acesse o snippet de código:
http://www.perito.inf.br/uploads/media/estados_bra
sileiros.sql
• Execute a primeiro trecho de SQL
• Identifique qual o region_id do “Acre”. Nesse
caso o 485
• Adapte o SQL do trecho seguinte utilizando
incrementando o 485

34. Envio de e-mails via SMTP
• ASchroder.com SMTP Pro Email
• Key:
http://connect20.magentocommerce.co
m/community/ASchroder_SMTPPro
• Sistema -> Configurações ->
(AVANÇADO) Sistema

35. SMTP: abordagem via
.htaccess
php_flag authmail.debug ON
php_value authmail.address conta@sualoja.com.br
php_value authmail.smtp_account conta@sualoja.com.br
php_value authmail.smtp smtp.sualoja.com.br
php_value authmail.password senhadaconta

36. Meios de pagamento
• Implementação mais crítica da loja
• Evitar a “síndrome do carrinho abandonado”
• Momento que gera maior ansiedade
• Excesso de telas
• Segurança
• Diferentes abordagens:
Integração direta (honerosa) Ex.: infra-estrutura da
VISA
X
Intermediário (sai temporariamente da loja) Ex.:
PagSeguro

37. Intermediário

39. Gateway

40. Instalação do PagSeguro
1. Acesse:
http://pagseguro.visie.com.br/pla
taforma/magento/
2. Descompacte e copie os
diretórios nos seus respectivos
locais
3. Limpe o cache e acesse:
Sistema -> Configuração ->
Métodos de pagamento

41. PagSeguro: token
1. Acesse o PagSeguro
2. Menu Integrações -> Token de segurança
3. Pressione "Gerar novo token"
4. Copie esse token
5. Acesse a área administrativa do Magento
6. Sistema -> Configuração -> Formas de
Pagamento -> aba "PagSeguro"
7. Cole o token no campo apropriado e
pressione "Salvar"

42. PagSeguro: redirecionamento
1. Acesse o PagSeguro
2. Menu Integrações -> Página de
redirecionamento
3. Ative e aponte para:
http://www.sualoja.com.br/PagSeguro/standard/
obrigado/

43. PagSeguro: redirecionamento
(continuação)
1. No Magento acesse CMS -> Páginas -> +
Criar Página
2. Como título preecha algo como
"Redirecionador do PagSeguro", crie uma
URL e habilite o Status
3. Na aba "Conteúdo" pressione o botão
"Show / Hide Editor" e coloque o
conteúdo:
<p>Estamos processando seu pedido. Por favor, aguarde...</p>
<META http-equiv="refresh"
content="1;URL=http://www.sualoja.com.br/checkout/onepage/succ
ess">

44. PagSeguro: redirecionamento
(finalizando)
1. Acesse a área administrativa do Magento
2. Sistema -> Configuração -> Formas de
Pagamento -> aba "PagSeguro"
3. No campo "Página de Retorno" escolha a
página recém criada (através do CMS ->
Páginas)

45. PagSeguro: interface
• Faça o FTP da imagem
PagSeguroOpcoesPagamento.gif para o diretório
media/ (na raiz)
• Edite o template:
app/code/community/PagSeguro/Design/form.phtml e
modifique o conteúdo:
<?php
echo $this->__('<br />
<img src="http://www.loja.com.br/media/PagSeguroOpcoesPagamento.gif"
alt="PagSeguro até 12x"/>
<strong>Você será redirecionado ao Pagseguro para finalizar a compra!
</strong>’)
?>

46. Transferência bancaria
• Extensão: BankPayment
• Key:
http://connect20.magentocommerce.com/c
ommunity/BankPayment

47. Temas
• Menu “Sistema” -> “Design” -> “+
Adicionar alteração de design”
• Escolha o design "default/modern” e
“Salvar”

48. Novo tema no pacote default
cd /DiretorioMagento
mkdir app/design/frontend/default/novotema
mkdir app/design/frontend/default/novotema/layout
mkdir app/design/frontend/default/novotema/template
mkdir skin/frontend/default/novotema
mkdir skin/frontend/default/novotema/css
mkdir skin/frontend/default/novotema/images
mkdir skin/frontend/default/novotema/js

49. Layout personalizado
Sistema -> Design -> selecione o design atual (default)

50. Theme fallback model
Fluxograma do comportamento do modelo
Obs.: o Magento não usa o modelo em cascata nas skins
(CSS, JS e imagens)
ATENÇÃO: Jamais
modifique os arquivos
default
Extraído do livro “Designer’s Guide to Magento”

51. Pacotes de temas
cd /DiretorioMagento
ATENÇÃO: o Magento
mkdir -p app/design/frontend/PACOTE/default
não usa o modelo em
mkdir -p skin/frontend/PACOTE/default cascata para carregas
mkdir app/design/frontend/PACOTE/default/layout a skin – portanto é
mkdir app/design/frontend/PACOTE/default/template preciso copiar as
mkdir skin/frontend/PACOTE/default/css pastas de imagens
mkdir skin/frontend/PACOTE/default/images para o novo tema.
mkdir skin/frontend/PACOTE/default/js

52. Exemplo: logo.gif
Substituir por
Caso queira alterar o nome
ou formato do logo

53. Favorite icon
Substitua por
• A partir do logotipo, utilize o “favorite icon
generator”:
http://tools.dynamicdrive.com/favicon/
• Adicione o arquivo favicon.ico no diretório:
skin/frontend/default/<tema>/

54. Alterando a CSS
• Copie o arquivo:
skin/frontend/default/default/css/styles.c
ss
para:
skin/frontend/default/<tema>/css/styles.
css
• Inspecione o elemento através do
FireBug e aplique as mudanças.

55. Ligando/Desligando elementos
http://www.magentocommerce.com/knowledge-
base/entry/turning-on-off-magentos-content-blocks
• Distribuídos em diversos locais:
– Sistema -> Configuração -> Avançado
– Percorrendo a área administrativa e modificando
– Ajustando o respectivo módulo:
default/<tema>/layout/*.xml
– Alterando o template (.phtml)
– Criando o arquivo default/<tema>/layout/local.xml

56. Erro: problema nginx "Engine X"
chmod 755 app/
chmod 755 app/etc
chmod 755 media/
chmod 755 var/
chmod 755 index.php

57. Onde encontrar os arquivos?
Na composição do layout são utilizados
aproximadamente mil arquivos entre:
templates (.phtml), estrutura (.xml), estilos
(.css), scripts client-side (.js e .as), imagens
etc.
Sistema -> Configuração
1. Altere o “Escopo da configuração atual:”
2. Em Avançado -> Desenvolvedor
3. Categoria Debug -> e habilite os itens

59. Via local.xml
Copie de:
http://www.perito.inf.br/uploads/media/local.xml
Cole em:
app/design/frontend/default/<tema>/layout/loca
l.xml
<?xml version="1.0" ?>
<layout>
<default>
<remove name="left.permanent.callout" /> <!--cachorro-->
<remove name="right.permanent.callout" /> <!--back to school-->
<remove name="catalog.compare.sidebar" /> <!--comparacao de produtos-->
<remove name="left.reports.product.viewed" /> <!--recentemente vistos (esquerda)--
>
<remove name="right.reports.product.viewed" /> <!--recentemente vistos (direita)--
>
<remove name="right.poll" /> <!--enquete-->
<remove name="left.newsletter" /> <!--newsletter-->
</default>
</layout>
http://www.e-commercewebdesign.co.uk/blog/magento/magento-local-xml-boilerplate.php
http://magebase.com/magento-tutorials/5-useful-tricks-for-your-magento-local-xml/

60. Ajustes na área administrativa
Desabilitar mensagens popup na entrada da
área administrativa.
1. Sistema -> Configuração -> Avançado
2. Desabilite o Mage_AdminNotification

61. Tranduções pendentes
• Sistema -> Configuração ->
Desenvolvedor
• Traduzir na tela (Translate inline)
• "Enabled for Frontend" e "Enabled for
Admin"

62. Contabilizando os pedidos
1. Após a conferência no PagSeguro,
acesse: Vendas -> Pedidos
2. Selecione o pedido
3. Pressione o botão "Fatura" e "Salvar
Fatura"

63. Google Analytics
1. Sistema -> Configuração -> API do
Google
2. Habilite e preencha com o "Número da
conta”
3. Pressione Salvar

64. Mitos
“O Magento não funciona na minha
hospedagem”
Ajustes nas permissões no filesystem,
mod_rewrite, parâmetros do php.ini
“Magento é lento”
• APC, eAccelerator, Varnish
• Extensões: M-Turbo e Fooman Speedster
• MySQL cache, combinar e comprimir JS e
CSS
“Roda sozinho. Não integra com outros
CMSs”
• MageBridge (Joomla)
http://www.yireo.com/software/magebridge

65. News
http://www.zend.com/en/webinar/Server/70170000000bkJA-S4Magento.flv

66. Referências
• http://www.magentocommerce.com/knowl
edge-base
• http://www.comunidademagento.com.br
• http://escolamagento.com/
• http://www.weblibre.com.br/category/come
rcio-eletronico/magento-comercio-
eletronico/
• http://inchoo.net/blog/
• http://blog.sessiondigital.com/ Testar performance
• http://www.magespeedtest.com/

67. Contatos
E-mail:
stopassola@acimainteractive.com
ari.junior@ist.utl.pt
MSN: stopassola@hotmail.com
Skype: stopassola
Google Talk: arijunior@gmail.com
Redes sociais:
http://pt.linkedin.com/in/stopassola
http://www.facebook.com/arijunior
http://twitter.com/stopassola