Маска ввода номера телефона woocommerce

Отсутствие маски ввода в поле Телефон на странице оформления заказа чревато ошибками при его заполнении, что в свою очередь может привести к потере заказов. К счастью, реализовать маску ввода номера телефона для WooCommerce можно с помощью готового скрипта всего за несколько шагов:

Шаг 1 — Качаем отсюда архив с нужным нам скриптом jquery.maskedinput.js (скрипт находится внутри папки dist — рекомендую использовать минифицированную версию скрипта jquery.maskedinput.min.js).

Шаг 2 — Помещаем скрипт на своем сайте при помощи FTP или файлового менеджера вашего хостинга. Например, для подключаемых скриптов можно создать папку js в папке wp-content. В таком случае файл скрипта будет располагаться по адресу:

/wp-content/js/jquery.maskedinput.min.js

Шаг 3 — Вставляем приведенный ниже код в файл function.php вашей темы (или, можно воспользоваться для этого плагином Code Snippets, создав php-снипет и поместив код в него):

// Маска ввода номера телефона на странице оформления заказа
add_action('wp_enqueue_scripts', 'masked_input');
function masked_input() {
    if (is_checkout()) {
        wp_enqueue_script('masked_input', get_site_url().'/wp-content/js/jquery.maskedinput.min.js', array('jquery'));
        add_action( 'wp_footer', 'masked_script', 999);
    }
}
 
function masked_script() {
    if ( wp_script_is( 'jquery', 'done' ) ) {
?>

<script type="text/javascript">
    jQuery( function( $ ) {
        $("#billing_phone").mask("+7(999)999-99-99");
    });
</script>

<?php
    }
}

Если вы сделали все правильно, то теперь при вводе номера телефона в соответствующее поле, вы должны наблюдать маску ввода номера:

Добавляем запрет на ввод 7 и 8 в качестве первой цифры в маске ввода

Бывают случаи, когда некоторые пользователи не обращают внимания на то, что в маске уже указано начало номера телефона +7, и начинают вводить свой номер телефона с цифры 8. Конечно, это может приводить к потере клиентов.

Как же запретить вводить в маске ввода номера телефона в качестве первой цифры 7 или 8? Для этого мы немного модернизируем наш код выше, и вместо этой маски ввода:

$("#billing_phone").mask("+7(999)999-99-99");

будем использовать такой код:

$.mask.definitions['h'] = "[0|1|2|3|4|5|6|9]";
$("#billing_phone").mask("+7 (h99)-999-99-99");

В этом примере мы разрешили вводить в качестве первого символа ввода любые цифры, кроме 7 и 8. Если же ваша маска ввода предназначена для мобильных номеров из России, то в $.mask.definitions['h'] следует оставить только цифру 9.

Маска ввода для тех случаев, когда в коде номера содержится цифра 9

Приведенный выше код отлично работает с теми масками ввода номера телефона, где код страны не содержит цифру «9». А что, если нужно сделать маску ввода номера телефона, например, для Узбекистана, где код страны 998, или для Кыргызстана, с их международным кодом 996? Наше решение не подходит для данных случаев.

В этой ситуации можно воспользоваться решением, которое предложил Александр Мальцев. Повторяем из первой части данного руководства Шаг 1 и Шаг 2, а на Шаге 3 мы размещаем в файле function.php вашей темы другой код:

// Маска ввода номера телефона на странице оформления заказа
add_action('wp_enqueue_scripts', 'masked_input');
function masked_input() {
    if (is_checkout()) {
        wp_enqueue_script('masked_input', get_site_url().'/wp-content/js/jquery.maskedinput.min.js', array('jquery'));
        add_action( 'wp_footer', 'masked_script', 999);
    }
}
 function masked_script() {
    if ( wp_script_is( 'jquery', 'done' ) ) {
?>
    <script>
  [].forEach.call(document.querySelectorAll('input[type="tel"]'), function (input) {
    let keyCode;
    function mask(event) {
      event.keyCode && (keyCode = event.keyCode);
      let pos = this.selectionStart;
      if (pos < 3) event.preventDefault();
      let matrix = '+998 ___-___-____', 
        i = 0,
        def = matrix.replace(/D/g, ''),
        val = this.value.replace(/D/g, ''),
        new_value = matrix.replace(/[_d]/g, function (a) {
          return i < val.length ? val.charAt(i++) || def.charAt(i) : a
        });
      i = new_value.indexOf('_');
      if (i != -1) {
        i < 5 && (i = 3);
        new_value = new_value.slice(0, i)
      }
      var reg = matrix.substr(0, this.value.length).replace(/_+/g,
        function (a) {
          return '\d{1,' + a.length + '}'
        }).replace(/[+()]/g, '\$&');
      reg = new RegExp('^' + reg + '$');
      if (!reg.test(this.value) || this.value.length < 5 || keyCode > 47 && keyCode < 58) this.value = new_value;
      if (event.type == 'blur' && this.value.length < 5) this.value = ''
    }
    input.addEventListener('input', mask, false);
    input.addEventListener('focus', mask, false);
    input.addEventListener('blur', mask, false);
    input.addEventListener('keydown', mask, false);
  });
</script>

<?php
    }
}

Код страны и саму маску ввода номера телефона редактируем в строке 19.

Вывод

Хочу обратить внимание на то, что это универсальный способ добавления маски ввода номера телефона для плагина WooCommerce. Я специально предложил разместить js файл не в папке с темой, как это обычно делают, а в папке wp-content. Это позволяет применять данный способ для WordPress сайтов, которые вовсе не имеют темы. Такое возможно, например, при использовании конструктора Oxygen.

Well as I said in my comment, I would add a custom class to your form field and then use the maskedinput script to target that class.

First we’ll register the scripts we need. This assumes you are building a custom plugin and that the follow snippet is in the base plugin file, and the scripts are in a folder called 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 );
}

Then we’ll add your field as you’ve already done. But note the additional CLASS being added via 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>';
}

Now in your javascript file js/your-script.js you would follow the Maskedinput directions and call the .mask plugin on the custom class you defined earlier.

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

1

Маска телефона на странице оформления заказа

21.02.2021, 10:31. Показов 2757. Ответов 1

1
2
3
4
5
6
7
8
9
10

add_filter( 'woocommerce_form_field', 'my_maskedinput', 20, 4 );
function my_maskedinput( $field, $key, $args, $value ) {
    // Only on checkout page
    if( is_checkout() && ! is_wc_endpoint_url() ) {
        $phone = '&nbsp;<input type="tel" class="input-text " name="billing_phone" id="billing_phone" placeholder="Номер телефона" value autocomplete="tel">';
        $field = str_replace( $phone, '&nbsp;<input type="tel" class="input-text" name="billing_phone" id="billing_phone" placeholder="Номер телефона" value autocomplete="tel" mask="+7 (999) 999-99-99">', $field );
    }
    
    return $field;
}

__________________
Помощь в написании контрольных, курсовых и дипломных работ, диссертаций здесь

0