نمایش پیام خاموش کردن v.p.n در صفحه تسویه حساب ووکامرس

آیا تا به حال با این مشکل مواجه شده‌اید که کاربران شما در هنگام پرداخت در ووکامرس با خطای درگاه بانکی روبرو شوند؟ یکی از دلایل رایج این مشکل، فعال بودن VPN یا ابزارهای تغییر IP در زمان پرداخت است. درگاه‌های پرداخت ایرانی اغلب به دلایل امنیتی و تطابق با قوانین بانکی، نسبت به IP ایران حساسیت دارند و ممکن است با IP های خارجی دچار مشکل شوند.

با استفاده از یک قطعه کد جاوا اسکریپت ساده، می‌توانید به کاربران خود اطلاع دهید که قبل از پرداخت، VPN خود را خاموش کنند. این کار نه تنها تجربه کاربری بهتری را فراهم می‌کند، بلکه از بروز خطاهای پرداخت نیز جلوگیری کرده و نرخ تکمیل خرید را افزایش می‌دهد.

مزایای استفاده از کد بررسی IP در صفحه تسویه حساب

• کاهش خطاهای پرداخت: با اطلاع‌رسانی به کاربر، احتمال بروز خطا در فرآیند پرداخت به دلیل IP نامعتبر به حداقل می‌رسد.
• بهبود تجربه کاربری: کاربران شما با دریافت یک پیام واضح، متوجه مشکل احتمالی می‌شوند و می‌توانند آن را به سرعت رفع کنند، بدون اینکه نیاز به تماس با پشتیبانی داشته باشند.
• افزایش نرخ تکمیل خرید (Conversion Rate): با روان‌تر شدن فرآیند پرداخت، کاربران بیشتری موفق به تکمیل خرید خود می‌شوند.
• عملکرد بهینه: این کد به صورت جاوا اسکریپت در سمت کاربر اجرا می‌شود و هیچ تأثیر منفی بر سرعت بارگذاری سایت شما نخواهد داشت.

کد چگونه کار می‌کند؟

کد ارائه شده، یک اسکریپت جاوا اسکریپت است که در صفحه تسویه حساب ووکامرس (فقط زمانی که کاربر در این صفحه باشد) اجرا می‌شود. این اسکریپت:

• درخواست خود را به یک سرویس آنلاین (api.ipbase.com/v1/json) ارسال می‌کند تا اطلاعات جغرافیایی مربوط به IP کاربر را دریافت کند.
• پس از دریافت پاسخ، بررسی می‌کند که آیا کد کشور کاربر “IR” (ایران) است یا خیر. اگر کد کشور “IR” نباشد (یعنی کاربر از VPN یا IP خارجی استفاده می‌کند)، یک پیام هشدار مناسب با محتوای “لطفاً قبل از پرداخت VPN خود را خاموش کنید.” را در بالای بخش پرداخت صفحه تسویه حساب نمایش می‌دهد.
• در صورت بروز هرگونه خطا در فرآیند دریافت اطلاعات IP، خطا در کنسول مرورگر ثبت می‌شود تا فرآیند خرید کاربر مختل نشود.

این کد بهینه‌سازی شده است تا تنها در صفحه تسویه حساب ووکامرس اجرا شود و از یک سرویس رایگان برای تشخیص موقعیت جغرافیایی استفاده می‌کند.

/**
 * @brief افزودن کد جاوا اسکریپت این لاین برای بررسی آی پی در صفحه تسویه حساب.
 * @version 1.0 - استفاده از سرویس freegeoip.app
 */
add_action( 'wp_footer', 'aniltarah_inline_checkout_ip_checker_v2' );

function aniltarah_inline_checkout_ip_checker_v2() {
    
    // اطمینان از اینکه کد فقط در صفحه تسویه حساب اجرا می شود
    if ( is_checkout() ) {
        ?>
        <script type="text/javascript">
        document.addEventListener('DOMContentLoaded', function() {

            // آدرس سرویس رایگان برای تشخیص موقعیت جغرافیایی
            const apiUrl = 'https://api.ipbase.com/v1/json/';

            // ارسال درخواست برای دریافت اطلاعات آی پی
            fetch(apiUrl)
                .then(response => {
                    if (!response.ok) {
                        throw new Error('Network response was not ok');
                    }
                    return response.json();
                })
                .then(data => {
                    // بررسی می کنیم که پاسخ معتبر بوده و کد کشور (country_code) ایران نباشد
                    if (data && data.country_code && data.country_code !== 'IR') {
                        
                        // ساخت عنصر HTML برای نمایش پیام
                        const noticeElement = document.createElement('div');
                        noticeElement.className = 'aniltarah-woocommerce-ip-error'; // woocommerce-error استفاده از کلاس خطای ووکامرس برای استایل دهی
                        noticeElement.setAttribute('role', 'alert');
                        noticeElement.innerHTML = 'لطفاً قبل از پرداخت VPN خود را خاموش کنید.';

                        // پیدا کردن بخش پرداخت در صفحه
                        const paymentSection = document.querySelector('.woocommerce-checkout-payment');

                        // افزودن پیام هشدار قبل از بخش پرداخت
                        if (paymentSection) {
                            //paymentSection.parentNode.insertBefore(noticeElement, paymentSection);
                            paymentSection.parentNode.append(noticeElement);

                        }
                    }
                })
                .catch(error => {
                    // در صورت بروز خطا، آن را در کنسول ثبت کن تا فرآیند خرید مختل نشود
                    console.error('IP Geolocation Check Failed:', error);
                });
        });
        </script>
		<style>
			.aniltarah-woocommerce-ip-error{
				margin:5px;
				text-align:center;
				font-family:inherit;
				color: #df7f7f;
			}	
		</style>
        <?php
    }
}

نحوه درج و استفاده از کد در سایت وردپرسی شما

برای درج این کد در وب‌سایت وردپرسی خود، دو روش اصلی وجود دارد:

روش اول: درج کد در فایل functions.php قالب (یا قالب فرزند)

این روش برای توسعه‌دهندگان و کاربرانی که با ویرایش فایل‌های قالب آشنا هستند، مناسب است.

1. دسترسی به فایل functions.php:
   • از طریق پنل مدیریت وردپرس: به بخش “نمایش” -> “ویرایشگر پرونده‌های پوسته” بروید. از سمت چپ صفحه، فایل functions.php (یا functions.php قالب فرزند child theme اگر از آن استفاده می‌کنید) را انتخاب کنید.
   • از طریق FTP/CPanel: با استفاده از یک کلاینت FTP یا File Manager در CPanel خود به هاست متصل شوید. به مسیر wp-content/themes/your-theme-name/ بروید و فایل functions.php را پیدا کنید.
2. افزودن کد: کد PHP ارائه شده را به انتهای فایل functions.php اضافه کنید. نکته مهم: همیشه قبل از ویرایش فایل‌های اصلی قالب، از آن‌ها پشتیبان تهیه کنید.
3. ذخیره تغییرات: فایل را ذخیره کنید.

چرا استفاده از قالب فرزند (Child Theme) توصیه می‌شود؟

اگر کد را مستقیماً در functions.php قالب اصلی خود قرار دهید، با به‌روزرسانی قالب، تغییرات شما از بین خواهند رفت. استفاده از قالب فرزند این مشکل را حل می‌کند و تضمین می‌کند که کدهای سفارشی شما حتی پس از به‌روزرسانی قالب نیز باقی بمانند.

روش دوم: استفاده از افزونه‌های مدیریت کد (مانند WPCode)

این روش برای کاربرانی که تمایلی به ویرایش مستقیم فایل‌های قالب ندارند یا می‌خواهند کدهای سفارشی خود را به صورت مدیریت شده‌تری نگهداری کنند، بسیار مناسب است. افزونه‌هایی مانند WPCode (قبلاً Insert Headers and Footers) یا Code Snippets این امکان را فراهم می‌کنند.

با استفاده از افزونه WPCode (توصیه شده):

1. نصب و فعال‌سازی افزونه:
   • به بخش “افزونه‌ها” -> “افزودن” در پنل مدیریت وردپرس بروید.
   • “WPCode” را جستجو کرده، آن را نصب و سپس فعال کنید.
2. ایجاد یک Snippet جدید:
   • پس از فعال‌سازی، در منوی کناری وردپرس به “Code Snippets” (یا “WPCode”) -> “Add New” بروید.
   • یک عنوان برای Snippet خود وارد کنید (مثلاً: “بررسی IP در صفحه پرداخت”).
   • “Code Type” را روی “PHP Snippet” تنظیم کنید.
   • کد PHP کامل ارائه شده در بالا را در قسمت “Code Preview” کپی و پیست کنید.
   • مطمئن شوید که “Location” روی “Run Everywhere” تنظیم شده باشد، زیرا کد PHP ( add_action و function ) باید در هر صفحه اجرا شود تا بتواند is_checkout() را بررسی کند. اما خود اسکریپت جاوا اسکریپت فقط در صفحه پرداخت فعال می شود.
   • “Status” را به “Active” تغییر دهید.
   • روی دکمه “Save Snippet” کلیک کنید.

نکات تکمیلی

• تست کد: پس از اضافه کردن کد به هر یک از روش‌های بالا، حتماً عملکرد آن را با استفاده از یک VPN تست کنید. به صفحه تسویه حساب بروید و ببینید که آیا پیام هشدار به درستی نمایش داده می‌شود یا خیر.
• استایل‌دهی: کلاس aniltarah-woocommerce-ip-error در کد CSS مربوط به استایل‌دهی پیام هشدار استفاده شده است. شما می‌توانید این استایل‌ها را در بخش<style> داخل کد یا در فایل style.css قالب خود (ترجیحاً قالب فرزند) برای تطابق با ظاهر سایتتان تغییر دهید. حتی می‌توانید استایل‌ها را در کد سفارشی قالب ذخیره کنید.

با پیاده‌سازی این کد ساده، می‌توانید به طور قابل توجهی خطاهای پرداخت را کاهش داده و تجربه خرید آنلاین را برای کاربران خود بهبود بخشید.