הקוד שכל אתר WooCommerce חייב: אימות תקינות מספר טלפון בעמוד תשלום (משפר חוויית משתמש ומונע כאבי ראש לבעלי עסקים – ולמה זה כל כך חשוב)

מספר טלפון הוא השדה הכי חשוב בעמוד התשלום שלכם!
אין מספר טלפון תקין = שווה לאין חבילה שמגיעה ללקוח.
שמעתי לא מעט מלקוחות שלי את הסיפור המעצבן הזה – לפעמים יוצא מצב שהם יכולים לשרוף ימים שלמים בנסיון לחפש את הלקוח בשביל למסור את החבילה שלו
(שלא לדבר על זה שזה מתעכב לוגסיטית בצורה משמעותית, הלקוח לא עונה, החבילה חוזרת לחברת המשלוחים וכ'ו.)

עכישו, למה זה קריטי לכולם?

1. חוויית משתמש משודרגת ללקוח:
   לקוח שרואה שהאתר מספק פידבק מיידי על טעויות שהוא מבצע (באמצעות האימות הוויזואלי, תכף תראו למטה) ירגיש בטוח יותר לסיים את ההזמנה.
   במקום להיתקע עם הודעת שגיאה כללית בסוף, או אפילו להתקשר אליכם כדי לוודא שהפרטים שלו הוזנו נכון, הוא מקבל חוויית משתמש חלקה ונטולת מאמץ מהצד שלכם.
2. מניעת טעויות שמובילות לכאוס בעסק:
   כבעלי עסק, כמה פעמים ניסיתם ליצור קשר עם לקוח כדי לעדכן אותו על הזמנה, רק כדי לגלות שהמספר לא תקין?
   זה לא רק מביך – זה גם פוגע ביכולת שלכם לספק חוויית שירות טובה.
3. שיפור בתהליכי אוטומציה:
   אם אתם, כמו רבים, משתמשים במערכות אוטומטיות כמו שליחת הודעות ווצאפ עם פרטי ההזמנה, מספר טלפון שגוי משבש לחלוטין את התהליך (שלא לדבר על אוטומציות חשובות יותר).
   ובמיוחד היום, כשמיילים בקושי נפתחים (כולנו יודעים את זה), הודעת ווצאפ יכולה לעשות את ההבדל בין לקוח מרוצה לבין כזה שלא מקבל עדכון על ההזמנה שלו. (יש לי מדריך נפרד על איך עושים את זה)

סוגי מספרי טלפון שהקוד יודע לאמת:

הקוד הזה נכתב במיוחד לאימות מספרי טלפון ישראליים, תוך שמירה על התאמה לקידומות הנפוצות ולמבנה הפורמלי של המספרים. הנה פירוט סוגי המספרים שהקוד יודע להתמודד איתם:

1. מספרים בינלאומיים עם קידומת +972:
   • הקוד מזהה מספרים שמתחילים ב-+972 ומוודא שהם מכילים בדיוק 13 תווים (כולל הקידומת).
   • דוגמה תקינה: +972523456789.
   • דוגמה שגויה: +97252345 (חסר תווים), +972523456789123 (עודף תווים).
2. מספרים עם קידומת ישראלית 972 (ללא +):
   • מיועד למספרים שמתחילים ב-972 ונכתבים ללא סימן ה-+.
   • אורך תקין: 12 תווים.
   • דוגמה תקינה: 972523456789.
   • דוגמה שגויה: 97252 (חסר תווים), 972523456789123 (עודף תווים).
3. מספרים מקומיים עם קידומת 05:
   • הקוד מזהה מספרים שמתחילים ב-05 – הקידומת הישראלית למספרי סלולר.
   • אורך תקין: 10 תווים.
   • דוגמה תקינה: 0523456789.
   • דוגמה שגויה: 05234 (חסר תווים), 0523456789123 (עודף תווים).

למה הקוד בודק רק את הסוגים האלו?

• כי אין על ישראל!:
  הקוד מותאם ספציפית לקידומות ומבנה מספרי הטלפון הישראליים.
  מספרי טלפון עם קידומות לא תקינות או מבנה שונה (לדוגמה, מספרים ללא קידומת כלל או עם קידומת זרה) לא יעברו את האימות, תצטרכו להתאים את הקוד לצורך שלכם.
• מניעת טעויות נפוצות:
  משתמשים נוטים לכתוב מספרים עם תווים מיותרים, לשכוח ספרות, או להחליף את הקידומתעם מספרים שגויים אחרים.
  הקוד יודע להתמודד עם המקרים האלו ולהבטיח שהמספרים שיוזנו יהיו בפורמט הנכון.

דוגמה שימושית:

נניח שאתם מנהלים חנות WooCommerce ששולחת ללקוחות הודעות ווצאפ אוטומטיות עם פרטי ההזמנה.
אם לקוח מזין מספר שגוי (נגיד: 123456789), ההודעה לא תישלח – התהליך כולו ייתקע, והלקוח יישאר ללא עדכון.
עם הקוד הזה, הלקוח מקבל התראה בזמן אמת על הטעות, ואתם מבטיחים שכל המספרים שנכנסים למערכת שלכם יהיו תקינים.

למה כל בעל אתר WooCommerce חייב להטמיע את זה?

1. הפחתת הוצאות מיותרות:
   פחות ניסיונות כושלים להגיע ללקוחות, פחות טעויות בתקשורת, ופחות זמן מבוזבז על ניסיונות לתקן הזמנות.
2. שיפור שביעות רצון הלקוח:
   לקוחות מקבלים עדכונים בזמן אמת – ללא עיכובים וללא אי הבנות.
3. שדרוג תהליכי האוטומציה:
   האימות מבטיח שכל המספרים במערכת תקינים – כך שתהליכים כמו שליחת הודעות ווצאפ או SMS יעבדו בצורה חלקה, מבלי שתצטרכו להתעסק בתיקון ידני.

סיכום:

הקוד הזה לא רק משדרג את חוויית המשתמש באתר – הוא גם נותן לכם, כבעלי עסקים, כלים למנוע טעויות יקרות ולשפר את השירות שאתם מציעים.
אז למה לחכות? הטמיעו את הקוד היום ותיהנו מתהליך חלק, מדויק, ובעיקר – מקצועי.

אהה וכמובן , זה הקוד להטמעה, תרגישו בנוח לשנות את הודעות השגיאה שלו:

// PHP: אימות שדה הטלפון בצד השרת
//Credit: Evyatar Gill - zero2hero.co.il

add_action('woocommerce_checkout_process', 'validate_phone_number_field');

function validate_phone_number_field() {
    // Get the phone number from the checkout fields
    $phone = isset($_POST['billing_phone']) ? sanitize_text_field($_POST['billing_phone']) : '';

    // Remove all non-numeric characters except '+'
    $cleaned_phone = preg_replace('/[^\d+]/', '', $phone);

    // Validate the phone number
    if (strpos($cleaned_phone, '+972') === 0) {
        if (strlen($cleaned_phone) !== 13) {
            wc_add_notice('מספר הטלפון שמתחיל ב-+972 חייב להכיל 13 ספרות.', 'error');
        }
    } elseif (strpos($cleaned_phone, '972') === 0) {
        if (strlen($cleaned_phone) !== 12) {
            wc_add_notice('מספר הטלפון שמתחיל ב-972 חייב להכיל 12 ספרות.', 'error');
        }
    } elseif (strpos($cleaned_phone, '05') === 0) {
        if (strlen($cleaned_phone) !== 10) {
            wc_add_notice('מספר הטלפון שמתחיל ב-05 חייב להכיל 10 ספרות.', 'error');
        }
    } else {
        wc_add_notice('מספר הטלפון חייב להתחיל ב-05, 972 או +972.', 'error');
    }
}

// JavaScript: אימות ויזואלי בצד הלקוח
add_action('wp_footer', 'add_phone_field_error_handling_script');
function add_phone_field_error_handling_script() {
    if (is_checkout()) : ?>
        <script>
        jQuery(document).ready(function($) {
            // Select the phone input field
            var $phoneInput = $('#billing_phone');

            // Prevent typing of non-numeric characters
            $phoneInput.on('keypress', function(e) {
                var charCode = e.which ? e.which : e.keyCode;
                var char = String.fromCharCode(charCode);
                if (!/[\d+]/.test(char) || (char === '+' && this.value.includes('+'))) {
                    e.preventDefault();
                }
            });

            // Event handler for when the user moves away from the phone input field
            $phoneInput.on('blur', function() {
                var phone = $(this).val();
                var validationResult = validatePhone(phone);

                if (validationResult.isValid) {
                    $(this).css('border', '1px solid #D3D3D3'); // Normal border
                    removePhoneError();
                } else {
                    $(this).css('border', '2px solid red'); // Red border for invalid input
                    showPhoneError(validationResult.message);
                }
            });

            // Function to validate the phone number
            function validatePhone(phone) {
                var cleanedPhone = phone.replace(/[^\d+]/g, '');

                if (cleanedPhone.startsWith('+972')) {
                    if (cleanedPhone.length === 13) {
                        return { isValid: true };
                    } else if (cleanedPhone.length < 13) {
                        return { isValid: false, message: 'היי, חסר לך ' + (13 - cleanedPhone.length) + ' ספרות במספר המתחיל ב-+972.' };
                    } else {
                        return { isValid: false, message: 'היי, יש לך ' + (cleanedPhone.length - 13) + ' ספרות מיותרות במספר המתחיל ב-+972.' };
                    }
                } else if (cleanedPhone.startsWith('972')) {
                    if (cleanedPhone.length === 12) {
                        return { isValid: true };
                    } else if (cleanedPhone.length < 12) {
                        return { isValid: false, message: 'היי, חסר לך ' + (12 - cleanedPhone.length) + ' ספרות במספר המתחיל ב-972.' };
                    } else {
                        return { isValid: false, message: 'היי, יש לך ' + (cleanedPhone.length - 12) + ' ספרות מיותרות במספר המתחיל ב-972.' };
                    }
                } else if (cleanedPhone.startsWith('05')) {
                    if (cleanedPhone.length === 10) {
                        return { isValid: true };
                    } else if (cleanedPhone.length < 10) {
                        return { isValid: false, message: 'היי, חסר לך ' + (10 - cleanedPhone.length) + ' ספרות במספר המתחיל ב-05.' };
                    } else {
                        return { isValid: false, message: 'היי, יש לך ' + (cleanedPhone.length - 10) + ' ספרות מיותרות במספר המתחיל ב-05.' };
                    }
                } else {
                    return { isValid: false, message: 'מספר הטלפון חייב להתחיל ב-05, 972 או +972.' };
                }
            }

            // Function to show an error message under the phone field
            function showPhoneError(message) {
                removePhoneError();
                var $errorDiv = $('<div>', {
                    id: 'phone-error',
                    html: message,
                    css: {
                        padding: '15px 20px',
                        background: '#ff00000d',
                        borderRadius: '0 0 3px 3px',
                        color: '#3b2e2e',
                        fontSize: '14px',
                        cursor: 'pointer',
                        userSelect: 'none',
                        marginTop: '5px'
                    }
                });
                $phoneInput.parent().append($errorDiv);
            }

            // Function to remove the error message
            function removePhoneError() {
                var $errorDiv = $('#phone-error');
                if ($errorDiv.length) {
                    $errorDiv.remove();
                }
                $phoneInput.css('border', '1px solid #D3D3D3'); // Reset border
            }
        });
        </script>
    <?php
    endif;
}
?>
Code language: PHP (php)

מה דעתכם על הפתרון הזה? אשמח לשמוע פידבקים או רעיונות לשדרוגים נוספים! 🚀