2 طرق سهلة لتمكين تسجيل الدخول برقم الهاتف في WooCommerce

يعد تسجيل الدخول إلى رقم الهاتف ميزة مفيدة مصممة لتحسين تجربة المستخدم وتسهيل عملية تسجيل الدخول والتسجيل. لذلك ، يرغب العديد من مستخدمي WooCommerce في تنفيذ هذه الميزة في متاجرهم عبر الإنترنت.

إذا كنت أحد هؤلاء الأشخاص ، فقد وصلت إلى صفحة الويب الصحيحة. ستعلمك هذه المقالة كيفية السماح للمستخدمين بتسجيل الدخول والتسجيل باستخدام رقم هاتف WooCommerce بطريقتين.

لماذا يجب عليك تمكين تسجيل الدخول برقم هاتف WooCommerce في متجرك؟

أصبح تسجيل الهاتف وتسجيل الدخول مفيدًا للغاية لمتاجر WooCommerce التي تعتمد بشكل كبير على أرقام هواتف العملاء. على سبيل المثال ، توصيل الطعام وسيارات الأجرة وما إلى ذلك.

بالإضافة إلى هذه المنافذ المحددة ، فيما يلي بعض المزايا التي تفيد أي عمل تجاري.

• يمكن للمشترين تسجيل الدخول والتسجيل مباشرة باستخدام رقم هاتفهم في متجر WooCommerce الخاص بك.
• إنه يتجنب البريد العشوائي لتسجيل العملاء في متجرك عبر الإنترنت.
• يمكن للمشترين أيضًا تسجيل الدخول دون تذكر اسم المستخدم وكلمة المرور.
• يمكنك التحقق من أرقام هواتف العملاء عن طريق رسائل OTP SMS.
• جميع العملاء الذين تم التحقق منهم حقيقيون وبالتالي يمنعون الطلبات المزيفة.
• يمكن إخطار عملائك بسرعة من خلال الأجهزة المحمولة ، حتى لو لم يكن لديهم إمكانية الوصول إلى الإنترنت.
• يمكنك الوصول بسرعة إلى عملائك بالعروض الترويجية والعروض من خلال أرقام هواتفهم.

مع هذه المزايا ، يمكنك بسهولة تحسين استراتيجية عملك ، وفي النهاية ، نمو استهلاكك. لديك كل ما تحتاجه للتواصل مع عملائك بأبسط الطرق وأكثرها واقعية.

# 1: تمكين تسجيل الدخول برقم الهاتف في متجر WooCommerce الخاص بك باستخدام مكون إضافي

هناك العديد من المكونات الإضافية التي يمكن أن تساعدك في ذلك. فمثلا:

• التسجيل وتسجيل الدخول باستخدام رقم الهاتف المحمول
• الأرقام: رقم الهاتف المحمول WordPress نموذج تسجيل وتسجيل الدخول لمرة واحدة
• تسجيل الدخول باستخدام رقم الهاتف المحمول لـ WooCommerce

ولكن في هذا البرنامج التعليمي ، سنستخدم المكون الإضافي "تسجيل الدخول برقم الهاتف" لأنه أكثر البرامج المجانية شيوعًا.

قم بتثبيت المكون الإضافي تنشيط " تسجيل الدخول باستخدام رقم الهاتف " في متجر WooCommerce الخاص بك

أول شيء عليك القيام به هو تثبيت وتنشيط المكون الإضافي " تسجيل الدخول برقم الهاتف " في متجر WooCommerce الخاص بك. فيما يلي التعليمات.

1. أولاً ، من لوحة معلومات WordPress ، انتقل إلى الإضافات> إضافة صفحة جديدة .

2. أدخل "تسجيل الدخول برقم الهاتف" في مربع البحث في الزاوية اليمنى العليا.
3. يجب أن يظهر المكون الإضافي أولاً في القائمة. انقر فوق الزر التثبيت الآن الذي يظهر بجوار عنوانه.
4. بعد ذلك ، سيتم تنزيل المكون الإضافي. بمجرد الانتهاء من ذلك ، سترى زر التثبيت الآن يتغير إلى زر التنشيط . انقر فوقه.

قم بإنشاء صفحة تسجيل / تسجيل دخول جديدة

الخطوة التالية هي إدخال الرمز المختصر للمكون الإضافي في صفحة تسجيل دخول / تسجيل جديدة.

1. انتقل إلى الصفحة> إضافة جديد من لوحة معلومات WordPress.

2. اختر عنوانًا للصفحة الجديدة ، على سبيل المثال ، " تسجيل الدخول / صفحة التسجيل ".

3. ضع الرمز القصير [idhweb_lwp] بداخله.
4. انشر الصفحة.

احصل على 10000 رسالة نصية قصيرة مجانية لمرة واحدة لكل شهر مع Firebase

عندما يقوم مستخدم جديد بتسجيل حساب في متجر WooCommerce الخاص بك ، سيتم إرسال رمز التحقق إلى رقم هاتفه المحمول. لذلك ، سوف تحتاج إلى توفير بوابة SMS لكي يعمل المكون الإضافي بشكل صحيح.

يمكنك استخدام Firebase من Google. يوفر 10000 رسالة قصيرة OTP شهريًا مجانًا. هنا هو كيف:

1. سجّل الدخول إلى وحدة تحكم Firebase باستخدام حساب Google الخاص بك.
2. انقر فوق الزر "إنشاء مشروع" .

3. الآن ، ستحتاج إلى إدخال اسم للمشروع الجديد ، وقبول شروط وأحكام Firebase ، والنقر فوق الزر " إنشاء مشروع" .
4. بمجرد إنشاء المشروع بنجاح ، على الشريط الجانبي الأيسر ، انتقل إلى صفحة الإنشاء > المصادقة .

5. انقر فوق زر البدء .
6. اختر الهاتف كموفر.

7. قم بتبديل مفتاح التبديل في الزاوية اليمنى العليا لتمكين هذا الخيار. ثم انقر فوق الزر " حفظ ".

8. قم بالتمرير لأسفل إلى قسم المجالات المصرح بها . انقر فوق الزر إضافة مجال وأدخل اسم المجال لمتجر WooCommerce الخاص بك. ثم انقر فوق الزر " إضافة ".

9. الآن ، انتقل إلى علامة التبويب القوالب .

10. انقر فوق رمز القلم الرصاص بجوار نص لغة النموذج. بعد ذلك ، اختر اللغة التي تفضل استخدامها للتحقق عبر الرسائل القصيرة.

11. انقر فوق رمز الترس بجوار نص نظرة عامة على المشروع واختر إعدادات المشروع .

12. قم بالتمرير لأسفل إلى أقسام تطبيقاتك . ثم انقر فوق أيقونة الويب.

13. أدخل اسمًا مستعارًا لتطبيقك الجديد. ثم انقر فوق زر تسجيل التطبيق .

14. اختر خيار استخدام علامة <script> وانسخ البرامج النصية المتوفرة.

15. الآن ، انتقل إلى لوحة تحكم WordPress لمتجر WooCommerce الخاص بك. ثم قم بزيارة صفحة "إعدادات تسجيل الدخول".

16. الصق النصوص البرمجية في مربع نص تهيئة Firebase .
17. ارجع إلى نافذة Firebase ، وانسخ مفتاح واجهة برمجة التطبيقات المتوفر في النصوص البرمجية.

18. بالعودة إلى نافذة WordPress ، الصق مفتاح API في مربع نص Firebase api .

19. أخيرًا ، قم بالتمرير لأسفل إلى أسفل الصفحة وانقر فوق الزر حفظ التغييرات .

أيضًا ، هذا هو المكان الذي يمكنك فيه تكوين التطبيق. يجب عليك التحقق من الإعدادات لمعرفة ما إذا كان هناك أي شيء آخر تحتاج إلى تعديله.

# 2: تمكين تسجيل الدخول برقم الهاتف في متجر WooCommerce برمجيًا

في هذا البرنامج التعليمي ، سنضيف خيار رقم هاتف آخر في نموذج تسجيل الدخول لمتجر WooCommerce الخاص بك. يرجى ملاحظة أن هذا لا يرسل رسائل OTP SMS للتحقق من المستخدمين كما في البرنامج التعليمي السابق.

يمكن للمستخدمين اختيار ما هو أكثر ملاءمة لهم. ربما رأيت هذا في نموذج تسجيل الدخول إلى أمازون. يسمح للمستخدمين بتسجيل الدخول باستخدام بريد إلكتروني أو رقم هاتف.

ستحتاج إلى إضافة كود PHP مخصص إلى ملف “jobs.php” للسمة النشطة حاليًا. إذا كنت لا تعرف كيفية القيام بذلك ، فاتبع الإرشادات أدناه:

1. انتقل إلى صفحة Appearance> Theme File Editor من لوحة معلومات WordPress.

2. اختر الموضوع الذي تستخدمه في الزاوية اليمنى العليا.
3. قم بالوصول إلى ملف "jobs.php" من الشريط الجانبي الأيمن.

إضافة إدخال رقم الهاتف

لتمكين تسجيل الدخول برقم هاتف WooCommerce على موقع التجارة الإلكترونية في WordPress ، تحتاج إلى تخزين أرقام هواتف المستخدمين في جدول "wp_usermeta".

يمكن القيام بذلك في وقت تسجيل المستخدم. يمكنك استخدام الكود أدناه لتحقيق هذا الهدف.

 <?php $user_id = 1; // pass user id $phone_number = 9999999999; add_user_meta( $user_id, 'user_phone', $phone_number);

بمجرد أن يكون لديك "user_phone" meta_key بقيمته ، يمكنك التحقق من بيانات اعتماد المستخدم برقم هاتف.

قم بإنشاء نموذج تسجيل الدخول

الآن ، لنقم بإنشاء نموذج تسجيل دخول بسيط حيث يمكن للمستخدمين إدخال تفاصيل تسجيل الدخول الخاصة بهم. سيكون له العناصر التالية:

• حقل نصي لإدخال اسم المستخدم / البريد الإلكتروني / الهاتف
• حقل نصي لإدخال كلمة المرور
• A nonce لتجنب هجمات CSRF (إنه حقل مخفي)
• زر إرسال

 <?php $return = log_the_user_in(); if( is_wp_error( $return ) ) { echo $return->get_error_message(); } ?> <form method="post"> <p><input type="text" name="user_login" placeholder="Username, email or mobile" required /></p> <p><input type="password" name="user_password" placeholder="Password" required /></p> <input type="hidden" name="login_nonce" value="<?php echo wp_create_nonce('login_nonce'); ?>" /> <input type="submit" name="btn_login" value="Submit" /> </form>

في النصوص أعلاه ، أضفنا كود HTML وأطلقنا أيضًا على طريقة “log_the_user_in ()”. هذا مسؤول عن التحقق من بيانات اعتماد المستخدم.

في حالة حدوث بعض الأخطاء من جانب الخادم ، فسنبلغ المستخدم من خلال طريقة "get_error_message ()".

في الخطوة التالية ، سنحتاج إلى تحديد طريقة "log_the_user_in ()" وإرجاع الخطأ.

قم بتسجيل الدخول باستخدام أرقام الهواتف في WooCommerce

عندما يملأ المستخدم بيانات الاعتماد وينقر على زر الإرسال ، سنحصل على بيانات الاعتماد ونتحقق منها مقابل قاعدة البيانات.

إذا تطابق كل شيء ، فسنقوم بتسجيل الدخول وإعادة توجيههم إلى الصفحة الرئيسية. بالنسبة لعمليات تسجيل الدخول الخاطئة ، سيتم تسجيل الأخطاء باستخدام فئة "WP_Error". بناءً على احتياجاتك ، يمكنك تغييرها إلى أي صفحة أخرى عن طريق تغيير الكود.

سنقوم بتعريف طريقة "log_the_user_in ()" على خطاف "init". يتم تشغيل هذا الخطاف بعد انتهاء تحميل WordPress ولكن قبل إرسال أي رأس. هذا مثالي لمعالجة نموذج باستخدام طريقة POST.

يوجد أدناه الرمز:

 add_action( 'init', 'log_the_user_in' ); function log_the_user_in() { if ( ! isset( $_POST['btn_login'] ) ) return; if ( ! wp_verify_nonce( $_POST['login_nonce'], 'login_nonce' ) ) { return new WP_Error('invalid_data', 'Invalid data.'); } if ( empty( $_POST['user_login'] ) || empty( $_POST['user_password'] ) ) { return new WP_Error('empty', 'Both fields are required.'); } if ( is_email( $_POST['user_login'] ) ) { // check user by email $user = get_user_by( 'email', $_POST['user_login'] ); } elseif ( is_numeric( $_POST['user_login'] ) ) { // check user by phone number global $wpdb; $tbl_usermeta = $wpdb->prefix.'usermeta'; $user_id = $wpdb->get_var( $wpdb->prepare( "SELECT user_id FROM $tbl_usermeta WHERE meta_key=%s AND meta_value=%s", 'user_phone', $_POST['user_login'] ) ); $user = get_user_by( 'ID', $user_id ); } else { // check user by username $user = get_user_by( 'login', $_POST['user_login'] ); } if ( ! $user ) { return new WP_Error('wrong_credentials', 'Invalid credentials.'); } // check the user's login with their password. if ( ! wp_check_password( $_POST['user_password'], $user->user_pass, $user->ID ) ) { return new WP_Error('wrong_credentials', 'Invalid password.'); } wp_clear_auth_cookie(); wp_set_current_user($user->ID); wp_set_auth_cookie($user->ID); wp_redirect(get_bloginfo('url')); exit; }

هنا ، تحققنا أولاً من nonce لحماية النموذج من أنواع معينة من سوء الاستخدام والشفرات الضارة وهجمات CSRF.

بعد ذلك ، بناءً على طريقة "is_email ()" أو "is_numeric ()" ، سيتحقق WordPress من بريد إلكتروني أو رقم هاتف صالح. إذا كانت القيمة التي تم إدخالها ليست بريدًا إلكترونيًا أو رقم هاتف ، فسوف نتحقق من اسم المستخدم.

الكلمات الأخيرة

هذا كل شيء عن إضافة تسجيل الدخول برقم الهاتف في متجر WooCommerce الخاص بك. آمل أن يكون قد ساعدك في مشروعك.

إذا وجدت هذه المقالة مفيدة ، فلا تتردد في مشاركة أفكارك واقتراحاتك في قسم التعليقات أدناه.