Как сделать так, чтобы номер телефона стал ссылкой на WhatsApp в деталях заказа WooCommerce в бэкэнде

Вопрос или проблема

add_action( 'admin_footer', function() {
    if ( get_current_screen()->post_type == 'shop_order' ) {
?>
<script>

    jQuery( function($) {

        function tel_to_wa() {
            var wa="//wa.me/51";
            var tel = $( 'a[href*="tel:"]');
            tel.attr({
                href: wa + tel.text(),
                target: '_blank'
            });
        }

        tel_to_wa();

        $( '.order-preview' ).click( function() {
            $(document).ajaxComplete( tel_to_wa );
        });

    });

</script>
<?php
    }
});

add_action( 'admin_footer', function() {
    if ( get_current_screen()->post_type == 'shop_order' ) {
?>
<script>

    jQuery( function($) {

        function tel_to_wa() {
            var tel = $( 'a[href*="tel:"]');
            var phone = tel.text().trim(); // Удаляет лишние пробелы
            var cleanPhone = phone.replace(/[^\d]/g, ''); // Очищает номер от нецифровых символов

            // Если номер уже имеет префикс +51 или 51, оставляем его как есть
            if (cleanPhone.startsWith('51')) {
                cleanPhone = cleanPhone.substring(2); // Удаляет префикс 51, если он уже присутствует
            }

            // Добавляем префикс Перу +51
            var waLink = 'https://wa.me/51' + cleanPhone;

            tel.attr({
                href: waLink,
                target: '_blank'
            });
        }

        tel_to_wa(); // Изначально при загрузке страницы

        // Срабатывает, когда открываются предварительные просмотры заказов или обновляются по AJAX
        $( '.order-preview' ).click( function() {
            $(document).ajaxComplete( tel_to_wa );
        });

    });

</script>
<?php
    }
});

.

Ответ или решение

Создание ссылки на WhatsApp для телефонного номера в деталях заказа WooCommerce на стороне администратора — это полезная задача, позволяющая быстро связываться с клиентами. В этом ответе мы подробно рассмотрим, как реализовать такую функциональность, используя JavaScript и хуки WordPress.

Шаги для реализации

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

add_action('admin_footer', function() {
    if (get_current_screen()->post_type == 'shop_order') {
?>
<script>
    jQuery(function($) {
        function tel_to_wa() {
            var tel = $('a[href*="tel:"]');
            var phone = tel.text().trim(); // Удаление лишних пробелов
            var cleanPhone = phone.replace(/[^\d]/g, ''); // Удаление ненумерных символов

            // Проверяем, существует ли уже префикс +51 или 51
            if (cleanPhone.startsWith('51')) {
                cleanPhone = cleanPhone.substring(2); // Удаляем префикс 51, если он уже есть
            }

            // Добавляем префикс +51
            var waLink = 'https://wa.me/51' + cleanPhone;

            tel.attr({
                href: waLink,
                target: '_blank'
            });
        }

        tel_to_wa(); // Вызываем функцию при загрузке страницы

        // Запускаем функцию, когда открываются предварительные просмотры заказов или обновляются с помощью AJAX
        $('.order-preview').click(function() {
            $(document).ajaxComplete(tel_to_wa);
        });
    });
</script>
<?php
    }
});

Объяснение кода

• Хук admin_footer: Этот хук позволяет добавлять функциональность в подвал страниц админки. Мы проверяем, что текущий экран — это экран заказов WooCommerce.

• jQuery: Мы используем jQuery для выборки и изменения элементов на странице. Если jQuery ещё не был подключен, убедитесь, что он загружается на странице.

• Функция tel_to_wa: Эта функция:

  • Выбирает элемент с телефонным номером (ссылкой на tel:).
  • Очищает номер, удаляя нечисловые символы и лишние пробелы.
  • Проверяет наличие префикса 51 и удаляет его, если он присутствует.
  • Строит ссылку на WhatsApp в формате https://wa.me/51{номер}, где {номер} — это очищенный номер телефона.

• Запуск функций: Функция вызывается при загрузке страницы и каждый раз, когда система AJAX обновляет содержимое.

Оптимизация SEO и читаемость

• Внедрение данного JavaScript-кода обеспечит непосредственно доступ к функции WhatsApp, что может повысить взаимодействие с клиентами и улучшить пользовательский опыт.
• Используйте ясные и понятные комментарии в коде, которые объясняют действия каждой части — это поможет другим разработчикам быстро понять логику кода.
• Примените принципы чистого кода, избегая излишней сложности и придерживаясь простоты, чтобы облегчить дальнейшее сопровождение.

Заключение

Данный подход делает процесс общения с клиентами быстрее и удобнее, улучшая взаимодействие и ускоряя обратную связь. Следуйте описанным шагам, чтобы интегрировать ссылку на WhatsApp на странице деталей заказа WooCommerce.