How to implement Age Verification with Avada Form, Alert Element and Off-Canvas

Ensuring that visitors to your website are of legal drinking age is a critical step for businesses in the alcohol industry. In this tutorial, we’ll walk you through implementing an age verification system using JavaScript, tailored for a WordPress site using the Avada theme. We’ll also provide an example of how to conditionally load the verification on specific pages.

Overview

Step-by-Step Guide to Implementing Age Verification

Prerequisites:

Basic knowledge of JavaScript
Access to your WordPress site’s admin panel
Avada theme installed

Objective:

Create an age verification system that prompts users to enter their location and date of birth.
Display an alert if the user does not meet the legal drinking age requirements.
Prevent the age verification from loading on specific pages, such as internal dashboards.

1. Adding the Age Verification Form

First, ensure you have an age verification form in place on your site. Here’s an example of how your form might look:

Copy to Clipboard

2. Writing the JavaScript

Next, we’ll write the JavaScript to handle the age verification logic. This script will prevent the form from submitting traditionally, validate the user’s age, and display an alert if the user is underage.

Copy to Clipboard

// Hide the alert element by default
  alertElement.style.display = 'none';

// Function to show the alert element
  function showAlert() {
    alertElement.style.display = 'block';
  }

// Function to hide the alert element
  function hideAlert() {
    alertElement.style.display = 'none';
  }

submitButton.addEventListener('click', function(event) {
    event.preventDefault(); // Prevent the form from submitting traditionally
    
    const location = locationField.value;
    const dob = new Date(dobField.value);
    
    // Log the values to the console
    console.log('Location:', location);
    console.log('Date of Birth:', dob);

const today = new Date();
    let age = today.getFullYear() - dob.getFullYear();
    const month = today.getMonth() - dob.getMonth();
    if (month < 0 || (month === 0 && today.getDate() < dob.getDate())) {
      age--;
    }
    
    let legalAge = 18; // Default legal age for Mexico
    if (location === 'USA') {
      legalAge = 21;
    }

if (age >= legalAge) {
      console.log('Age verified, closing off-canvas'); // Log to check if this part is reached
      
      // Find the off-canvas element and close it
      const offCanvas = document.querySelector('#awb-oc-2263');
      if (offCanvas) {
        offCanvas.style.display = 'none'; // Close off-canvas
        console.log('Off-canvas found and closed');
      } else {
        console.log('Off-canvas not found');
      }
      
      // Hide the alert element if it was shown
      hideAlert();
      
      // You can also set a cookie or localStorage item to remember the user is verified
      localStorage.setItem('ageVerified', 'true');
    } else {
      showAlert(); // Show the alert element
    }
  });

// Optionally, check if the user has already verified their age
  if (localStorage.getItem('ageVerified') === 'true') {
    const offCanvas = document.querySelector('#awb-oc-2263');
    if (offCanvas) {
      offCanvas.style.display = 'none'; // Close off-canvas
      console.log('Off-canvas already verified and closed');
    }
  }
});
</script>

3. Adding the JavaScript to Your Site

Add the JavaScript to your WordPress site by navigating to Avada > Options > Advanced > Code Fields > Space before /body and paste the JavaScript code.

4. Ensuring Conditional Loading on Specific Pages

To ensure the age verification script does not run on specific pages like your internal dashboard, add a unique class (e.g., dashboard-page) to the body tag of those pages. The JavaScript checks for this class and skips the age verification if present.

Conclusion

By following these steps, you can implement a robust age verification system on your website, ensuring compliance with legal requirements and creating a smooth user experience. This method can be customized further based on your specific needs and branding.

How to implement Age Verification with Avada Form, Alert Element and Off-Canvas

Overview

Step-by-Step Guide to Implementing Age Verification

Prerequisites:

Objective:

1. Adding the Age Verification Form

2. Writing the JavaScript

3. Adding the JavaScript to Your Site

4. Ensuring Conditional Loading on Specific Pages

Conclusion

Join others and subscribe to our Newsletter

Leave A Comment Cancel reply

Menu

Terms

About Cookies

Analytic Cookies

How to implement Age Verification with Avada Form, Alert Element and Off-Canvas

Share

Overview

Step-by-Step Guide to Implementing Age Verification

Prerequisites:

Objective:

1. Adding the Age Verification Form

2. Writing the JavaScript

3. Adding the JavaScript to Your Site

4. Ensuring Conditional Loading on Specific Pages

Conclusion

Join others and subscribe to our Newsletter

Leave A Comment Cancel reply

Menu

Terms

About Cookies

Analytic Cookies