Last active
November 17, 2022 19:40
-
-
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.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <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 - 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') ) {
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
@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