Criando um formulário de contato no Magento 1
Backend, Desenvolvimento, Magento 1
Atualizado em 14 de abril de 2020
Neste tutorial vamos ver como criar um formulário de contato personalizado no Magento 1. Desta forma, abordaremos:
Índice
- Introdução: o que vamos fazer
- Criação da rota básica
- Criação do arquivo de template phtml do formulário
- Inserindo o formulário via Layout XML
- Criando um template de e-mail
- Disparando e-mail com os dados do formulário
- Detalhes e explicações adicionais
- Módulo final para download
- Conclusão
O que vamos fazer
Antes de começar, vou assumir que você já criou um módulo base para Magento 1. Veja como criar um módulo básico para Magento 1.
Para o nosso exemplo, chamaremos esse módulo de Magenteiro_Orçamento e colocarei ele no codePool community.
Ele exibirá um formulário básico com alguns campos quando o cliente/visitante acessar o URL /orcamento.
Criação da rota
Nosso controller nesse momento irá apenas carregar o layout padrão do Magento. Desta forma, teremos dois arquivos:
<?xml version="1.0"?>
<config>
<modules>
<Magenteiro_Orcamento>
<version>1.0.0</version>
</Magenteiro_Orcamento>
</modules>
<frontend>
<routers>
<magenteiro_orcamento>
<use>standard</use>
<args>
<frontName>orcamento</frontName>
<module>Magenteiro_Orcamento</module>
</args>
</magenteiro_orcamento>
</routers>
</frontend>
</config>
No primeiro arquivo declaramos uma nova rota que será atendida pelo nome /orcamento.
No segundo arquivo pedimos para o Magento carregar o layout padrão e renderizá-lo.
Ao acessarmos /orcamento ou /orcamento/index teremos algo como a imagem abaixo (se você está usando o tema RWD com dados de exemplo):
Criação de um template phtml
Criarei o arquivo app/design/frontend/base/default/template/magenteiro_orcamento/form.phtml. Ele terá o nosso formulário básico.
<h1>Novo Orçamento</h1>
<form action="<?php echo Mage::getUrl('magenteiro_orcamento/index/post', ['_secure' => true]) ?>" method="post" id="orcamentoForm">
<input type="hidden" name="form_key" value="<?php echo Mage::getModel('core/session')->getFormKey();?>"/>
<fieldset name="Solicite um orçamento">
<label for="name">Seu Nome</label>
<input type="text" name="name" id="name" class="required-entry"/>
<br/>
<label for="email">Seu email</label>
<input type="email" name="email" id="email" class="required-entry validate-email"/>
<br/>
<label for="message">Detalhes do orçamento *</label>
<textarea id="message" name="message" class="required-entry" placeholder="Informe os detalhes do seu pedido" rows="10" cols="200"></textarea>
<br/>
<div class="buttons-set">
<button type="submit" title="Enviar" class="button"><span><span>Enviar</span></span></button>
</div>
</fieldset>
</form>
<script type="text/javascript">
//<![CDATA[>
var orcamentoForm = new VarienForm('orcamentoForm');
//]]>
</script>
O que temos aqui:
- Na linha 2 pedimos ao Magento para montar o url pra onde este formulário será enviado, e se possível de forma segura (com https).
- Note que também usamos classes css para validação dos campos do nosso formulário. Nesse exemplo usamos
required-entryevalidate-email. - Elas só serão validadas se chamarmos o
VarienForm, como exibido na linha 24.
O resto é puro html, certo? 🙂
Inserindo nosso formulário via layout XML
Para que nosso phtml acima seja inserido na nossa página de orçamento, precisamos fazer com que ele seja o template de um novo bloco e então inserirmos ele via LayoutXML.
Neste exemplo não criarei um bloco php novo só pra isso. Mas usarei o bloco padrão core/template e passarei o caminho do nosso phtml como parâmetro template.
Desta forma, vamos adicionar nosso arquivo de layout da seguinte forma:
<?xml version="1.0" encoding="utf-8" ?>
<layout>
<magenteiro_orcamento_index_index>
<reference name="content">
<block name="magenteiro.orcamento.form" type="core/template" template="magenteiro_orcamento/form.phtml"/>
</reference>
</magenteiro_orcamento_index_index>
</layout>
Como resultado, se acessarmos /orcamento já poderemos ver nosso formulário.
Criando um template de e-mail
Para enviar um e-mail bonitinho, com html e seguindo os padrões de e-mail do nosso tema, precisaremos criar um novo template de e-mail.
Por padrão, os templates de e-mail ficam localizados em app/locale/<locale>/template/email. Como minha loja de exemplo tem apenas o idioma(locale) padrão, criarei meu template dentro de en_US. E para os fins deste exemplo, meu e-mail estará em Português mesmo.
<!--@subject Novo Orçamento @-->
<!--@vars
{"var name":"Customer Name",
"var email":"Customer Email",
"var message":"Message"}
@-->
{{template config_path="design/email/header"}}
{{inlinecss file="email-inline.css"}}
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td class="action-content">
<h1>Novo pedido de orçamento</h1>
<p><strong>De: </strong> {{var name}} <{{var email}}></p>
<br/><br/>
<strong>Mensagem:</strong>
<br/>
{{var message}}
</td>
</tr>
</table>
{{template config_path="design/email/footer"}}
Como pode ver, o header e footer do nosso e-mail é definido dentro de outros arquivos já existentes no Magento.
Também podemos notar a presença de algumas variáveis como name, email e message. No próximo e último passo vamos ver como fazer para passar os valores das variáveis para o template de e-mail e usá-lo para enviar e-mails.
Antes disso precisaremos avisar o Magento que nosso módulo irá implementar um arquivo de template de e-mails. Isso será útil caso você queira realizar customizações nesta peça de e-mail via admin.
Agora voltaremos ao nosso primeiro arquivo (config.xml) e adicionaremos o template de e-mail lá. Nosso arquivo final ficará assim.
Enviando os dados do formulário por e-mail
Agora é provavelmente a parte mais importante do nosso tutorial. O nosso IndexController receberá os dados do formulário enviados em /orcamento/index/post e enviará estes dados por e-mail.
Portanto, vamos adicionar um método chamado postAction à nossa classe Magenteiro_Orcamento_IndexController. A classe final ficará assim:
<?php
class Magenteiro_Orcamento_IndexController extends Mage_Core_Controller_Front_Action
{
public function indexAction()
{
$this->loadLayout();
$this->renderLayout();
}
public function postAction()
{
if (!$this->_validateFormKey()) {
Mage::getSingleton('core/session')->addError('Chave inválida. Recarregue a página.');
$this->_redirect('*/*/');
return;
}
$name = $this->getRequest()->getParam('name', false);
$email = $this->getRequest()->getParam('email', false);
$message = $this->getRequest()->getParam('message', false);
if (!$name || !$email || !$message) {
Mage::getSingleton('core/session')->addError('Preencha todos os campos.');
return $this->_redirectReferer();
}
$emailTemplate = Mage::getModel('core/email_template')->loadDefault('magenteiro_orcamento_email_template');
//Getting the Store E-Mail Sender Name.
$senderName = Mage::getStoreConfig('trans_email/ident_custom1/name');
//Getting the Store General E-Mail.
$senderEmail = Mage::getStoreConfig('trans_email/ident_custom1/email');
//Variables for Confirmation Mail.
$emailTemplateVariables = array();
$emailTemplateVariables['name'] = $name;
$emailTemplateVariables['email'] = $email;
$emailTemplateVariables['message'] = $message;
//Appending the Custom Variables to Template.
$processedTemplate = $emailTemplate->getProcessedTemplate($emailTemplateVariables);
$mail = new Zend_Mail('UTF-8');
$mail->setType(Zend_Mime::MULTIPART_RELATED);
$mail->setBodyHtml($processedTemplate);
$mail->setFrom($senderEmail, $senderName);
$mail->addTo($senderEmail, $senderName);
$mail->setSubject('Novo orcamento');
try{
$transport = null;
//if Aschroder is enabled, we try to get the transport configured in the admin. Otherwise, it will use default sendmail.
if(Mage::helper('core')->isModuleEnabled('Aschroder_SMTPPro')){
$_helper = Mage::helper('smtppro');
$transport = $_helper->getTransport();
}
//Confimation E-Mail Send
$mail->send($transport);
}
catch(Exception $error)
{
Mage::getSingleton('core/session')->addError($error->getMessage());
return $this->_redirectReferer();
}
Mage::getSingleton('core/session')->addSuccess('Mensagem enviada com sucesso');
return $this->_redirectReferer();
}
}
Obviamente você irá querer fazer algumas melhorias nela, utilizar métodos de tradução, e adicionar algumas validações extra do lado do PHP.
Vamos ver o que fizemos aqui em cada linha:
- 13~17: Validamos o form_key evitando assim ataques de XSS
- 19~21: Pegamos os valores enviados via POST ou definimos
falsecaso o valor não tenha vindo - 23~26: Se os valores não foram passados, adicionamos uma mensagem de erro que será exibida e redirecionamos o cliente de volta pra página que enviou o formulário
- 29: Carregamos o template definido no nosso config.xml
- 32 e 35: Pegamos o nome e e-mail definidos em Sistema>Configuração>Endereços de Email > Personalizado 1. É pra lá que enviaremos o e-mail com os dados do formulário.
- 39~44: Definimos as variáveis de template e passamos ela para o template. O e-mail formatado já com as variáveis é associado à variável
$processedTemplate. - 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ários (no nosso caso, o mesmo), e assunto do e-mail.
- 52~66: Enviamos o e-mail usando o método send do Zend_Mail, mas com algo a mais que explicarei a seguir
- 67~68: Adiciono a mensagem de sucesso e redireciono o cliente de volta para o formulário.
Alguns detalhes adicionais
Encoding
Como você pôde ver, usei o componente Zend_Mail ao invés de usar o Mage::getModel('core/email'). Isso porque através dele eu não tinha como definir o encoding da mensagem, desta forma enfrentando problemas de acentuação.
Enviando mensagens usando SMTP, Amazon, ou GMail no Magento
O módulo Aschroder_SMTPPro é o módulo 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óprio SMTP, GMail, Amazon Ses, Sendgrid, Mailup, entre outros.
Por isso, nas linhas 53~58 eu verifico se o módulo do Aschroder está ativo na loja e utilizo as configurações que você definiu nele para fazer o disparo do e-mail.
Caso ele não esteja definido e o $transport for null, o Zend_Mail usará o sendmail padrão configurado no seu ambiente.
Módulo final
Se desejar, informe seu nome e e-mail e receba o módulo que criamos acima (Magenteiro_Orcamento) em seu e-mail.
Conclusão e Considerações
Você não precisa criar um módulo inteiro como esse apenas para ter um formulário de contato. Como sabemos, o Magento tem isso nativamente quando acessamos /contacts em nossa loja.
No entanto, a ideia deste artigo-tutorial é mostrar como podemos fazer um formulário personalizado e lidar com o disparo de e-mails no Magento 1.
Fiz algo bem parecido aqui no Magenteiro, a fim de permitir que os alunos dos cursos enviassem feedbacks e apontassem erros sobre aulas específicas. Ao clicar em “Enviar Feedback” são redirecionados para uma página de feedback. O formulário é enviado pra mim com alguns detalhes adicionais, e código interno da aula em que o problema foi reportado.
Gostou deste tutorial?
Foram mais de 3 horas para organizar e preparar este conteúdo pra você. Se você gostou, compartilhe, comente e não deixe de conhecer o Curso de Criação de Módulos para Magento 1.9 ou os outros cursos de Magento que tenho para você.
- PagSeguro (PagBank) para Magento 1 recebe a Nova Geração - 9 de abril de 2024
- Recorrência no WooCommerce Sem Plugins Pagos - 28 de janeiro de 2024
- Chargeback. O que é, e como se livrar deles. - 19 de dezembro de 2023
Deixe seu comentário
[fbcomments url="https://www.magenteiro.com/blog/magento-1/criando-um-formulario-de-contato/"]