Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Workshop Magento

4,286 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
  • Be the first to comment

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

×