Age verification / Landing page / Cookie notification

Permalink
So I'm trying to build a sort of landing page for a site, that always will show up, no matter which URL or path from the website is accessed (for example any link from google). But only for one time a day for example (cookie). A good example ishttp://www.bacardi.com/. This is with an age verification page, but it doesn't have to be a whole 'fill in your birthday' thingy. A simple Yes or No button on the question 'Over 18?' will suffice.

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.

FischerVision
View Replies:
madesimplemedia replied on at Permalink Reply
madesimplemedia
Hi,

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! :)

Dave
MrKDilkington replied on at Permalink Reply
MrKDilkington
@madesimplemedia

That is an interesting idea.

Are you referring to this jQuery cookie plugin?
https://github.com/carhartl/jquery-cookie...

@FischerVision

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.
madesimplemedia replied on at Permalink Reply
madesimplemedia
Hi, yes that looks like the plugin I've used before.
FischerVision replied on at Permalink Reply
FischerVision
The best solution for something with this is with an age input field. So it will need to be configured how old someone has te be to be on the site.

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.
FischerVision replied on at Permalink Reply
FischerVision
I've had the same idea, and succesfully implemented it in the previous versions of Concrete5. But in C5 5.7 with the template Long story short (http://www.concrete5.org/marketplace/themes/long-story-short1) it wasn't succesful and it broke the whole site. I don't know why and it could maybe just be a theme issue. I also know that I had rather a lot of trouble with implementing it in previous versions, but at the end it worked. That's why I'm looking for other possibilities, but maybe I should just try again..
madesimplemedia replied on at Permalink Reply
madesimplemedia
In what way did it break the site? Could you post a link and we can help?
FischerVision replied on at Permalink Reply
FischerVision
It's a couple of weeks back, but I'll implement it now again. Let's see what happens..
http://www.liquorstore-latenight.nl/...
FischerVision replied on at Permalink Reply
FischerVision
I remember what the problem was. I used jQuery CookiesDirective (http://cookiesdirective.com/). The problem was that the $. was in confict with the rest of the side, but when changing it to jQuery etc it still didn't work. I wanted this cookie bar so that I can transform it into an overlay instead of building it all myself.. What do you think?
madesimplemedia replied on at Permalink Reply
madesimplemedia
What was the conflict, did you add the jQuery library twice?
FischerVision replied on at Permalink Reply
FischerVision
That was the problem, there was no error.. The page just broke, but I don't remember how excatly
MrKDilkington replied on at Permalink Reply
MrKDilkington
OK, here is a list of block features.

- 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.
MrKDilkington replied on at Permalink Reply
MrKDilkington
@FischerVision

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.
FischerVision replied on at Permalink Reply
FischerVision
I think this is it. It feels simple and good. I can't think of any additions to what you already have said. I can test it with various apple devices when it's ready.