Restrict users from a selected province to enter

Hi @ashostak,

Yes that should be possible, here’s a quick example. Note this only works in JS mode:

age-gate-canadian-province.php

<?php

/**
 * The plugin bootstrap file
 *
 * This file is read by WordPress to generate the plugin information in the plugin
 * admin area. This file also includes all of the dependencies used by the plugin,
 * registers the activation and deactivation functions, and defines a function
 * that starts the plugin.
 *
 * @link              http://agegate.io
 * @since             1.0.0
 * @package           Age_Gate_Canadian_Province
 *
 * @wordpress-plugin
 * Plugin Name:       Age Gate Canadian Province
 * Plugin URI:        http://agegate.io
 * Description:       Add a dropdown for canadian provinces and alter the age requirement
 * Version:           1.0.0
 * Author:            Phil Baker
 * Author URI:        http://agegate.io
 * License:           GPL-2.0+
 * License URI:       http://www.gnu.org/licenses/gpl-2.0.txt
 * Text Domain:       age-gate-canadian-province
 * Domain Path:       /languages
 */

// If this file is called directly, abort.
if (! defined('WPINC')) {
    die;
}

// add the filter to create the dropdown
add_filter('post_age_gate_custom_fields', 'ag_province_list', 10, 1);

// Add the custom JS
add_action('wp_enqueue_scripts', 'ag_province_script');

function ag_province_script()
{
    wp_enqueue_script('ag-province-script', plugin_dir_url(__FILE__) . 'select-dropdown.js', ['jquery'], '1.0.0');
}

function ag_province_list($fields)
{
    $provinces = [
        [
            'age' => 18,
            'name' => 'Alberta',
            'custom_message' => ''
        ],
        [
            'age'=> 19,
            'name' => 'BC',
            'custom_message' => ''
        ],
        [
            'age' => 18,
            'name' => 'Manitoba',
            'custom_message' => ''
        ],
        [
            'age'=> 19,
            'name' => 'New Brunswick',
            'custom_message' => ''
        ],
        [
            'age'=> 19,
            'name' => 'Newfoundland and Labrador',
            'custom_message' => ''
        ],
        [
            'age'=> 19,
            'name' => 'Northwest Territories',
            'custom_message' => ''
        ],
        [
            'age'=> 19,
            'name' => 'Nova Scotia',
            'custom_message' => ''
        ],
        [
            'age'=> 19,
            'name' => 'Nunavut',
            'custom_message' => ''
        ],
        [
            'age'=> 19,
            'name' => 'Ontario',
            'custom_message' => ''
        ],
        [
            'age'=> 19,
            'name' => 'PEI',
            'custom_message' => ''
        ],
        [
            'age' => false,
            'name' => 'Quebec',
            'custom_message' => 'Sorry but we can&rsquo;t share our website content with your province at this current moment to to regulations'
        ],
        [
            'age'=> 19,
            'name' => 'Saskatchewan',
            'custom_message' => ''
        ],
        [
            'age'=> 65,
            'name' => 'Yukon',
            'custom_message' => ''
        ]
    ];

    $fields .= '<label>Province</label>';
    $fields .= '<select id="ag-province" required>';
    $fields .= '<option value=""> -- Select -- </option>';
    foreach ($provinces as $province) {
        $fields .= '<option id="ag-province" data-message="'. $province['custom_message'] .'" value="'. base64_encode(base64_encode($province['age'])) .'">'. $province['name'] .'</option>';
    }
    $fields .= '</select>';
    return $fields;
}

Al you need to do is add the right ages, for a province that’s not allowed, set to false. Add any messages in the custom_message.

Then:
select-dropdown.js

(function($){

  function AgeGateProvince(){
    this.init();
  }

  AgeGateProvince.prototype.init = function(){
    $('#ag-province').on('change', this.updateAge.bind( this ) );
  }

  AgeGateProvince.prototype.updateAge = function(e){
    $('.age-gate-error[data-error-field="age_gate_failed"]').empty().hide();
    $('.age-gate-form input').prop('disabled', false);
    
    var numericAge = atob(atob(e.target.value));

    if(numericAge) {
      $('.age-gate-subheading').text($('.age-gate-subheading').text().replace(/\d+/g, numericAge));
      $('.age-gate-message').text($('.age-gate-message').text().replace(/\d+/g, numericAge));
      $('.age-gate-challenge').text($('.age-gate-challenge').text().replace(/\d+/g, numericAge));
      $('input[name="age_gate[age]"]').val(e.target.value);
    }

    if (e.target.options[e.target.selectedIndex].dataset.message) {
      
      $('.age-gate-error[data-error-field="age_gate_failed"]').text(e.target.options[e.target.selectedIndex].dataset.message).show();
      $('.age-gate-form input').prop('disabled', true);
    }

  }

  $(function(){
    $(window).on('agegateshown', function(){
      var provence = new AgeGateProvince();
    });

  });

})(jQuery);

That’s it, should be a case of making sure your styles are ok.

Thanks
Phil