- Introdu\u00e7\u00e3o: o que vamos fazer<\/a><\/li>
- Cria\u00e7\u00e3o da rota b\u00e1sica<\/a><\/li>
- Cria\u00e7\u00e3o do arquivo de template phtml do formul\u00e1rio<\/a><\/li>
- Inserindo o formul\u00e1rio via Layout XML<\/a><\/li>
- Criando um template de e-mail<\/a><\/li>
- Disparando e-mail com os dados do formul\u00e1rio<\/a><\/li>
- Detalhes e explica\u00e7\u00f5es adicionais
- Encoding do email<\/a><\/li>
- Enviando via SMTP, Gmail, AWS, etc<\/a><\/li><\/ol><\/li>
- M\u00f3dulo final para download<\/a><\/li>
- Conclus\u00e3o<\/a><\/li><\/ol>\n\n\n\n
O que vamos fazer<\/h2>\n\n\n\n
Antes de come\u00e7ar, vou assumir que voc\u00ea j\u00e1 criou um m\u00f3dulo base para Magento 1. Veja como criar um m\u00f3dulo b\u00e1sico para Magento 1<\/a>.<\/p>\n\n\n\n
Para o nosso exemplo, chamaremos esse m\u00f3dulo de
Magenteiro_Or\u00e7amento<\/code> e colocarei ele no codePool<\/em> community.<\/em><\/p>\n\n\n\nEle exibir\u00e1 um formul\u00e1rio b\u00e1sico com alguns campos quando o cliente\/visitante acessar o URL
\/orcamento<\/code>.<\/p>\n\n\n\nCria\u00e7\u00e3o da rota<\/h2>\n\n\n\n
Nosso controller nesse momento ir\u00e1 apenas carregar o layout padr\u00e3o do Magento. Desta forma, teremos dois arquivos:<\/p>\n\n\n
<?xml version="1.0"?>\n<config>\n <modules>\n <Magenteiro_Orcamento>\n <version>1.0.0<\/version>\n <\/Magenteiro_Orcamento>\n <\/modules>\n <frontend>\n <routers>\n <magenteiro_orcamento>\n <use>standard<\/use>\n <args>\n <frontName>orcamento<\/frontName>\n <module>Magenteiro_Orcamento<\/module>\n <\/args>\n <\/magenteiro_orcamento>\n <\/routers>\n <\/frontend>\n<\/config><\/pre>\n
<\/p>\n\n\n
No primeiro arquivo declaramos uma nova rota que ser\u00e1 atendida pelo nome
\/orcamento<\/code>.<\/p>\n\n\n\nNo segundo arquivo pedimos para o Magento carregar o layout padr\u00e3o e renderiz\u00e1-lo.<\/p>\n\n\n\n
Ao acessarmos
\/orcamento<\/code> ou\/orcamento\/index<\/code> teremos algo como a imagem abaixo (se voc\u00ea est\u00e1 usando o tema RWD com dados de exemplo):<\/p>\n\n\n\n![\"\"](\"https:\/\/www.magenteiro.com\/blog\/wp-content\/uploads\/2019\/09\/image-700x342.png\")
<\/figure>\n\n\n\n<\/p>\n\n\n\n
Cria\u00e7\u00e3o de um template phtml<\/h2>\n\n\n\n
Criarei o arquivo
app\/design\/frontend\/base\/default\/template\/magenteiro_orcamento\/form.phtml<\/code>. Ele ter\u00e1 o nosso formul\u00e1rio b\u00e1sico.<\/p>\n\n\n<h1>Novo Or\u00e7amento<\/h1>\n<form action="<?php echo Mage::getUrl('magenteiro_orcamento\/index\/post', ['_secure' => true]) ?>" method="post" id="orcamentoForm">\n <input type="hidden" name="form_key" value="<?php echo Mage::getModel('core\/session')->getFormKey();?>"\/>\n <fieldset name="Solicite um or\u00e7amento">\n <label for="name">Seu Nome<\/label>\n <input type="text" name="name" id="name" class="required-entry"\/>\n\n <br\/>\n <label for="email">Seu email<\/label>\n <input type="email" name="email" id="email" class="required-entry validate-email"\/>\n\n <br\/>\n <label for="message">Detalhes do or\u00e7amento *<\/label>\n <textarea id="message" name="message" class="required-entry" placeholder="Informe os detalhes do seu pedido" rows="10" cols="200"><\/textarea>\n <br\/>\n <div class="buttons-set">\n <button type="submit" title="Enviar" class="button"><span><span>Enviar<\/span><\/span><\/button>\n <\/div>\n <\/fieldset>\n<\/form>\n\n<script type="text\/javascript">\n\/\/<![CDATA[>\n var orcamentoForm = new VarienForm('orcamentoForm');\n\/\/]]>\n<\/script><\/pre>\n\n\nO que temos aqui:<\/p>\n\n\n\n
- Na linha 2 pedimos ao Magento para montar o url pra onde este formul\u00e1rio ser\u00e1 enviado, e se poss\u00edvel de forma segura (com https).<\/li>
- Note que tamb\u00e9m usamos classes css para valida\u00e7\u00e3o dos campos do nosso formul\u00e1rio. Nesse exemplo usamos
required-entry<\/code> evalidate-email<\/code>.<\/li>- Elas s\u00f3 ser\u00e3o validadas se chamarmos o
VarienForm<\/code>, como exibido na linha 24.<\/li><\/ul>\n\n\n\nO resto \u00e9 puro html, certo? \ud83d\ude42<\/p>\n\n\n\n
Inserindo nosso formul\u00e1rio via layout XML<\/h2>\n\n\n\n
Para que nosso
phtml<\/code> acima seja inserido na nossa p\u00e1gina de or\u00e7amento, precisamos fazer com que ele seja o template de um novo bloco e ent\u00e3o inserirmos ele viaLayoutXML<\/code>.<\/p>\n\n\n\nNeste exemplo n\u00e3o criarei um bloco php novo s\u00f3 pra isso. Mas usarei o bloco padr\u00e3o
core\/template<\/code> e passarei o caminho do nossophtml<\/code> como par\u00e2metrotemplate<\/code>.<\/p>\n\n\n\nDesta forma, vamos adicionar nosso arquivo de layout da seguinte forma:<\/p>\n\n\n
<?xml version="1.0" encoding="utf-8" ?>\n<layout>\n <magenteiro_orcamento_index_index>\n <reference name="content">\n <block name="magenteiro.orcamento.form" type="core\/template" template="magenteiro_orcamento\/form.phtml"\/>\n <\/reference>\n <\/magenteiro_orcamento_index_index>\n<\/layout><\/pre>\n\n\n
Como resultado, se acessarmos
\/orcamento<\/code> j\u00e1 poderemos ver nosso formul\u00e1rio.<\/p>\n\n\n\n![\"\"](\"https:\/\/www.magenteiro.com\/blog\/wp-content\/uploads\/2019\/09\/image-1-700x412.png\")
Formul\u00e1rio de or\u00e7amento j\u00e1 pode ser exibido.<\/figcaption><\/figure>\n\n\n\n Criando um template de e-mail<\/h2>\n\n\n\n
Para enviar um e-mail bonitinho, com html e seguindo os padr\u00f5es de e-mail do nosso tema, precisaremos criar um novo template de e-mail<\/strong>.<\/p>\n\n\n\n
Por padr\u00e3o, os templates de e-mail ficam localizados em
app\/locale\/<locale>\/template\/email<\/code>. Como minha loja de exemplo tem apenas o idioma(locale<\/em>) padr\u00e3o, criarei meu template dentro deen_US<\/code>. E para os fins deste exemplo, meu e-mail estar\u00e1 em Portugu\u00eas mesmo.<\/p>\n\n\n<!--@subject Novo Or\u00e7amento @-->\n<!--@vars\n{"var name":"Customer Name",\n"var email":"Customer Email",\n"var message":"Message"}\n@-->\n{{template config_path="design\/email\/header"}}\n{{inlinecss file="email-inline.css"}}\n\n<table cellpadding="0" cellspacing="0" border="0">\n <tr>\n <td class="action-content">\n <h1>Novo pedido de or\u00e7amento<\/h1>\n <p><strong>De: <\/strong> {{var name}} <{{var email}}><\/p>\n <br\/><br\/>\n <strong>Mensagem:<\/strong>\n <br\/>\n {{var message}}\n <\/td>\n <\/tr>\n<\/table>\n\n{{template config_path="design\/email\/footer"}}<\/pre>\n\n\nComo pode ver, o header<\/em> e footer<\/em> do nosso e-mail \u00e9 definido dentro de outros arquivos j\u00e1 existentes no Magento.<\/p>\n\n\n\n
Tamb\u00e9m podemos notar a presen\u00e7a de algumas vari\u00e1veis como
name<\/code>,email<\/code> emessage<\/code>. No pr\u00f3ximo e \u00faltimo passo vamos ver como fazer para passar os valores das vari\u00e1veis para o template de e-mail<\/strong> e us\u00e1-lo para enviar e-mails.<\/p>\n\n\n\nAntes disso precisaremos avisar o Magento que nosso m\u00f3dulo ir\u00e1 implementar um arquivo de template de e-mails. Isso ser\u00e1 \u00fatil caso voc\u00ea queira realizar customiza\u00e7\u00f5es nesta pe\u00e7a de e-mail via admin.<\/p>\n\n\n\n
Agora voltaremos ao nosso primeiro arquivo (config.xml)<\/strong> e adicionaremos o template de e-mail l\u00e1. Nosso arquivo final ficar\u00e1 assim.<\/p>\n\n\n\n
Enviando os dados do formul\u00e1rio por e-mail<\/h2>\n\n\n\n
Agora \u00e9 provavelmente a parte mais importante do nosso tutorial. O nosso IndexController receber\u00e1 os dados do formul\u00e1rio enviados em \/orcamento\/index\/post e enviar\u00e1 estes dados por e-mail.<\/p>\n\n\n\n
Portanto, vamos adicionar um m\u00e9todo chamado postAction<\/strong> \u00e0 nossa classe
Magenteiro_Orcamento_IndexController<\/code>. A classe final ficar\u00e1 assim:<\/p>\n\n\n<?php\n\nclass Magenteiro_Orcamento_IndexController extends Mage_Core_Controller_Front_Action\n{\n public function indexAction()\n {\n $this->loadLayout();\n $this->renderLayout();\n }\n\n public function postAction()\n {\n if (!$this->_validateFormKey()) {\n Mage::getSingleton('core\/session')->addError('Chave inv\u00e1lida. Recarregue a p\u00e1gina.');\n $this->_redirect('*\/*\/');\n return;\n }\n\n $name = $this->getRequest()->getParam('name', false);\n $email = $this->getRequest()->getParam('email', false);\n $message = $this->getRequest()->getParam('message', false);\n\n if (!$name || !$email || !$message) {\n Mage::getSingleton('core\/session')->addError('Preencha todos os campos.');\n return $this->_redirectReferer();\n }\n\n\n $emailTemplate = Mage::getModel('core\/email_template')->loadDefault('magenteiro_orcamento_email_template');\n\n \/\/Getting the Store E-Mail Sender Name.\n $senderName = Mage::getStoreConfig('trans_email\/ident_custom1\/name');\n\n \/\/Getting the Store General E-Mail.\n $senderEmail = Mage::getStoreConfig('trans_email\/ident_custom1\/email');\n\n \/\/Variables for Confirmation Mail.\n $emailTemplateVariables = array();\n $emailTemplateVariables['name'] = $name;\n $emailTemplateVariables['email'] = $email;\n $emailTemplateVariables['message'] = $message;\n\n \/\/Appending the Custom Variables to Template.\n $processedTemplate = $emailTemplate->getProcessedTemplate($emailTemplateVariables);\n\n $mail = new Zend_Mail('UTF-8');\n $mail->setType(Zend_Mime::MULTIPART_RELATED);\n $mail->setBodyHtml($processedTemplate);\n $mail->setFrom($senderEmail, $senderName);\n $mail->addTo($senderEmail, $senderName);\n $mail->setSubject('Novo orcamento');\n try{\n $transport = null;\n \/\/if Aschroder is enabled, we try to get the transport configured in the admin. Otherwise, it will use default sendmail.\n if(Mage::helper('core')->isModuleEnabled('Aschroder_SMTPPro')){\n $_helper = Mage::helper('smtppro');\n $transport = $_helper->getTransport();\n }\n \/\/Confimation E-Mail Send\n $mail->send($transport);\n }\n catch(Exception $error)\n {\n Mage::getSingleton('core\/session')->addError($error->getMessage());\n return $this->_redirectReferer();\n }\n Mage::getSingleton('core\/session')->addSuccess('Mensagem enviada com sucesso');\n return $this->_redirectReferer();\n\n }\n}<\/pre>\n<\/p>\n\n\n
Obviamente voc\u00ea ir\u00e1 querer fazer algumas melhorias nela, utilizar m\u00e9todos de tradu\u00e7\u00e3o, e adicionar algumas valida\u00e7\u00f5es extra do lado do PHP. <\/p>\n\n\n\n
Vamos ver o que fizemos aqui em cada linha<\/strong>:<\/p>\n\n\n\n
- 13~17: Validamos o form_key evitando assim ataques de XSS<\/li>
- 19~21: Pegamos os valores enviados via POST ou definimos
false<\/code> caso o valor n\u00e3o tenha vindo<\/li>- 23~26: Se os valores n\u00e3o foram passados, adicionamos uma mensagem de erro que ser\u00e1 exibida e redirecionamos o cliente de volta pra p\u00e1gina que enviou o formul\u00e1rio<\/li>
- 29: Carregamos o template definido no nosso config.xml<\/li>
- 32 e 35: Pegamos o nome e e-mail definidos em Sistema>Configura\u00e7\u00e3o>Endere\u00e7os de Email > Personalizado 1. \u00c9 pra l\u00e1 que enviaremos o e-mail com os dados do formul\u00e1rio.<\/li>
- 39~44: Definimos as vari\u00e1veis de template e passamos ela para o template. O e-mail formatado j\u00e1 com as vari\u00e1veis \u00e9 associado \u00e0 vari\u00e1vel
$processedTemplate<\/code>.<\/li>- 46~51: Como usaremos o Zend_Mail para disparar o e-mail, iniciaremos ele neste ponto e definiremos o tipo de mensagem que estamos enviando, o corpo da mensagem, remetentes e destinat\u00e1rios (no nosso caso, o mesmo), e assunto do e-mail.<\/li>
- 52~66: Enviamos o e-mail usando o m\u00e9todo send do Zend_Mail, mas com algo a mais que explicarei a seguir<\/li>
- 67~68: Adiciono a mensagem de sucesso e redireciono o cliente de volta para o formul\u00e1rio.<\/li><\/ul>\n\n\n\n
Alguns detalhes adicionais<\/h3>\n\n\n\n
Encoding<\/h4>\n\n\n\n
Como voc\u00ea p\u00f4de ver, usei o componente
Zend_Mail<\/code> ao inv\u00e9s de usar oMage::getModel('core\/email')<\/code>. Isso porque atrav\u00e9s dele eu n\u00e3o tinha como definir o encoding<\/em> da mensagem, desta forma enfrentando problemas de acentua\u00e7\u00e3o.<\/p>\n\n\n\nEnviando mensagens usando SMTP, Amazon, ou GMail no Magento<\/h4>\n\n\n\n
O m\u00f3dulo Aschroder_SMTPPro<\/a> \u00e9 o m\u00f3dulo mais usado no Magento 1 para estender o sistema de envio de e-mails do Magento. Desta forma, podemos enviar e-mails usando nosso pr\u00f3prio SMTP<\/strong>, GMail, Amazon Ses, Sendgrid, Mailup, entre outros.<\/p>\n\n\n\n
Por isso, nas linhas 53~58 eu verifico se o m\u00f3dulo do Aschroder est\u00e1 ativo na loja e utilizo as configura\u00e7\u00f5es que voc\u00ea definiu nele para fazer o disparo do e-mail.<\/p>\n\n\n\n
Caso ele n\u00e3o esteja definido e o
$transport<\/code> fornull<\/code>, oZend_Mail<\/code> usar\u00e1 o sendmail<\/a> padr\u00e3o configurado no seu ambiente.<\/p>\n\n\n\nM\u00f3dulo final<\/h2>\n\n\n\n
- Elas s\u00f3 ser\u00e3o validadas se chamarmos o
- Enviando via SMTP, Gmail, AWS, etc<\/a><\/li><\/ol><\/li>
- Cria\u00e7\u00e3o da rota b\u00e1sica<\/a><\/li>