Having an issue performing event on Age Gate Success

Hi @joshguss,

I’ve had a look, think there’s a couple of issues, unless I’m not seeing the full picture in the code, for instance where is shipping_state and shipping_states defined in the JavaScript?

Even in JS mode, you can still get the region data, you can read it straight from the cookie e.g. Cookies.get('ag_data').

Here’s how I think you can make it work though, first a couple of assumptions:

• The JS Cookies methods are coming from this (or something with similar methods?
• Your ACF shipping_states is returning a simple array, e.g. ['NY','NJ']. If not you might have to flatten is out when it loads the value in the frontend, this is probable if it’s a repeater.

Ok, now that’s out the way, first, I’d always include the modal rather than conditionally, and just show it conditionally. So Just:

<?php get_template_part('modals/modal', 'not-shipping'); ?>

Then, if we go back to the old thread, I’d add some logic in there to set if we need to show the popup:

function ag_success($data, $errors = [])
{
    $dob = intval($data['age_gate_y']). '-' . str_pad(intval($data['age_gate_m']), 2, 0, STR_PAD_LEFT) . '-' . str_pad(intval($data['age_gate_d']), 2, 0, STR_PAD_LEFT);

    $from = new DateTime($dob);
    $to   = new DateTime('today');
    $age    = $from->diff($to)->y;

    $cookieData = json_encode([
        'age' => $age,
        'region' => $data['ag-region'] ?? false
    ]);

    /* Starting additional stuff */
    
    $shippingState = strtoupper($data['ag-region']);
    $shippingStates = ['NY']; // just a demo, swap for your ACF get_field

    setcookie('show_shipping_popup', !in_array($shippingState, $shippingStates), 0, '/');

    /* End additional stuff */

    
    setcookie('ag_data', $cookieData, 0, '/');
}

This will give us the data we need if you’re in JS mode or not.

Next, if you are in PHP mode you could do (in functions.php):

add_action('wp_footer', function () {
    if (isset($_COOKIE['show_shipping_popup'])): ?>
    
    <script>
        // show the modal
        jQuery('#modal-not-shipping').modal('show');
        // Remove the cookie so it doesn't show again
        Cookies.remove('show_shipping_popup');

    </script>
    
    <?php endif;
}, 1000);

Or, if you’re using the JS version, you can do:

window.addEventListener('agegatepassed', function () {
  if(Cookies.get('show_shipping_popup')) {
    // do code to show modal e.g.
    jQuery('#modal-not-shipping').modal('show');
    // then we kill the cookie completely
    Cookies.remove('show_shipping_popup');
  }
});

And that should make it work. I think ??

Cheers
Phil

Hey @philsbury,

To start, thank you so much for being so helpful. To answer some of your initial questions…

I’ve had a look, think there’s a couple of issues, unless I’m not seeing the full picture in the code, for instance where is shipping_state and shipping_states defined in the JavaScript?

Sorry about that… I forgot to include the JS where I was declaring those variables:

var shipping_state = '<?php echo $shipping_state; ?>';
var shipping_states = <?php echo '["' . implode('", "', $shipping_states) . '"]' ?>;

Regarding your assumptions, yup, both of those are correct!

So here is where I’m at:

1. I have added in the logic you provided in to the ag_success function we worked on in the initial thread… great idea ??
2. I am currently using the PHP version and started by adding in the provided function to functions.php but was unable to get the modal to fire.
3. However, by adding the code directly in footer.php a not via an action, it does work! Below is the code I used for this:

<?php if (isset($_COOKIE['show_shipping_popup'])): ?>
  <script>
    // show the modal
    jQuery('#modal-not-shipping').modal('show');
    // Remove the cookie so it doesn't show again
    Cookies.remove('show_shipping_popup');
  </script>
<?php endif; ?>

Any issues you foresee by tackling it this way? If not, this seems to be working great. Thank you again for your help!

Hi @joshguss,

Nope no issue really doing it that way of you always need it. Basically doing the same thing really as long as you’re happy having it in the template, all good!

Cheers
Phil

Hey Phil,

During development locally I have been working with the PHP version in which everything outlined above has been working great. That said, I think I am going to actually use the JS version in production due to web host caching (I’ll be working with WPEngine and noticed a couple support threads re: Age Gate, Caching and WPEngine) and am noticing the following…

Up until now I have been using PHP to conditionally display content based on the state (region) that is entered in the gate. This works as expected in the PHP version but in switching to the JS, the PHP cookie (ag_user_data()->region) is not updated on submission since it is server side (whereas the JS ag_data cookie is) so am wondering the best way to tackle.

Example use case…

Region related variables

$shipping_state = strtoupper(ag_user_data()->region);
$shipping_states = get_field('shipping_states', 'option');
$local_states = get_field('retailer_states', 'option');

Conditional content

if ( !in_array( $shipping_state, $shipping_states ) && in_array( $shipping_state,  $local_states) ) {
  // Not yet shipping to you but we are available locally
} else {
  // Not yet available
}

Thanks!

• This reply was modified 4 years, 2 months ago by Josh.

Hi @joshguss,

That’s a tricky one. If you WPEngine they can whitelist certain cookies, but then it’s a case of will that content still be cached anyway.

Is it always just a popup you’re showing depending on the state? Might be a way to just do it all in JavaScript

Thanks
Phil

Hey @philsbury,

The site being developed sells alcohol online in the US but it is only able to sell/ship to specific states. We are using Age Gate to allow anyone that is 21 or older to enter the site. At the same time, we are also requesting the user’s shipping state as part of the gate (via the Age Gate Regions extension) but rather then prevent entry to users whose state is not one we are able to ship to, we allow them entry to the site (assuming they pass the age verification) and use the region data captured by the gate to customize their experience.

The conditional content based on the state includes:

1. Modal with info regarding inability to ship which may also include conditional content if the products are available locally
2. A button in the header that displays the state (“Shipping to ag_user_data()->region“) which triggers a modal when clicked allowing the user to change their state.
3. WooCommerce specific conditional content including disabling “Add to cart” buttons, disabling Cart and Checkout pages, etc.

Numbers 1 and 2 are already built and working as they should using the PHP version of Age Gate. Number 2 is setup to update the ag_data and show_shipping_popup cookies accordingly. I do feel like both of these could also be tackled using JS with the JS version of Age Gate. Number 3 is the one I have not started in on yet but was initially planning to continue down the same path (of using the PHP version) which I think would be pretty straightforward. But after reading more about possible caching issues and needing to use the JS version to account for this, I have a feeling number 3 could get a bit more complex if needing to handle via JS.

So that’s where I’m currently at ??

Thanks!
Josh

Hi @joshguss,

So I was giving this a bit of thought, and think maybe trying to do this all in Age Gate, while not impossible, might be over complicating things.

As you say you’re on WPEngine, maybe it’s worth just using their Geo location plugin? If I remember rightly, they have to enable it on the server, but it does have the advantage that their caching is also regional, so a NY user is cached there, but an CA user has a different cache. There’s some more info on that here.

What I’m not sure if you can do is override their settings if you wanted to still let the user choose it from the regions extension, but WPEngine should probably be able to answer that.

Ta
Phil

Hey @philsbury,

I hear ya! I did reach out to WP Engine and unfortunately their Geolocation feature does not allow the user to override it. I spent some time yesterday reconfiguring some of the conditional work I had previously done (which was based on the PHP version) to work using the JS version and feeling pretty good about the progress thus far so I think I’m going to keep at it for now.

Thank you again for all of your help!

Josh

Hi @joshguss,

Sounds like you’re on the right path ??

Let me know if you need anything else

Thanks
Phil