Age verification / Landing page / Cookie notification
I had this for a site but it was for C5 version <5.7, and the cookie overlays won't work anymore. Does anyone have an idea about how I can approache this? For example with .htacces? I've no clue at the moment.
The jQuery cookie plug in is easy to use for this. Rather than a "page" I would think about a "layer" - e.g. a div that overlays the site content and is there until someone has entered their age and clicked enter.
It would be easy to write a jQuery function that only adds the layer if the cookie is not set, i.e. the user hasn't verified their age.
Hope that helps! :)
That is an interesting idea.
Are you referring to this jQuery cookie plugin?
Because I've never done something like this, I could make a block to do it.
What kind of features would you be looking for?
I imagine it would need some custom text, some formatting options, and maybe an image.
Like madesimplemedia said, jQuery could be used to add an element to the body with a class that creates a page overlay. The overlay could be opaque or semi-transparent. The overlay z-index can be set so it sits on top of everything else - making the elements underneath unclickable.
But to not make it too complicated a simple yes (will give you access to the site) or no (go to google.com) will be great and a cookie for 12 hours or something. And some text and image will be good.
"Like madesimplemedia said, jQuery could be used to add an element to the body with a class that creates a page overlay. The overlay could be opaque or semi-transparent. The overlay z-index can be set so it sits on top of everything else - making the elements underneath unclickable. "
This is exactly the way I did it before (not as a block, but hardcoded), but I can't seem to get it right with C5 version 5.7 OR the Long story short theme.
- expiration time for the cookie can be set in the block - e.g. 24 hours, 3 days, etc
- required age can be set in the block
- overlay has a form field for entering the user date of birth
- text fields for verification messages
- overlay color picker
- optional image
- maybe some miscellaneous formatting options
I think I have a neat trick to get around older mobile browsers/iOS Safari bugs relating to position: fixed. Hopefully you have an iPhone to test it on. I test on iOS simulators and that works, but a real device is always the best option.
If made into a regular block, it will have to be used in a global area that all the templates share.
Another option, and something I am still learning how to do, is create a single page/dashboard package that will add it to all page views (addFooterItem).
Down the line, It would be interesting to see how to intercept the page. All pages would be routed to the verification page, then after verification, redirected to the intended page.
I threw this together as a quickie mockup. Load up your page and paste this into the console. Something like this would fire on page load if not verified.
$('body').append('<div style="height:100%;width:100%;position:fixed;left:0;top:0;z-index:999999!important;background-color:#000;outline:#000 solid 10000px;"><img style="display:block;max-width:100%;height:auto;margin:auto;" src="/application/files/5714/1882/7113/Logo.png" alt="Logo.png" width="500" height="283"><p style="margin-top:30px;text-align:center;font-family:Oswald;color:white;font-size:23px;">ENTER YOUR DATE OF BIRTH</p><div style="width:200px;margin-top:15px;margin-left:auto;margin-right:auto;"><input style="width:100%;font-size:20px;text-align:center;border: 4px solid #e8de6e;" type="text" placeholder="MM | DD | YYYY"></div><<p style="border: 2px solid grey;width:114px;margin-top:0px;margin-left:auto;margin-right:auto;display:block;background:#e8de6e;text-align:center;padding:2px;font-size:23px;">ENTER</p></div');
For live input, I might float three input text boxes next to each other inside a div. This would create the illusion of one single input and make parsing the input much easier.