Após a nova atualização do Woocommerce para a versão 3.5, muitas pessoas andam relatando um problema em que os campos do checkout não estão aplicando as máscaras.
Por que do problema?
O javascript responsável por chamar a função de “máscaras” só é aplicado quando há uma mudança no campo “País”, na verdade o correto seria aplicar as máscaras caso o país selecionado seja o Brasi, ou tenha alguma mudança no campo “País” e o mesmo seja o Brasil.
A solução
Aqui vai uma solução rápida e prática para solucionar esse problema.
Dentro da pasta: wp-content/plugins/woocommerce-extra-checkout-fields-for-brazil/assets/js/frontend/
Altere os arquivos frontend.js e frontend.min.js
frontend.js
Após a linha 22 acrescente ao código:
if ( 'BR' === $( '#billing_country' ).val() ) { wc_ecfb_frontend.maskBilling(); }
frontend.min.js
Como esse arquivo está comprimido é melhor enviar o arquivo todo, segue o código comprimido com a alteração:
jQuery(function(e){var i={init:function(){"0"===wcbcf_public_params.sort_state_country&&e(document.body).on("country_to_state_changing",this.country_to_state_changing),"0"!==wcbcf_public_params.person_type&&this.person_type_fields(),"yes"===wcbcf_public_params.maskedinput&&("BR"===e("#billing_country").val()&&i.maskBilling(),e(document.body).on("change","#billing_country",function(){"BR"===e(this).val()?i.maskBilling():i.unmaskBilling()}),e(document.body).on("change","#shipping_country",function(){"BR"===e(this).val()?i.maskShipping():i.unmaskShipping()}),this.maskGeneral()),"yes"===wcbcf_public_params.mailcheck&&this.emailCheck(),"yes"===wcbcf_public_params.addresscomplete&&(this.addressAutoComplete("billing"),this.addressAutoCompleteOnChange("billing"),this.addressAutoComplete("shipping"),this.addressAutoCompleteOnChange("shipping")),e().select2&&e(".wc-ecfb-select").select2()},country_to_state_changing:function(){e("#billing_state_field label").html(wcbcf_public_params.state+' <abbr class="required" title="'+wcbcf_public_params.required+'">*</abbr>'),e("#billing_postcode_field").insertAfter("#billing_country_field"),e("#shipping_state_field").length&&(e("#shipping_state_field label").html(wcbcf_public_params.state+' <abbr class="required" title="'+wcbcf_public_params.required+'">*</abbr>'),e("#shipping_postcode_field").insertAfter("#shipping_country_field"))},person_type_fields:function(){"no"===wcbcf_public_params.only_brazil?(e(".person-type-field label .required").remove(),e(".person-type-field").addClass("validate-required"),e(".person-type-field label").append(' <abbr class="required" title="'+wcbcf_public_params.required+'">*</abbr>')):e("#billing_country").on("change",function(){"BR"===e(this).val()?(e(".person-type-field label .required").remove(),e(".person-type-field").addClass("validate-required"),e(".person-type-field label").append(' <abbr class="required" title="'+wcbcf_public_params.required+'">*</abbr>')):(e(".person-type-field").removeClass("validate-required"),e(".person-type-field label .required").remove())}).change(),"1"===wcbcf_public_params.person_type&&e("#billing_persontype").on("change",function(){var i=e(this).val();e("#billing_cpf_field").hide(),e("#billing_rg_field").hide(),e("#billing_company_field").hide(),e("#billing_cnpj_field").hide(),e("#billing_ie_field").hide(),"1"===i&&(e("#billing_cpf_field").show(),e("#billing_rg_field").show()),"2"===i&&(e("#billing_company_field").show(),e("#billing_cnpj_field").show(),e("#billing_ie_field").show())}).change()},maskBilling:function(){i.maskPhone("#billing_phone, #billing_cellphone"),e("#billing_birthdate").mask("00/00/0000"),e("#billing_postcode").mask("00000-000"),e("#billing_phone, #billing_cellphone, #billing_birthdate, #billing_postcode").attr("type","tel")},unmaskBilling:function(){e("#billing_phone, #billing_cellphone, #billing_birthdate, #billing_postcode").unmask().attr("type","text")},maskShipping:function(){e("#shipping_postcode").mask("00000-000").attr("type","tel")},unmaskShipping:function(){e("#shipping_postcode").unmask().attr("type","text")},maskGeneral:function(){e("#billing_cpf, #credit-card-cpf").mask("000.000.000-00"),e("#billing_cnpj").mask("00.000.000/0000-00"),i.maskPhone("#credit-card-phone")},maskPhone:function(i){var l=function(e){return 11===e.replace(/\D/g,"").length?"(00) 00000-0000":"(00) 0000-00009"},n={onKeyPress:function(e,i,n,t){n.mask(l.apply({},arguments),t)}};e(i).mask(l,n)},emailCheck:function(){e("#wcbcf-mailsuggest").length<1&&e("#billing_email").after('<div id="wcbcf-mailsuggest"></div>'),e("#billing_email").on("blur",function(){e("#wcbcf-mailsuggest").html(""),e(this).mailcheck({suggested:function(i,l){e("#wcbcf-mailsuggest").html("Você quis dizer: "+l.full+"?")}})}),e("#wcbcf-mailsuggest").css({color:"#c00",fontSize:"small"})},addressAutoComplete:function(i){if(e("#"+i+"_postcode").length){var l=e("#"+i+"_postcode").val().replace(".","").replace("-",""),n=e("#"+i+"_country").val(),t=e("#"+i+"_address_1").val();""!==l&&8===l.length&&"BR"===n&&0===t.length&&e.ajax({type:"GET",url:"//correiosapi.apphb.com/cep/"+l,dataType:"jsonp",crossDomain:!0,contentType:"application/json",success:function(l){""!==l.tipoDeLogradouro?e("#"+i+"_address_1").val(l.tipoDeLogradouro+" "+l.logradouro).change():e("#"+i+"_address_1").val(l.logradouro).change(),e("#"+i+"_neighborhood").val(l.bairro).change(),e("#"+i+"_city").val(l.cidade).change(),e("#"+i+"_state option:selected").attr("selected",!1).change(),e("#"+i+'_state option[value="'+l.estado+'"]').attr("selected","selected").change(),e("#"+i+"_state").trigger("liszt:updated").trigger("chosen:updated")}})}},addressAutoCompleteOnChange:function(l){e(document.body).on("blur","#"+l+"_postcode",function(){i.addressAutoComplete(l)})}};i.init()});
Ou se preferir pode baixar os dois arquivos atualizados aqui: FIX-WC3.5.woocommerce-extra-checkout-fields-for-brazil.zip
Espero ter ajudado, dúvidas ou sugestões deixem nos comentários.
Me ajudou bastante Juliano!
Mas por algum motivo não está funcionando no Celular, saberia dizer por que?
Abraço,
Victor
No meu infelizmente não funcionou. Está todo desalinhado e faltando a label de complemento de endereço.
Abraços!
Bom dia Leonardo, esse tutorial é para corrigir o problema das máscaras, quanto ao desalinhamento eu estou verificando e tentando ajustar, assim que estiver ok vou postar um tutorial também.
Show! Funcionou perfeitamente.
Para a questão do campo de complemento, utilizei uma jogada de CSS.
Já que o que desalinha o campo é a falta de um titulo, inclui uma margem no topo pra compensar.
——
#billing_address_2 {
margin-top: 2.1em;
}
—–
As máscaras só estão funcionando nos campos do CPF e CNPJ.
Existe alguma validação para colocar no “EDITAR CAMPO” do telefone e celular? Ou ativou o plugin e eles já deveriam funcionar?
Obrigado!
Pronto! Baixei os dois arquivos atualizados e substitui. Funcionou bem. Muito obrigado!
Olá Juliano, seu código salvou meu dia!!!!
Só que esse problema de máscara agora, aparece na data de nascimento.
Estou usando o plugin da gerencianet para pagamentos, e sempre explode algum bug nesse plugin, tá brabo. hahaha
Ainda bem que com o seu código, consegui resolver o problema da máscara do telefone, agora, é a data de nascimento que apresenta o mesmo erro de máscara. hahaha
Se puder me ajudar, ou alguém tenha alguma solução, ficarei muito grato!