theme Theme customization: easy way to display age verification popup

[Tech Support]

 

This is the code for KVS default theme, but should also work for other themes as well. May need CSS adjustments for popup dialog to be displayed correctly (each theme may use their own CSS styles).

Please put this code into Website UI -> Page components -> include_footer_general.tpl right before the closing </body> tag:

<div id="ageverify" class="hidden">
   <strong class="popup-title">Age confirmation</strong>
   <div class="popup-holder">
       <form>
           <p style="margin-bottom: 10px">
               By using the site, you acknowledge you are at least 18 years old.
           </p>
           <div class="bottom">
               <input type="button" name="continue" class="submit" value="Continue" style="margin-right: 10px">
               <input type="button" name="exit" class="submit" value="Exit">
           </div>
       </form>
   </div>
</div>
<script>
   if ($.cookie('kt_agecheck') != '1') {
       setTimeout(function () {
           $.fancybox($('#ageverify').html(), {
               topRatio: 0.3,
               closeBtn: false,
               modal: true,
               afterShow: function () {
                   this.inner.find('input').click(function () {
                       if ($(this).attr('name') == 'continue') {
                           $.cookie('kt_agecheck', '1', {expires: 365, path: '/', samesite: 'Lax'});
                           $.fancybox.close();
                       } else {
                           window.location = 'https://google.com';
                       }
                   });
               }
           });
       }, 10);
   }
</script>

 

If you want this age check to be displayed for visitors from certain countries only, you should move it to an advertising and configure this advertising to be displayed only for the selected countries.

First, go to Website UI -> Advertising and create a new advertising spot named Age Verify with external ID = spot_age_verify. Do not specify HTML code for the spot.

Then create a new Advertising and choose it into Age Verify spot. Copy-paste the code above into advertising HTML code. Select the countries you want it to be limited to.

Finally insert this advertising spot into Website UI -> Page components -> include_footer_general.tpl right before the closing </body> tag:

{{insert name="getAdv" place_id="spot_age_verify"}}

 

If your server has GEOIP module installed and can detect countries correctly, visitors from the configured countries should be able to see this age verification warning.

[mongoose657]

How can we make this show less frequently, instead of every session for each user?

[Tech Support]

On 10/24/2020 at 2:36 PM, dj01039 said:

How can we make this show less frequently, instead of every session for each user?

 

Thanks for pointing this out, we fixed code to set cookie for 365 days instead of just session, this line changed:

$.cookie('kt_agecheck', '1', {expires: 365, path: '/', samesite: 'Lax'});

 

[phseven]

How to blur background?

[Tech Support]

20 hours ago, phseven said:

How to blur background?

Try adding this CSS:

.fancybox-overlay {
  backdrop-filter: blur(5px);
}

but it will also affect all popups, not the agecheck. Unfortunately I don't see an option with Fancybox v2 that KVS theme uses to supply custom classname for the given popup, so that CSS can be restricted solely for it.

[drastic]

we have 18+ content blurred out on two categories.

how can I display a "please login to see this" message on the blurred image instead of the pop?

[Tech Support]

12 hours ago, drastic said:

how can I display a "please login to see this" message on the blurred image instead of the pop?

Please create support ticket for this.