Announcement

Collapse
No announcement yet.

Theme customization: easy way to display age verification popup

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • Theme customization: easy way to display age verification popup

    Click image for larger version  Name:	age_verification.png Views:	0 Size:	62.6 KB ID:	1327

    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:

    HTML Code:
    <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', {path: '/'});
                                $.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:
    HTML Code:
    {{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.
Working...
X