-
-
Save jupitercow/d890d8f68d5e54160e06ed7ccc1ef87d to your computer and use it in GitHub Desktop.
<script> | |
/* | |
Squarespace Age Gate. | |
- Create a "Cover Page" under Pages > Not Linked. | |
- Click the gear icon, go to Advanced tab in the popup, paste this code. | |
- This sets the cookie and handles the redirect back to the requested content. | |
- On the age gate page, you have to create a button that has "#legal" as the link or href. It is what turns off the age gate. | |
- Elsewhere on the site, you can test for the cookie (legal), and if not set, rediret to the age gate Cover Page (example at the bottom). | |
*/ | |
/** | |
* Obtains and stores the query parameters passed in the url (?redirect_to=https://example.com). | |
* To use a parameter (eg: "redirect_to"): "QueryString.redirect_to" | |
*/ | |
var QueryString = function() { | |
var query_string = {}; | |
var query = window.location.search.substring(1); | |
var vars = query.split("&"); | |
for (var i=0;i<vars.length;i++) { | |
var pair = vars[i].split("="); | |
if (typeof query_string[pair[0]] === "undefined") { | |
query_string[pair[0]] = pair[1]; | |
} else if (typeof query_string[pair[0]] === "string") { | |
var arr = [ query_string[pair[0]], pair[1] ]; | |
query_string[pair[0]] = arr; | |
} else { | |
query_string[pair[0]].push(pair[1]); | |
} | |
} | |
return query_string; | |
}(); | |
/** | |
* Sets the cookie "name" and "value" to expire in "days" from now | |
* "url" will redirect to that url afterwards | |
* Remove "expires" section to turn into a current session cookie | |
* document.cookie = name + "=" + value + "; path=/"; | |
* | |
* @param {string} name | |
* @param {string} value | |
* @param {string} exdays | |
* @param {string} url | |
* @returns {} | |
*/ | |
function setCookie(name, value, days, url) { | |
var d = new Date(); | |
d.setTime(d.getTime() + (days * 24 * 60 * 60 * 1000)); | |
var expires = "expires="+d.toGMTString(); | |
document.cookie = name + "=" + value + "; " + expires + "; path=/"; | |
// Redirect to the homepage if no url is provided | |
if (!url) { | |
url = "/"; | |
} | |
window.location.href = decodeURIComponent(url); | |
} | |
/** | |
* On page document loaded | |
*/ | |
document.addEventListener('DOMContentLoaded', function() { | |
// YOU MUST HAVE BUTTON WITH HREF set to #legal | |
// This is the accept button and sets everything in motion | |
var button = document.querySelector('a[href="#legal"]'); | |
button.addEventListener('click', function(e) { | |
e.preventDefault(); | |
// Sets a cookie named "legal" with value 1 or true for 365 days | |
// If redirect_to is used, it will redirect to it, otherwise, by default, redirects to the homepage | |
setCookie('legal', '1', 365, QueryString.redirect_to); | |
}); | |
}); | |
</script> | |
<script> | |
/* | |
Quick example to test for the cookie and redirect. I haven't tested this. | |
You will need to set ageGateUrl equal to your age gate's Cover Page URL | |
*/ | |
var getCookie = function(name) { | |
var value = "; " + document.cookie; | |
var parts = value.split("; " + name + "="); | |
if (parts.length == 2) { | |
return parts.pop().split(";").shift(); | |
} | |
}; | |
document.addEventListener('DOMContentLoaded', function() { | |
if (!getCookie('legal')) { | |
var ageGateUrl = "[your age gate cover page link]";// <----- Add your age gate url here | |
var currentUrl = window.location.href; | |
var addRedirect = "?redirect_to=" + encodeURIComponent(currentUrl); | |
window.location.href = decodeURIComponent( ageGateUrl + addRedirect ); | |
} | |
}); | |
</script> |
@jupitercow that's understandable - from my understanding of your instructions, I should just need to paste the code into the Advanced section of a newly created cover page and replace the "age gate url" at the bottom of the instructions with my age gate's url and the code should work? Many thanks
@jupitercow - help! I just can NOT get this to work. I have it pasted into the code injection portion of my age gate page, named "age-gate". I have the button for "yes" link to "#legal"... What am I missing? The page simply doesn't appear. I tried with and without an expiration timer, no dice. tried on multiple browsers. Do I need to paste something into the site-wide CSS? I did at first, but squarespace keeps saying there's a syntax error when I paste it there... the site itself is live if having that will help? take16beer.com/age-gate
The first script block goes onto the age verification page under the advanced tab.
The second script block goes into Site -> Advanced -> Code Injection to be displayed sitewide.
The conditional on line 89 should be updated to include a check to see make sure you're NOT on the Age Gate page itself:
if (!getCookie('legal') && !window.location.search.includes('redirect_to') ) {
Unfortunately. I don't have active access to a squarespace site, so I am not much help beyond what is provided above.