LIVE DEMO - CODEPEN

Question

我们刚刚将我们的网站从Shopify平台移动到Wordpress平台，我做了所有的CSS，所以一切看起来都一模一样。

在我们的Shopify网站上 - 我们使用此代码在允许客户进入之前创建我们的年龄验证 - 因为我们的网站销售烟草产品。

当我在Wordpress网站上应用相同的代码时，一切正常。但主要功能被打破了。当您点击“我是我”以回应我们的18或以上的问题时，弹出窗口应在14天的时间范围内消失，然后再出现。

它在shopify上工作正常但是当我将它应用于wordpress时，jsfiddle，codepen它无效。

有人可以看看吗？

LIVE DEMO - CODEPEN

以下是我们使用的脚本：

 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>

我刚发现这个丢失的代码。我认为它的PHP？这是为什么它不起作用？我将如何将其应用到我的wordpress网站？

{% 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 %}

因为即使粘贴了上面的代码 - 它不起作用，仍然说未定义的年龄。谢谢！

Answer 1

看看这个jsFiddle

或在此代码段：

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>

或此codepen

它适用于本地，所以我希望这会有所帮助。

干杯。

修改

适用于w3schools。

Answer 2

Shopify使用的模板引擎中的“缺失代码”，称为Liquid。它不是PHP，而不是Javascript。你将不得不让某人根据它对你的WordPress网站进行调整，因为它不会按原样运作。

此网站用于帮助那些遇到代码问题的人，但不会编写新的代码。当您在平台之间切换时，您需要提前考虑这一点。

祝你好运

年龄验证无法在新网站上运行

LIVE DEMO - CODEPEN

2 个答案: