Workshop:

Ari Stopassola Junior@stopassola

Gramado, 23 de abril de 2012 – powered by

Vagas esgotadas

Ari Stopassola JuniorBacharel 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, Samsung, FOX etc.Fonte: http://www.magentocommerce.com/showcase

Fonte: twitter.com/magento

Certificação profissional

• Developer: 70 questões em 90 min• Develoer plus: 85 questões em 120

minhttp://www.magentocommerce.com/certification/

Certificação da indústriahttp://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/compare

Instalação• Baixe a versão “Full Release” estável

da Magento Community Edition:http://www.magentocommerce.com/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/translations

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 paramagento/app/design/frontend/default/default/locale/

• Arraste:app/locale/pt_BRparamagento/app/locale/

Faça o mesmo para o “modern”

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/.htaccesschmod –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

Erro!

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

Abra a URL

Configurações regionais

mais segurança

URLs amigáveis

As credenciais do banco de dados

ficarão em:app/etc/local.xml

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çãoem 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.x1. Acesse e baixe o pacote

traducao_magento_1_5_x_versao_beta_0_3.ziphttp://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 directory_country_region e directory_country_region_name - feito anteriomente

4. Execute a query no phpMyAdmin

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)

Adicione os snippets de código de acordo com suas necessidades:

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

Remova os comentários pois eles aparecem no site

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 dadose 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ção5. 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 envioEm "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:

RENAME TABLE noix_correios_calculos TO magento_noix_correios_calculos;

magento_ é o prefixo

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_brasileiros.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.com/community/ASchroder_SMTPPro

• Sistema -> Configurações -> (AVANÇADO) Sistema

SMTP: abordagem via .htaccess

php_flag authmail.debug ONphp_value authmail.address conta@sualoja.com.brphp_value authmail.smtp_account conta@sualoja.com.brphp_value authmail.smtp smtp.sualoja.com.brphp_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

XIntermediário (sai temporariamente da loja)

Ex.: PagSeguroX

Gateway (incorporado) Ex.: iPagare

Intermediário

Gateway

Instalação do PagSeguro1. Acesse:

http://pagseguro.visie.com.br/plataforma/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: token1. Acesse o PagSeguro2. Menu Integrações -> Token de

segurança3. Pressione "Gerar novo token"4. Copie esse token5. Acesse a área administrativa do

Magento6. Sistema -> Configuração -> Formas de

Pagamento -> aba "PagSeguro"7. Cole o token no campo apropriado e

pressione "Salvar"

PagSeguro: redirecionamento

1. Acesse o PagSeguro2. Menu Integrações -> Página de

redirecionamento3. Ative e aponte para:

http://www.sualoja.com.br/PagSeguro/standard/obrigado/

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:

PagSeguro: redirecionamento (continuação)

<p>Estamos processando seu pedido. Por favor, aguarde...</p><META http-equiv="refresh" content="1;URL=http://www.sualoja.com.br/checkout/onepage/success">

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: redirecionamento (finalizando)

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:

<?phpecho $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>’)?>

Transferência bancaria

• Extensão: BankPayment• Key:

http://connect20.magentocommerce.com/community/BankPayment

Temas

• Menu “Sistema” -> “Design” -> “+ Adicionar alteração de design”

• Escolha o design "default/modern” e “Salvar”

Novo tema no pacote default

cd /DiretorioMagentomkdir app/design/frontend/default/novotemamkdir app/design/frontend/default/novotema/layoutmkdir app/design/frontend/default/novotema/templatemkdir skin/frontend/default/novotemamkdir skin/frontend/default/novotema/cssmkdir skin/frontend/default/novotema/imagesmkdir skin/frontend/default/novotema/js

Layout personalizadoSistema -> Design -> selecione o design atual

(default)

Theme fallback modelFluxograma do comportamento do modelo

Obs.: o Magento não usa o modelo em cascata nas skins (CSS, JS e imagens)

Extraído do livro “Designer’s Guide to Magento”

ATENÇÃO: Jamais modifique os arquivos

default

Pacotes de temascd /DiretorioMagentomkdir -p app/design/frontend/PACOTE/defaultmkdir -p skin/frontend/PACOTE/defaultmkdir app/design/frontend/PACOTE/default/layoutmkdir app/design/frontend/PACOTE/default/templatemkdir skin/frontend/PACOTE/default/cssmkdir skin/frontend/PACOTE/default/imagesmkdir skin/frontend/PACOTE/default/js

ATENÇÃO: o Magento não usa o modelo em cascata para carregas

a skin – portanto é preciso copiar as

pastas de imagens para o novo tema.

Exemplo: logo.gif

Substituir por

Caso queira alterar o nome ou formato do logo

Favorite icon

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

Substitua por

Alterando a CSS

• Copie o arquivo:skin/frontend/default/default/css/styles.csspara: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/etcchmod 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ção1. Altere o “Escopo da configuração atual:”2. Em Avançado -> Desenvolvedor3. Categoria Debug -> e habilite os itens

Via local.xmlCopie de:http://www.perito.inf.br/uploads/media/local.xml Cole em:app/design/frontend/default/<tema>/layout/local.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/

Ajustes na área administrativa

Desabilitar mensagens popup na entrada da área administrativa.1. Sistema -> Configuração ->

Avançado2. 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 pedidos1. Após a conferência no PagSeguro,

acesse: Vendas -> Pedidos

2. Selecione o pedido3. 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

• Lazzymonks (Wordpress)• Extensão para Typo3 - http://www.flagbit.de

News

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

Referências• http://www.magentocommerce.com/kn

owledge-base

• http://www.comunidademagento.com.br

• http://escolamagento.com/• http://www.weblibre.com.br/category/c

omercio-eletronico/magento-comercio-eletronico/

• http://inchoo.net/blog/• http://blog.sessiondigital.com/• http://www.magespeedtest.com/

Testar performance

Contatos

E-mail:stopassola@acimainteractive.comari.junior@ist.utl.pt

MSN: stopassola@hotmail.comSkype: stopassolaGoogle Talk: arijunior@gmail.comRedes sociais:

http://pt.linkedin.com/in/stopassolahttp://www.facebook.com/arijuniorhttp://twitter.com/stopassola