jQuery Mask (Solução)

Como não há nenhum suporte desse plugin horrível, vou deixar aqui uma solução que encontrei que pode ajudar alguém que está enfrentando esse problema.

Problema: A máscara de telefone do plugin inserida através do jQuery Mask conflita com outras soluções que oferecem máscaras/validação dos campos de telefone (Ex: Fluid Checkout Pro, etc). Pode afetar principalmente lojas que fazem vendas para diversos países além do Brasil.

Caso de estudo: Pois bem, em minha loja utilizo o plugin Fluid Checkout Pro com a opção de telefones internacionais ativada. Esse plugin utiliza uma solução chamada de “intlTelInput”, uma biblioteca amplamente usada para inserção de máscaras e validação de campos de telefone do mundo inteiro. Utilizo essa opção, pois isso traz mais comodidade para o usuário, já que ele pode escolher a bandeira do país do seu número, e o campo automaticamente é preenchido com o código daquele país e a formatação correta. Foi então que passei a ter diversos problemas de conflito entre o “intlTelInput” e o jQuery Mask (presente no Brazilian Market) e resolvi então desativar o jQuery, já que a outra solução é mais completa e oferece suporte para todos os países que eu vendo. Foi aí que começou as surpresas. Não há como desativar a máscara de campos de forma nativa (o programador não quis colocar essa solução como uma chave para ativar/desativar). Tentei através de códigos snippets: Não funciona! Tentei através de javascript: Não funciona! Tentei até mesmo modificar os arquivos do plugin, comentando as linhas no frontend.js, resultado: Não funciona! No desespero, excluí a pasta do jQuery Mask do plugin, resultado: O campo de telefone ainda estava usando a máscara do jQuery. Passei horas (muitas horas) buscando uma alternativa para desabilitar o jQuery e não havia nenhuma solução, a única forma de desabilitar, era desativando o plugin inteiro (Brazilian Market), mas aí não é possível vender para o Brasil, já que até hoje não há uma solução por parte do Woocommerce que atenda o mercado, nos obrigando a usar essa “bomba sem suporte” para poder vender para cá. Até mesmo os gateways brasileiros exigem esse plugin terrível! Bom, após muito tempo e graças a ajuda incansável do chatgpt, descobri uma solução para desativar o jQuery Mask desse plugin (que mais parece ter sido inserido como um vírus), que compartilho com vocês agora:

Solução: Adicione esse código usando um plugin de snippet ou outro:

add_action( 'wp_enqueue_scripts', 'override_mask_for_phone_field', 999 ); function override_mask_for_phone_field() { wp_add_inline_script( 'woocommerce-extra-checkout-fields-for-brazil-front', " (function($){ var originalMask = $.fn.mask; $.fn.mask = function(pattern, options) { // Se o elemento for o campo de telefone ou celular, não aplica a máscara if ( this.attr('id') === 'billing_phone' || this.attr('id') === 'billing_cellphone' ) { return this; } return originalMask.apply(this, arguments); }; })(jQuery); " ); }

Essa função utiliza um handle (que demorou para ser descoberto) (woocommerce-extra-checkout-fields-for-brazil-front) do plugin, “sequestrando” a requisição e aplicando a solução antes que ele seja inserido na página.

A solução só atua no campo de telefone (billing_phone), mas pode ser estendida para outros campos onde a máscara do jQuery Mask é adotada, se necessário.

Por fim, isso desativa o jQuery Mask e permite que você utilize outras soluções para aplicar máscaras no campo de telefone.