Как включить маску в полях Woocommerce? Например. Телефон: (99) 9999-9999

Question

Согласно документации WC, если я хочу, чтобы добавить новое поле в прикассовой зоне, я должен написать следующий код в functions.php:

/* Add the field to the checkout*/ 
add_action('woocommerce_after_order_notes', 'my_custom_checkout_field'); 

function my_custom_checkout_field($checkout) { 
echo '<div id="my_custom_checkout_field" class="my_new_field"><h2>' . __('My Field') . '</h2>'; 

woocommerce_form_field('my_field_name', array(
    'type'   => 'text', 
    'class'   => array('my-field-class form-row-wide'), 
    'label'   => __('Fill in this field'), 
    'placeholder' => __('Enter something'), 
), $checkout->get_value('my_field_name')); 

echo '</div>'; 
} 

Если я хочу, чтобы редактировать поля этикетки или Заполнитель, то я должен также использовать этот другой код в functions.php:

// Hook in 
add_filter('woocommerce_checkout_fields' , 'custom_override_checkout_fields'); 

// Our hooked in function - $fields is passed via the filter! 
function custom_override_checkout_fields($fields) { 
$fields['order']['order_comments']['placeholder'] = 'My new placeholder'; 
$fields['order']['order_comments']['label'] = 'My new label'; 

return $fields; 
} 

Учитывая выше кодов, как я могу включать поля маски в WooCommerce?

Я сделал это раньше на своем html-сайте с JQuery (из Wordpress), но я не могу понять, как это сделать в Woocommerce.

Fyg, я уже пробовал плагин «Дополнительные поля для проверки WooCommerce для Бразилии», и это не сработало.

Answer 1

Как я уже сказал в своем комментарии, я бы добавил пользовательский класс в поле формы, а затем использовал скрипт maskedinput для таргетинга на этот класс.

Сначала мы зарегистрируем необходимые нам сценарии. Это предполагает, что вы строите собственный плагин и что последующий фрагмент кода находится в файле базы плагинов и скриптов находятся в папке js:

add_action('wp_enqueue_scripts', 'so_41742982_register_scripts'); 
function so_41742982_register_scripts(){ 
    wp_register_script('jquery.maskedinput', plugins_url('js/jquery.maskedinput.js', dirname(__FILE__)), array('jquery'), '1.0', true); 
    wp_register_script('your-script', plugins_url('js/'your-script.js', dirname(__FILE__)), array('jquery', 'jquery.maskedinput'), '1.0', true); 
} 

Затем мы добавим ваше поле, как вы уже сделали , Но обратите внимание на дополнительный класс добавляется через woocommerce_form_field():

/* Add the field to the checkout*/ 
add_action('woocommerce_after_order_notes', 'my_custom_checkout_field'); 

function my_custom_checkout_field($checkout) { 

    wp_enqueue_script('jquery.maskedinput'); 
    wp_enqueue_script('your-script'); 

    echo '<div id="my_custom_checkout_field" class="my_new_field"><h2>' . __('My Field') . '</h2>'; 

    woocommerce_form_field('my_field_name', array(
     'type'   => 'text', 
     'class'   => array('my-custom-mask my-field-class form-row-wide'), 
     'label'   => __('Fill in this field'), 
     'placeholder' => __('Enter something'), 
    ), $checkout->get_value('my_field_name')); 

    echo '</div>'; 
} 

Теперь в вашем файла JavaScript js/your-script.js вы бы следовать инструкциям Maskedinput и вызовите .mask плагин на пользовательский класс, который вы определили ранее.

jQuery(document).ready(function($) { 
    $(".my-custom-mask").mask("(999) 999-9999"); 
});