Yo homeslice, I’m not the plugin author, but the plugin author does provide documentation. Here’s the CSS reference styling doc:
https://agegate.io/docs/styling/css-reference
During restriction, before the Age Gate validates the visitor, the <body> element will have the .age-restriction class. After the visitor submits the form and her age is validated, the .age-restriction class will be removed and .age-passed will be added. Then you can unblur all your hoo-hoos and ha-has.
-Paul Mighty
Hi @paulmighty
Thank you for the reply.
The problem is that the .age-restriction class appears only on pages of restricted products or categories.
And for example if an author have only one work ‘adult only’ – and when I go to the author’s page (attribute author) – there is no any .age-restriction class at that page.
There are only a few percent of such works and they are mixed with all the tags, categories etc.
So as I mentioned it would be helpful if there is .age-restriction class on every page before I declare that I am 18+.
Regards, Dominik
Plugin Author
Phil
(@philsbury)
Hi @dominmax,
Are you using standard to javascript Age Gate?
Both are possible, but neither come as part of the plugin by default.
@paulmighty thanks for chipping in 🙂
Thanks
Phil
Yes, that are my options: https://prnt.sc/re42ek
Thanks
Dominik
Plugin Author
Phil
(@philsbury)
Hi @dominmax,
Cool, this is how I’d do it:
Firstly in functions.php (or a custom plugin) we add the class so it’s on every page:
add_filter('body_class', function ($classes) {
return array_merge($classes, ['ag-not-passed']);
}, 10, 2);
Then there’s two things to do to remove it in javascript, firstly chicken page load if the age gate is passed, second, remove it when someone has passed:
jQuery(function () {
// Here we look on load to see if the Age Gate is passed
if (document.cookie.match(new RegExp('(^| )age_gate=([^;]+)'))) {
document.body.classList.remove('ag-not-passed');
}
// This one fires when a user passes the age gate
jQuery(document).on('agegatepassed', function () {
document.body.classList.remove('ag-not-passed');
});
});
That should be it.
Cheers
Phil
-
This reply was modified 4 years, 1 month ago by
Phil.
This is very great idea! 🙂
Thank you very much for your time. I’ll let you know as soon as I get it.
Cheers, Dominik
Hi @philsbury,
Your code works like a charm 😉
e.g. https://artkomiks.pl/autor/nikodem-cabala/
(I added blur and 18+)
Only thing it could be improved is when I am at the 18+ product and I pass the adult gate, and then I use the Back button (browser) – then the .ag-not-passed class was still in the body element.
So I put the function in setInterval to make it run every 3 seconds:
jQuery(
setInterval(function () {
// Here we look on load to see if the Age Gate is passed
if (document.cookie.match(new RegExp('(^| )age_gate=([^;]+)'))) {
document.body.classList.remove('ag-not-passed');
}
// This one fires when a user passes the age gate
jQuery(document).on('agegatepassed', function () {
document.body.classList.remove('ag-not-passed');
});
}, 3000)
);
It seems to work however I am not sure about optimization 😉
Thank you very much for your help again!
Best for you,
Dominik
