Form de Contato + Produto

Escrito por Mario SAM

Você na posição de cliente já deixou de comprar algum produto pela internet porque ficou com dúvidas e não encontrou respostas claras no site? Eu já! Muitas vezes.

E o que você tem feito para evitar que este problema ocorra na sua loja virtual?

Uma alternativa bem prática e funcional, é oferecer ao cliente a sugestão: Ficou com dúvidas? Clique aqui.

Experimente fazer isso no seu site, e veja se o número de contatos não vai aumentar. As vezes tudo que o cliente precisa é de um pouco de atenção, saber que não está lidando com uma máquina.

E uma maneira de oferecer esse serviço sem ser intrusivo com pop-up’s de chat’s online, é fornecer um formulário de contato personalizado, que possui informações do produto em questão.

Criar o link de contato

O link de contato, na verdade é apenas um link simples, que vamos adicionar na página do produto, no local que acharmos mais conveniente – conforme seu leiaute.

Esse link pode ser criado tanto por XML, como diretamente nos arquivos phtml que constroem a página do produto. Vejamos então as duas maneiras:

1. Por xml talvez seja a forma mais organizada de inserir uma informação nova na página do produto, para isso abra o arquivo contacts.xml em:

app > design > frontend > base > default > layout > contacts.xml

Lembrando que você deve fazer uma cópia do arquivo xml em base/default para default/default, ou então para o seu diretório template/tema personalizado.

E insira o código abaixo:

<catalog_product_view translate="label">
    <reference name="alert.urls">
        <block type="page/template_links" name="product.links" as="productLinks">
            <action method="addLink" translate="label title"><label>Need a help? Contact Us!</label><url>contacts</url><title>Contact Us</title><prepare/><urlParams/><position>10</position></action>
        </block>
    </reference>
</catalog_product_view>

Nesse momento, se você salvar o arquivo e atualizar a página, já deve ver a alteração na página do produto. Talvez seja preciso atualizar o cache do sistema/navegador.

2. Inserindo direto no código phtml pode parecer a solução mais fácil, por não envolver xml, e também porque a maioria das pessoas tem maior facilidade em visualizar o código html sendo construído, do que o código xml. E é apenas por isso que estou apresentando essa alternativa. Então abra o arquivo view.phtml em:

app > design > frontend > base > default > template > catalog > product > view.phtml

Lembrando, faça uma cópia do base/default para default/default, ou então para seu template/tema personalizado.

Escolha o local da página que deseja inserir o link e coloque:

<p><a href="<?php echo $this->getUrl('contacts') ?>"><?php echo $this->__("Need a help? Contact Us!"); ?></a></p>

Salve tudo, atualize a página e veja o resultado. Talvez seja necessário atualizar o cache do sistema/navegador.

Criar o cookie

A estrutura para criar um cookie no Magento se resume em:

<?php Mage::getModel('core/cookie')->set( nome do cookie, valor do cookie, periodo de vida do cookie, caminho, domínio, segurança, httponly ); ?>

Apenas o nome e valor são obrigatórios, os demais campos são opcionais, e se não forem preenchidos ficarão como nulos.

Vamos utilizar a página de visualização do produto (view.phtml) para criarmos nosso cookie e armazenar as informações de que precisamos. Então no final deste arquivo insira o código:

<?php Mage::getModel('core/cookie')->set("frmContactProduct", $_helper->productAttribute($_product, $_product->getName(), 'name') ); ?>

Uma alternativa seria utilizar sessão (session) ao invés de cookies. Mas neste exemplo vamos nos ater apenas aos cookies para não confundir as idéias.

Recuperar o cookie

A recuperação dos valores do cookie vai acontecer na página de formulário de contato do Magento. Então abra o arquivo form.phtml que fica em:

app > design > frontend > base > default > template > contacts > form.phtml

Faça uma cópia do arquivo base/default para default/default, ou para seu template/tema personalizado.

E dentro do form insira os campos:

<li class="wide">
    <?php echo Mage::getModel('core/cookie')->get('frmContactProduct'); ?>
    <input name="product" id="product" value="<?php echo Mage::getModel('core/cookie')->get('frmContactProduct'); ?>" type="hidden" />
</li>

Veja que dentro do atributo value estamos recuperando o valor salvo no cookie.

Depois que recuperamos o valor armazenado, podemos limpar o cookie. Para isso basta informar valores em branco nas variáveis anteriores.

<?php Mage::getModel('core/cookie')->set("frmContactProduct", ""); ?>

Feito isso, vamos para a última etapa do processo.

O email de contato

Como criamos novos campos no formulário de contato, precisamos informar estes novos campos no template do email para possam ser enviados junto com o formulário. Acesse seu backend e navegue em:

Sistema > Emails de Transação [Criar Modelo]

Carregue o modelo de Formulário de Contato, e no conteúdo insira as novas variáveis:

Produto: {{var data.product}}
Nome: {{var data.name}}
Email: {{var data.email}}
Telefone: {{var data.telephone}}
Mensagem: {{var data.comment}}

E com isso finalizamos os trabalhos. Atualize o cache e faça os testes.

Criado na versão 1.4.x e testado na versão 1.7.x

Sucesso!

O Autor

Mario SAM

Graduado em Web Design e Programação, com pós-graduação em Gestão de Projetos e TI, MBA em Marketing, Mestrado (incompleto) em Comércio Eletrônico e Internet, Estudante de Educação Física e faixa-preta em Taekwondo. Também possui as certificações Google Analytics, Sun Java Certified, Magento Developer e a Magento Front-End Developer.

Magento FrontEnd Developer Certification  Magento Developer Certification