Skip to content

Instantly share code, notes, and snippets.

@jupitercow
Last active November 17, 2022 19:40
Show Gist options
  • Save jupitercow/d890d8f68d5e54160e06ed7ccc1ef87d to your computer and use it in GitHub Desktop.
Save jupitercow/d890d8f68d5e54160e06ed7ccc1ef87d to your computer and use it in GitHub Desktop.
Squarespace Age Gate. Add this code just to the Age Gate page. This is usually 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.
<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>
@avamariadesign
Copy link

avamariadesign commented Feb 22, 2022

@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

@lucas-pelton
Copy link

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') ) {

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment