PortalP PortalP - 8 days ago 4
CSS Question

Age verification not working on new site

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!

Answer

Look at this jsFiddle

or at this code snippet:

function ageCheck() {
     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) {
 	var elem = document.getElementById("prompt-background");
  elem.parentNode.removeChild(elem);
 };
.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>
    <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>

or this codepen

It worked local, so I hope this helps.

Cheers.


EDIT:

It works on w3schools.