Workshop Magento

Workshop:

Ari Stopassola Junior
@stopassola

Gramado, 23 de abril de 2012 – powered by

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.

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.

Certificação profissional

• Developer: 70 questões em 90 min
• Develoer plus: 85 questões em 120 min
http://www.magentocommerce.com/certificat

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

Versões
• Community
• Enterprise
• Enterprise Premium
• Go (software-as-a-service)
• Mobile

Mais informações em:
http://www.magentocommerce.com/product/compa
re

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

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

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

As credenciais do
banco de dados
ficarão em:
app/etc/local.xml

URLs amigáveis

mais segurança

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

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

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

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

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.

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

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

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…

Magento Connect: repositório de plug-
ins
Menu “Sistema” -> “Magento Connect” ->
“Gerenciador magento connect”

Usuário e
senha da
instalação

Alerta

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

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

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

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/

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;

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

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

• 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

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

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

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

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

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"

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/

(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:
Estamos processando seu pedido. Por favor, aguarde...
<META http-equiv="refresh"
content="1;URL=http://www.sualoja.com.br/checkout/onepage/succ
ess">

(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)

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->__(' 
<img src="http://www.loja.com.br/media/PagSeguroOpcoesPagamento.gif"
alt="PagSeguro até 12x"/>
Você será redirecionado ao Pagseguro para finalizar a compra!
’)
?>

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

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

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

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

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”

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

Exemplo: logo.gif
Substituir por

Caso queira alterar o nome
ou formato do logo

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

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.

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

Erro: problema nginx "Engine X"

chmod 755 app/
chmod 755 app/etc
chmod 755 media/
chmod 755 var/
chmod 755 index.php

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

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

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

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

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"

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

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

News

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

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/

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

Workshop Magento

Mais conteúdo relacionado

Mais procurados (14)

Destaque (17)

Semelhante a Workshop Magento (20)

Mais de Ari Stopassola Junior (10)

Último (20)

Workshop Magento

Notas do Editor