Workshop Magento

3,670 views
3,574 views

Published on

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.

Published in: Technology
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
3,670
On SlideShare
0
From Embeds
0
Number of Embeds
81
Actions
Shares
0
Downloads
65
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide
  • Versão 2.0
  • http://www.zend.com/en/yellow-pages#show-ClientCandidateID=ZEND004019
  • Suportanativamente, dentreinúmerosrecursos, promoções e descontos –bastanterequisitadopelomercadobrasileiro. Programas de fidelidade, fretegrátis.Os plug-ins podemserincorporadossemtirar a loja do ar.Suportavenda de produtosdigitais.AngryBirds (Rovio Entertainment Ltd.) passou a usar o Magento Enterprise recentemente (maio/2012).
  • localização
  • Credenciais do banco de dados.ATENÇÃO: no prefixo das tabelas, utilizaalgocomo "magento_" (com o underline) aoinvés de somente o nome. Se deixarsem um separador as tabelasficam com o nomeconcatenado. Ex.: magentoapi_roleCaso o magentosejainstaladonumasubpasta do domínio, podegerar um erronavalidação da URL que impede o avanço.“magento installation the url is invalid Response from server isn't valid.Skip Base URL Validation Before the Next Step”Nesses casosessaopçãodevesermarcada.
  • Éprecisocriar um login/senhaparaacessar o site.
  • Mais de 4 mil extensões.
  • Buscatodososdiretórios e muda as permissões.
  • Pressione PROCEED paraexecutar a instalação da extensão.Versão 2.0 tem suporte a dependências.Obs.: aoentraremSistema -> Configuração -> Easy Lightboxpodeaparecer o erro 404. Énecessáriosair e se logarnovamente, paraque as permissõessejamdevidamenteconcedidas.
  • Casoaindanãoreflita, experimentelimpar o cache do navegadorqueestiverusando.
  • Casoocorraerro, obtenha o código, vá no diretóriovar/report/ID_do_erro
  • Habilite o Sedex e PAC (semcontrato)
  • Faz log das mensagens
  • 88% dos consumidoresamericanosabandonam as comprasnaslojasvirtuais. No Brasilessenúmerochega a 48%.No Gateway (iPagareporexemplo) se beneficia da vendaporimpulso.
  • PagSeguronãorecomendo a instalação de módulos de terceiro:http://www.magentocommerce.com/magento-connect/bruno-assarisse-pagseguro.html (descontinuado)Se fazer o retornoparahttp://www.loja.com.br/checkout/onepage/success osistema NÃO envia o e-mail automático do pedido.
  • Observeoscaracteresemmaiúsculas e minúsculas do PagSeguro, poisé case sensitive.
  • Acesse a página e veja se o site estáredirecionandopara/checkout/onepage/successEssaetapaéespecialmenteimportante, casocontrário o PagSeguro NÃO envia o e-mail de confirmação do pedido:http://www.magentocommerce.com/boards/viewthread/70197/
  • Adicione um textopersonalizado no campo.
  • Para modificar a CSS do temapadrão, deverácopiartoda a pasta skin para o novo tema.
  • Obs.:ele NÃO herda
  • Servidormaisenxuto, originário do Apache.
  • Podeenviar um avisoautomáticopor e-mail.
  • http://www.artio.net/magento-extensions/m-turbo-accelerator
  • Utilize a extensão do Chrome chamada "Chrome Sniffer". Com elavocêidentifica se um site/sistemautiliza um CMS/Framework/bibliotecaconhecida e mostranabarra de endereço.
  • Workshop Magento

    1. 1. Workshop: Ari Stopassola Junior @stopassolaGramado, 23 de abril de 2012 – powered by
    2. 2. Ari Stopassola JuniorBacharel em informática com ênfase emAnálise de Sistemas pela Unisinos, mestrandoem Engenharia Informática e de Computadorespelo Instituto Superior Técnico da UniversidadeTécnica de Lisboa (Portugal), fundador daACIMA Interactive, perito judicial especializadoem TI, Zend Certified Engineer #ZEND004019(PHP 5.3), consultor web e PHP evangelist.
    3. 3. 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.
    4. 4. Certificação profissional• Developer: 70 questões em 90 min• Develoer plus: 85 questões em 120 minhttp://www.magentocommerce.com/certificat
    5. 5. Certificação da indústriahttp://www.magentocommerce.com/partners /
    6. 6. Versões• Community• Enterprise• Enterprise Premium• Go (software-as-a-service)• MobileMais informações em:http://www.magentocommerce.com/product/compare
    7. 7. 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
    8. 8. 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
    9. 9. 1. Faça o FTP dos arquivos para o servidor2. 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 doApache basta adicionar essas diretrizes no .htaccess Ex.: php_value memory_limit 64M php_value max_execution_time 18000 php_flag magic_quotes_gpc off
    10. 10. Abra a URL
    11. 11. Configurações regionais
    12. 12. As credenciais do banco de dados ficarão em: app/etc/local.xml URLs amigáveismais segurança
    13. 13. 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
    14. 14. Alerta de loja em desenvolvimentoMenu Sistema -> Configuraçãoem GERAL clique em "Design" ->"Cabeçalho HTML"
    15. 15. Tradução do Mario SAMConjunto de arquivos para a release 1.5.x masfuncionam na 1.6.x1. 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_BR3. Edite o arquivo sql/sql-pt-br.txt, adicione os prefixos das tabelas (caso haja) e ignore as inserções nas tabelas
    16. 16. Cadastro de produto• Menu “Catálogo” -> “Gerenciar produtos” - > “+ Adicionar produto”
    17. 17. 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.
    18. 18. Ajustes na exibição dos produtosPor padrão o Magento exibe apenas os produtosNOVOS.Vamos alterar a página de abertura (landing page)para fazê-la exibir todos os produtos:• Menu CMS -> Pages -> Home page -> Conteúdo
    19. 19. 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"}}
    20. 20. 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…
    21. 21. Magento Connect: repositório de plug- ins Menu “Sistema” -> “Magento Connect” -> “Gerenciador magento connect” Usuário e senha da instalação
    22. 22. Alertafind . -type d -exec chmod 777 {} ;
    23. 23. 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 chave4. Copie & cole na tela de instalação5. Clique no link "Return do admin”Obs.: plug-ins em versão beta não sãoincorporados por padrão - é necessárioautorizar
    24. 24. Easy Lightbox (continuação)• Para configurar o plug-in acesse: Sistema -> Configuração -> Easy LightboxObs.: pode aparecer o erro 404. Énecessário sair e se logar novamente, paraque as permissões sejam devidamenteconcedidas. Lembre-se de habilitar
    25. 25. Desabilitar o cache Sistema -> Gerenciador de cacheObs.: além dessa tarefa corriqueira, outras tambémpodem ser facilmente disparadas por comandos viaconsole:http://magetool.co.uk/
    26. 26. 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 nacriação da tabela "noix_correios_calculos" e provoca erro. Acesse ogerenciador do SGBD e execute a query:magento_ é o prefixo RENAME TABLE noix_correios_calculos TO magento_noix_correios_calculos;
    27. 27. Frete• Sistema -> Configuração -> VENDAS Método de envio -> Correios - NOIX
    28. 28. “Tropicalizando”• Os estados brasileiros não constam no Magento, portanto devemos inserir manualmente no SGBD.• Observe a tabela: prefixo_directory_country_region
    29. 29. • 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
    30. 30. 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
    31. 31. SMTP: abordagem via .htaccessphp_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
    32. 32. 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
    33. 33. Intermediário
    34. 34. Gateway
    35. 35. Instalação do PagSeguro1. Acesse: http://pagseguro.visie.com.br/pla taforma/magento/2. Descompacte e copie os diretórios nos seus respectivos locais3. Limpe o cache e acesse: Sistema -> Configuração -> Métodos de pagamento
    36. 36. 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"
    37. 37. PagSeguro: redirecionamento1. Acesse o PagSeguro2. Menu Integrações -> Página de redirecionamento3. Ative e aponte para: http://www.sualoja.com.br/PagSeguro/standard/ obrigado/
    38. 38. 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/success">
    39. 39. PagSeguro: redirecionamento (finalizando)1. Acesse a área administrativa do Magento2. 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)
    40. 40. 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>’)?>
    41. 41. Transferência bancaria• Extensão: BankPayment• Key: http://connect20.magentocommerce.com/c ommunity/BankPayment
    42. 42. Temas• Menu “Sistema” -> “Design” -> “+ Adicionar alteração de design”• Escolha o design "default/modern” e “Salvar”
    43. 43. Novo tema no pacote defaultcd /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
    44. 44. Layout personalizadoSistema -> Design -> selecione o design atual (default)
    45. 45. Theme fallback model Fluxograma do comportamento do modeloObs.: 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”
    46. 46. Pacotes de temascd /DiretorioMagento ATENÇÃO: o Magentomkdir -p app/design/frontend/PACOTE/default não usa o modelo emmkdir -p skin/frontend/PACOTE/default cascata para carregasmkdir app/design/frontend/PACOTE/default/layout a skin – portanto émkdir app/design/frontend/PACOTE/default/template preciso copiar asmkdir skin/frontend/PACOTE/default/css pastas de imagensmkdir skin/frontend/PACOTE/default/images para o novo tema.mkdir skin/frontend/PACOTE/default/js
    47. 47. Exemplo: logo.gif Substituir por Caso queira alterar o nome ou formato do logo
    48. 48. 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>/
    49. 49. 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.
    50. 50. Ligando/Desligando elementoshttp://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
    51. 51. Erro: problema nginx "Engine X"chmod 755 app/chmod 755 app/etcchmod 755 media/chmod 755 var/chmod 755 index.php
    52. 52. Onde encontrar os arquivos?Na composição do layout são utilizadosaproximadamente mil arquivos entre:templates (.phtml), estrutura (.xml), estilos(.css), scripts client-side (.js e .as), imagensetc.Sistema -> Configuração 1. Altere o “Escopo da configuração atual:” 2. Em Avançado -> Desenvolvedor 3. Categoria Debug -> e habilite os itens
    53. 53. 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.phphttp://magebase.com/magento-tutorials/5-useful-tricks-for-your-magento-local-xml/
    54. 54. Ajustes na área administrativaDesabilitar mensagens popup na entrada daárea administrativa.1. Sistema -> Configuração -> Avançado2. Desabilite o Mage_AdminNotification
    55. 55. Tranduções pendentes• Sistema -> Configuração -> Desenvolvedor• Traduzir na tela (Translate inline)• "Enabled for Frontend" e "Enabled for Admin"
    56. 56. Contabilizando os pedidos1. Após a conferência no PagSeguro, acesse: Vendas -> Pedidos2. Selecione o pedido3. Pressione o botão "Fatura" e "Salvar Fatura"
    57. 57. Google Analytics1. Sistema -> Configuração -> API do Google2. Habilite e preencha com o "Número da conta”3. Pressione Salvar
    58. 58. 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
    59. 59. Newshttp://www.zend.com/en/webinar/Server/70170000000bkJA-S4Magento.flv
    60. 60. 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/
    61. 61. ContatosE-mail: stopassola@acimainteractive.com ari.junior@ist.utl.ptMSN: stopassola@hotmail.comSkype: stopassolaGoogle Talk: arijunior@gmail.comRedes sociais: http://pt.linkedin.com/in/stopassola http://www.facebook.com/arijunior http://twitter.com/stopassola

    ×