A class that indicates that user is adult?

  • dominmax

    (@dominmax)


    5 years ago

    Hi, I am working on an art gallery (shop) and I would like to blur some images of products for adults only (e.g. on related products or authors’ products list etc.). I can do that e.g. by adding a css to img inspecting a category or tag (that are adults only). And it works. But I would like to unblur the images when the user declare that he is an adult one.
    So does the plugin adds any class to any elemnt (like body or html) that indicates that the user declared that he is an adult?

    Regards, Dominik

Viewing 7 replies - 1 through 7 (of 7 total)
  • PaulMighty

    (@paulmighty)

    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

    Thread Starter dominmax

    (@dominmax)

    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

    Thread Starter dominmax

    (@dominmax)

    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 5 years ago by Phil.
    Thread Starter dominmax

    (@dominmax)

    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

    Thread Starter dominmax

    (@dominmax)

    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

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘A class that indicates that user is adult?’ is closed to new replies.