Question posted in 
We just moved our website from a Shopify platform to a WordPress platform and i did all the css so everything would look exactly the same.
On our Shopify website – we were using this code to create our age verification before allowing customers to enter – since our site sells tobacco products.
When I apply the same code on our WordPress website everything displays fine. But the main function is broken. When you click “yes i am” in response to our 18 or over question the popup should disappear for the time frame of 14 days before appearing again.
It works fine on shopify but when I apply it to wordpress, jsfiddle, codepen its not working.
Can someone have a look?
LIVE DEMO – CODEPEN
Here is the script we are using:
function ageCheck() {
var min_age = {age}; // Set the minimum age.
var year = parseInt(document.getElementById('byear').value);
var month = parseInt(document.getElementById('bmonth').value);
var day = parseInt(document.getElementById('bday').value);
var theirDate = new Date((year + min_age), month, day);
var today = new Date;
if ((today.getTime() - theirDate.getTime()) < 0) {
window.location = 'http://google.com'; //enter domain url where you would like the underaged visitor to be sent to.
} else {
var days = 14; //number of days until they must go through the age checker again.
var date = new Date();
date.setTime(date.getTime()+(days*24*60*60*1000));
var expires = "; expires="+date.toGMTString();
document.cookie = 'isAnAdult=true;'+expires+"; path=/";
location.reload();
};
};
function readCookie(name) {
var nameEQ = name + "=";
var ca = document.cookie.split(';');
for(var i=0;i < ca.length;i++) {
var c = ca[i];
while (c.charAt(0)==' ') c = c.substring(1,c.length);
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
}
return null;
};
var isAnAdult = readCookie('isAnAdult');
if (isAnAdult) {
document.write("<style> #prompt-background { display: none; }</style>");
};
function ageCheck() {
var min_age = {
age
}; // Set the minimum age.
var year = parseInt(document.getElementById('byear').value);
var month = parseInt(document.getElementById('bmonth').value);
var day = parseInt(document.getElementById('bday').value);
var theirDate = new Date((year + min_age), month, day);
var today = new Date;
if ((today.getTime() - theirDate.getTime()) < 0) {
window.location = 'http://google.com'; //enter domain url where you would like the underaged visitor to be sent to.
} else {
var days = 14; //number of days until they must go through the age checker again.
var date = new Date();
date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
var expires = "; expires=" + date.toGMTString();
document.cookie = 'isAnAdult=true;' + expires + "; path=/";
location.reload();
};
};
function readCookie(name) {
var nameEQ = name + "=";
var ca = document.cookie.split(';');
for (var i = 0; i < ca.length; i++) {
var c = ca[i];
while (c.charAt(0) == ' ') c = c.substring(1, c.length);
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);
}
return null;
};
var isAnAdult = readCookie('isAnAdult');
if (isAnAdult) {
document.write("<style> #prompt-background { display: none; }</style>");
};.modal-prompt {
background: #fff;
border-radius: 2px;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
max-width: 375px;
height: auto;
margin: 0 auto;
padding: 20px 35px 30px 35px;
position: relative;
top: 25%;
z-index: 1000000;
}
.modal-prompt p,
.modal-prompt h1 {
color: #555555;
}
#prompt-background {
background: url("{{ 'age-check-background.jpg' | asset_url }}") no-repeat center center fixed #555;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
width: 100%;
height: 100%;
position: fixed;
left: 0;
top: 0;
z-index: 9999999;
background: rgba(0, 0, 0, 0.5);
}
.modal-prompt select {
float: left;
margin-right: 10px;
}
h1 {
font-size: 25px;
line-height: 32px;
font-family: "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
font-style: normal;
font-weight: normal;
}
h2 {
font-size: 18px;
line-height: 24px;
font-family: "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
}
.modal-prompt {
background: #fff;
border-radius: 2px;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
height: auto;
margin: 0 auto;
padding: 20px 35px 30px 35px;
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
z-index: 1000000;
}
p {
line-height: 22px;
margin-bottom: 20px;
display: block;
-webkit-margin-before: 1em;
-webkit-margin-after: 1em;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
font-family: 'Helvetica Neue', Arial, Helvetica, Geneva, sans-serif;
font-size: 12px;
}
button {
color: white;
}<div id="prompt-background">
<div id="age-check-prompt" class="modal-prompt" style="text-align:center;">
<h1 class="mobileHeaderHidden">vapesocietysupplies.com</h1>
<div>
<a href="/collections/the-stand-e-juice">
<img src="https://vapesocietysupplies.com/wp-content/uploads/2016/11/Kilo_Age-ver_BNR.jpg" alt="Collection Image" style="width: 100%;">
</a>
</div>
<h2>ADULTS ONLY, ARE YOU OF LEGAL SMOKING AGE?</h2>
<p>By entering vapesocietysupplies.com, You certify that you are of legal smoking age in the state in which you reside.</p>
<div style="display:none;">
<select name="bmonth" id="bmonth" value="1">
</select>
<select name="bday" id="bday" value="1">
</select>
<select name="byear" id="byear" value="1950">
</select>
<div style="clear:both; margin-bottom:15px"></div>
</div>
<button id="submit_birthdate" class="button-enter btn styled-submit" onclick="ageCheck()" style="display:inline-block; background-color:black;">Yes I am</button>
<span style="padding: 0 4px"></span>
<button id="button-exit" class="button-enter btn styled-submit" onclick="location.href='http://google.com';" style="display:inline-block; background-color:black;">No I am not</button>
<!--<a href="http://google.com/" id="button-exit" name="button-exit">Exit</a>-->
</div>
</div>I just found this missing code. I think its php? Is this why its not working? how would I go about applying it to my wordpress site?
{% assign enter_date_of_birth = false %}
{% assign age = 18 %}
{% capture adult_header %}
ADULTS ONLY, ARE YOU OF LEGAL SMOKING AGE?
{% endcapture %}
{% capture adult_text %}
This website contains adult material and is only suitable for those 18 years or older. Click Enter only if you are at least 18 years of age.
{% endcapture %}
Because even with the above code pasted in – its not working and still says age not defined. Thanks!
2
Answers
Look at this jsFiddle
or at this code snippet:
or this codepen
It worked local, so I hope this helps.
Cheers.
EDIT:
It works on w3schools.
Your “missing code” from a template engine that Shopify uses, called Liquid. It is not PHP, and not Javascript. You’re going to have to get someone to adapt what it does to your WordPress site, because it’s not going to work as it is.
This site is for helping people who are having issues with their code, but not to write new code. When you are switching between platforms, this is something you need to consider ahead of time.
Good luck