كيفية عرض نافذة تحقق العمر في الصفحة الرئيسية فقط

تعتبر نافذة التحقق من العمر أداة مهمة في العديد من المواقع لضمان أن المحتوى المقدم مناسب لجميع الأعمار. وفي هذا المقال، سنتناول بالتفصيل كيفية تنفيذ نافذة منبثقة للتحقق من العمر تظهر فقط في الصفحة الرئيسية للموقع، وذلك باستخدام JavaScript. سنتعرف على كيفية استخدام الكود لتحقيق ذلك بشكل فعال، مع التأكيد على توفير تجربة مستخدم سلسة.

التحقق من العمر باستخدام JavaScript

للبدء، نحتاج إلى إضافة كود JavaScript الذي يعمل على عرض نافذة منبثقة للتحقق من العمر. يجب أن يكون ذلك المتطلب الأساسي حتى لا تظهر النافذة في جميع الصفحات، بل فقط في الصفحة الرئيسية. يتم ذلك من خلال التحقق مما إذا كانت الصفحة الحالية هي الصفحة الرئيسية أم لا، عن طريق استخدام window.location.pathname.

تنفيذ الكود للبداية

لنفترض أنك قد قمت بإعداد نافذة تحقق من العمر على صفحة الويب الخاصة بك. إليك كيفية القيام بذلك باستخدام JavaScript:

document.addEventListener("DOMContentLoaded", function () {
    const popup = document.getElementById("age-verification-popup");
    const VerificationButton = document.getElementById("verify-age");
    const errorText = document.getElementById("error-age");
    const MonthInput = document.getElementById("month");
    const dayInput = document.getElementById("day");
    const yearInput = document.getElementById("year");
    // التحقق من كون المستخدم في الصفحة الرئيسية
    if (window.location.pathname === '/') {
        // التحقق من العمر في localStorage لمنع إعادة عرض النافذة
        if (!localStorage.getItem("ageVerified")) { 
            popup.style.display = "flex"; 
        }
    }
    // إضافة أحداث إدخال التركيز
    MonthInput.addEventListener("input", function () {
        if (MonthInput.value.length === 2) {
            dayInput.focus();
        }
    });
    dayInput.addEventListener("input", function () {
        if (dayInput.value.length === 2) {
            yearInput.focus();
        }
    });
    yearInput.addEventListener("input", function () {
        if (yearInput.value.length === 4) {
            VerificationButton.focus();
        }
    });
    // إعداد زر التحقق لتغيير لونه وفقًا لحالة تعبئة الحقول
    function HighlightButton() {
        if (MonthInput.value.length === 2 && dayInput.value.length === 2 && yearInput.value.length === 4) {
            VerificationButton.style.backgroundColor = "#4CAF50"; // اخضر
        } else {
            VerificationButton.style.backgroundColor = "white"; // إعادة اللون
        }
    }
    MonthInput.addEventListener("input", HighlightButton);
    dayInput.addEventListener("input", HighlightButton);
    yearInput.addEventListener("input", HighlightButton);
    // وظيفة لحساب العمر
    function CalculateAge(birthDate) {
        const today = new Date();
        let age = today.getFullYear() - birthDate.getFullYear();
        const MonthDiff = today.getMonth() - birthDate.getMonth();
        const dayDiff = today.getDate() - birthDate.getDate();
        if (MonthDiff < 0 || (MonthDiff === 0 && dayDiff < 0)) {
            age--;
        }
        return age;
    }
    // حدث الضغط على زر التحقق
    VerificationButton.addEventListener("click", function () {
        const month = parseInt(MonthInput.value);
        const day = parseInt(dayInput.value);
        const year = parseInt(yearInput.value);
        if (!month || !day || !year || month <= 0 || day <= 0 || year <= 0) {
            errorText.textContent = "الرجاء إدخال تاريخ صالح.";
            errorText.style.display = "block";
            return;
        }
        const birthDate = new Date(year, month - 1, day);
        const age = CalculateAge(birthDate);
        if (age >= 19) {
            localStorage.setItem("ageVerified", true); // تخزين في localStorage
            popup.style.display = "none"; // إخفاء النافذة
        } else {
            errorText.textContent = "يجب أن يكون عمرك 19 عامًا أو أكبر للوصول.";
            errorText.style.display = "block";
        }
    });
});

ملاحظات هامة عند استخدام النافذة المنبثقة

عند تنفيذ هذه الوظيفة، من المهم الانتباه للعديد من النقاط:

1. تجربة المستخدم: يجب أن تكون النافذة المنبثقة سهلة الاستخدام وغير معقدة للمستخدمين.
2. التأكد من صحة المدخلات: يجب التحقق من صحة المدخلات المقدمة للتأكد من عدم وجود تواريخ غير صحيحة.
3. تخزين التحقق: استخدام localStorage لتخزين حالة التحقق من العمر يساعد في تجنب تكرار ظهور النافذة.

الخلاصة

يمكننا استخدام JavaScript – How to show popup age verification only on homepage and not all pages؟ بشكل فعال لضمان أن المستخدمين يبلغون من العمر ما يكفي للوصول إلى المحتوى الحساس. من خلال تنفيذ الكود الذي تم شرحه، يمكننا إنشاء تجربة سلسة للمستخدمين فقط في الصفحة الرئيسية، مما يساعد الموقع على الالتزام بالقواعد والتنظيمات. تذكر دائماً تحسين تجربة المستخدم والتأكد من ولوج المعلومات بشكل سهل وآمن.