Всё о Woocommerce

Маска для телефона

Маска для телефона

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

При оформлении заказа в онлайн магазине созданном на Woocommerce можно для поля телефон «сделать маску телефона» чтобы можно было только вводить цифры в это поле — это раз, а два именно так как принято в той или иной стране. В моём варианте это две страны: Россия и Беларусь и вот собственно код, который добавляете в файл

functions.php

// маска телефона для России и Беларуси
add_action('wp_enqueue_scripts', 'simple_phone_mask');
function simple_phone_mask() {
    if (is_checkout()) {
        wp_enqueue_script('jquery-mask', 'https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.16/jquery.mask.min.js', array('jquery'), '1.14.16', true);
        
        // Добавляем скрипт сразу после подключения
        wp_add_inline_script('jquery-mask', '
            jQuery(document).ready(function($) {
                function applyPhoneMask() {
                    var country = $("#billing_country").val();
                    var phoneInput = $("#billing_phone");
                    
                    phoneInput.unmask(); // Снимаем предыдущую маску
                    
                    if (country === "BY") {
                        phoneInput.mask("+375 00 000 00 00");
                    } else {
                        phoneInput.mask("+7(000)000-00-00");
                    }
                }
                
                // Применяем при загрузке
                applyPhoneMask();
                
                // Обновляем при смене страны
                $("#billing_country").change(applyPhoneMask);
            });
        ');
    }
}

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *