Vejo frequentemente essa pergunta nos fóruns: Como adicionar máscara de CPF? Como adicionar máscara no campo telefone? Como colocar máscara de data? E para cada pergunta uma resposta diferente.
Então resolvi ser igual a todo mundo e fazer diferente. Se você ainda não ligou o nome à pessoa, eis aqui alguns exemplos de máscaras:
(99) 9999-9999 99/99/9999 999.999.999-99
Sim. Máscaras servem para padronizar os campos de input dos formulários, tornando assim seus formulários mais profissionais e garantindo uma maior integridade dos dados fornecidos ao sistema.
Atenção! Formatar o campo não significa que você esteja validando seu preenchimento – são etapas distintas.
O javascript mascarado
Não vamos reinventar a roda, se alguém já criou um bom “plugin” de máscaras em javascript, tudo que precisamos fazer é encontrar e adaptar.
Por isso vamos usar o código do projeto MaskedInput disponível em: https://github.com/bjartekv/MaskedInput
Faça o download do arquivo maskedinput.js para o diretório:
skin > frontend > default > default > js > maskedinput.js
Com isso você acabou de “instalar” o plugin no seu tema.
Problema de versão
Esse plugin foi escrito usando prototype, o mesmo framework utilizado pelo Magento. Porém, ele funciona com prototype 1.6.1.0 (ou superior). E o Magento até a versão CE 1.5.x vem com prototype 1.6.0.3 – ou seja, inferior.
Para verificar sua versão do prototype abra o arquivo:
js > prototype > prototype.js
Logo no início do arquivo possui a informação de versão, algo como:
Version: '1.6.0.3',
Para atualizar é simples, basta fazer uma cópia do arquivo prototype.js de uma versão mais recente do Magento, ou então acessar o site oficial do framework e baixar a versão mais recente: http://prototypejs.org/download/
Preparando as telas
Nem todas as páginas do seu site possuem um formulário de cadastro. E nem todo formulário exige o uso de máscaras para padronizar os campos.
Por isso vamos carregar o arquivo maskedinput.js apenas quando for necessário, evitando assim sobrecarregar páginas que não fazem uso de máscaras. Para isso crie (ou edite) o arquivo local.xml que fica em:
app > design > frontend > default > default > layout > local.xml
Agora basta indicar as telas que precisam carregar o javascript, e usar a dica do post: Como adicionar javascript ao código. Temos então:
skin_jsjs/maskedinput.js
Nesse exemplo estamos solicitando que seja carregado o arquivo maskedinput.js na tela customer_account_create, ou seja, na página de cadastro de clientes (nova conta).
O mesmo pode ser feito para qualquer outra tela do sistema, basta adicionar sua referência dentro das tags de layout.
Com que máscara eu vou?
Com toda estrutura pronta, basta escolhermos o campo e informar o tipo de máscara que iremos utilizar.
Como eu optei por carregar o formulário de cadastro de novo usuário, vou usar o campo CPF como exemplo – que no Magento é chamado de “taxvat“. Então vamos editar o arquivo:
app > design > frontend > base > default > template > customer > widget > taxvat.phtml
Não altere arquivos em base/default, faça uma cópia para default/default ou para o seu template/tema customizado.
Quer saber como encontrar os arquivos phtml’s corretos? Use a dica do post: Qual arquivo alterar? Debug.
Agora basta você usar o código em javascript no formato:
new MaskedInput('#nome-do-input', 'formato-da-mascara-aqui');
Neste exemplo então teremos no final do arquivo:
//<![CDATA[
new MaskedInput('#getFieldId('taxvat')?>', '999.999.999-99');
//]]>
Perceba que estou passando o ID do input da mesma forma como ele é carregado na tela (dinâmicamente), e ao lado o formato da máscara de CPF.
Basta salvar, atualizar o cache do sistema e do navegador.
Outras referências
É interessante ver como outras pessoas estão fazendo para inserir máscaras no Magento. Assim você abre o seu leque de opções e pode decidir qual solução é mais adequada ao seu projeto.
Colocando máscara de DDD no telefone – MagentoBR
Máscara de CEP e módulo matrix rate – Primeiros Passos Magento
Caso queira validar os campos CPF e CNPJ de forma segura (server-side) leia os posts: Validar CPF em Server-Side e Validar CNPJ em Server-Side.
Dúvidas? Use o fórum da Escola Magento.
Sucesso!