Por padrão, os usuários podem inserir qualquer combinação de letras, dígitos e outros símbolos como seus números de telefone. Mas você pode configurar uma máscara de entrada para o campo de perfil correspondente, para que os usuários precisem digitar seus números de telefone em um formato específico.
Para configurar a máscara que impede que os usuários insiram seqüências aleatórias de caracteres como seus números de telefone, siga estas etapas:
Etapa 1. Ativar máscaras de entrada
Faça algumas alterações no código para ativar as máscaras de entrada:
1.1. Vá para o diretório de instalação da sua loja.
1.2. Abra o arquivo scripts.tpl no diretório design / themes / responsive / templates / common .
Substitua responsivo no caminho para scripts.tpl pelo nome do seu tema ativo, se você usar qualquer tema diferente de Responsivo .
1.3. Encontre esta linha:
{ script src = "js / lib / aparecer / jquery.appear-1.1.1.js" }
1.4. Depois de encontrar a linha, adicione a seguinte linha logo abaixo:
{ script src = "js / lib / inputmask / jquery.inputmask.min.js" }
1.5. Encontre este código:
{ if $ config . ajustes . anti_csrf }
...
{ / if }
1.6. Depois de encontrar o código, adicione a seguinte linha logo abaixo:
$ ( ": input" ) . inputmask ();
1.7. Abra o arquivo profile_fields.tpl no diretório design / themes / responsive / templates / views / profiles / components .
Substitua responsivo no caminho para profile_fields.tpl pelo nome do seu tema ativo, se você usar qualquer tema diferente de Responsivo .
1.8. Encontre o seguinte código:
{ else } { * Entrada simples * } < input { if $ field . autocomplete_type } x - autocompletetype = " { $ campo . autocomplete_type } " { / if } tipo = "texto" id = " { $ id_prefix } elm_ { $ campo . campo_id } " nome = " {
$ data_name } [ { $ data_id } ] " size = " 32 " valor = " { $ valor } " class = " ty-input-texto {se! $ skip_field } { $ _class } {else} cm-skip-avail-switch {/ if} {if $ smarty .foreach.profile_fields.index == 0} cm-focus {/ if} " { if ! $ skip_field } { $ disabled_param nofilter } { / if } />
{ / if }
1.9. Adicione a condição ao código, para que fique assim:{if $field.field_type == "P"} data-inputmask="'mask': '(999) 999-9999'" {/if}
{ else } { * Entrada simples * } < input { if $ field . field_type == "P" } data - inputmask = "'mask': '(999) 999-9999'" { / if } { se $ campo . autocomplete_type } x - autocompletetype = " { $ field . autocomplete_type } " { / if } type = "text"
id = " { $ id_prefix } elm_ { $ field . FIELD_ID } " nome = " { $ DATA_NAME } [ { $ data_id } ]" tamanho = "32" valor = " { $ value } " class = "ty-input-texto {if } $ skip_field } { $ _class } {else} cm-skip-avail-switch {/ if} {if $ smarty .foreach.profile_fields.index == 0} cm-focus {/ if} " { se ! $ skip_field } { $ disabled_param nofilter } { / if } />
{ / if }
Agora, essa máscara de entrada será aplicada a todos os campos de entrada que têm o Telefone como seu tipo.
A máscara de entrada que especificamos é (999) 999-999 ; Isso significa que os usuários só poderão inserir dígitos e apenas no formato especificado. Você pode criar máscaras de entrada que permitem letras e peças opcionais - saiba mais na página de documentação do jquery.inputmask .
Etapa 2. Adicionar novos campos de perfil para números de telefone
Os campos de perfil padrão para números de telefone têm o tipo de campo Entrada , portanto, a máscara de entrada não se aplica a eles. Precisamos criar novos campos de perfil com o tipo Telefone .
2.1. Faça o login no painel de administração da sua loja.
2.2. Vá para Administração → Campos de Perfil .
2.3. Clique no botão + para adicionar um novo campo.
2.4. Digite as informações sobre o novo campo de perfil. Eu nomeei o campo Número de telefone para evitar dois campos de telefone diferentes .
Certifique-se de definir Type como Phone , para que a máscara de entrada seja aplicada a esse campo.
2.5. Clique no botão Criar .
2.6. Marque as caixas de seleção para determinar quais campos mostrar e onde mostrá-los. Clique em Salvar para salvar suas alterações.
2.7. Verifique como a máscara funciona: abra sua loja e tente se registrar como cliente ou editar seus próprios dados na área do cliente. Quando você tenta preencher o campo Número do telefone , você deve ver a máscara de entrada.
Se você não conseguir ver nenhuma alteração, tente limpar o cache: exclua o diretório var / cache de sua loja e atualize a página em seu navegador.
Se você quiser usar o mesmo formato de número de telefone na seção Endereço de faturamento / envio , crie um campo de entrada adicional com o Tipo definido como Telefone e a seção definida como Endereço para cobrança / Endereço para envio . Mostrar este novo campo em vez do campo Telefone existente .