Если Вам на сайт нужно установить всплывающее окно для проверки возраста покупателя, то Вам нужно произвести следующие изменения:
1) Зайти в раздел Сайт - Редактор шаблонов, открыть шаблон HTML и после тега
<body>
добавить код:
<div id="ageCheck" style="display:none;">
<div class="ageCheckContent">
<div class="ageCheckWrp">
<div class="ageCheckHeader">Вам уже исполнилось 18 лет?</div>
<div class="ageCheckText active"> Содержание сайта предназначено для просмотра исключительно лицам достигшим совершеннолетия!</div>
<div class="ageCheckTextAfterClose">Уважаемый посетитель, мы вынуждены отказать вам в посещении сайта.Содержание сайта предназначено для просмотра исключительно лицам достигшим совершеннолетия!</div>
<div class="ageCheckButtonsContainer">
<div class="ageCheckButton button">Естественно!</div>
<div class="ageCheckClose button">Нет :(</div>
</div>
</div>
</div>
</div>
2) В самый конец шаблона main.css добавить код:
/*18+*/
#ageCheck{width:100%;height:100%;position:fixed;left:0;top:0;flex-wrap:wrap;display:flex;align-items:center;background:rgba(46,0,65,0.9);z-index:10000;overflow-y:auto;}
#ageCheck .ageCheckContent{width:90%;max-height:80%;margin:0 auto;overflow:hidden;max-width:810px;padding:40px;position:relative;text-align:center;background-size:100px;}
#ageCheck .ageCheckContent .ageCheckWrp{max-height:500px;overflow:hidden;overflow-y:auto;}
#ageCheck .ageCheckContent .ageCheckWrp .ageCheckHeader{font-size:30px;color:#2e0041;line-height:64px;margin-bottom:20px;}
#ageCheck .ageCheckContent .ageCheckWrp .ageCheckText{font-size:14px;color:#2e0041;margin-bottom:40px;line-height:24px;display:none;}
#ageCheck .ageCheckContent .ageCheckWrp .ageCheckText.active{display:block;}
#ageCheck .ageCheckContent .ageCheckWrp .ageCheckButtonsContainer{display:flex;flex-wrap:wrap;justify-content:center;}
#ageCheck .ageCheckContent .ageCheckWrp .ageCheckTextAfterClose{font-size:14px;color:#2e0041;margin-bottom:40px;line-height:24px;display:none;}
#ageCheck .ageCheckContent .ageCheckWrp .ageCheckTextAfterClose.active{display:block;}
#ageCheck .ageCheckContent .ageCheckWrp .ageCheckClose{margin-left:30px;color:#2e0041;background:#f4d9ff;}
#ageCheck .ageCheckContent .ageCheckWrp .ageCheckClose:hover{color: #ffffff;background: #5c065e;}
3) В самый конец шаблона main.js добавьте:
$(function(){
$('.ageCheckButton').on('click',function(){
$('#ageCheck').remove();
})
$('.ageCheckClose').on('click',function(){
if($('.ageCheckText').hasClass('active')){
$('.ageCheckText').removeClass('active');
$('.ageCheckTextAfterClose').addClass('active');
}else{
$('.ageCheckTextAfterClose').removeClass('active');
$('.ageCheckText').addClass('active');
}
})
})
// Баннер уведомления
$(function(){
function ageCounter() {
// Если в куках нет записи
if(!$.cookie('ageCheck')){
var ageCheck = $('#ageCheck');
// Показываем баннер
ageCheck.show();
$('.ageCheckButton').on('click', function(){
// Скрываем баннер
ageCheck.hide()
// Запоминаем в куках, что посетитель уже заходил
$.cookie('ageCheck', true, {
// Время хранения cookie в днях
expires: 1,
path: '/'
});
})
}
}
ageCounter();
})
4) В конец шаблоне forall.js добавьте код:
/*
* name: jQuery Cookie
* version: 1.0
* file: jquery.cookie.min.js
* site: https://webcareer.ru/jquery-cookies-rabota-s-kukami-na-jquery.html
*/
jQuery.cookie=function(b,j,m){if(typeof j!="undefined"){m=m||{};if(j===null){j="";m.expires=-1}var e="";if(m.expires&&(typeof m.expires=="number"||m.expires.toUTCString)){var f;if(typeof m.expires=="number"){f=new Date();f.setTime(f.getTime()+(m.expires*24*60*60*1000))}else{f=m.expires}e="; expires="+f.toUTCString()}var l=m.path?"; path="+(m.path):"";var g=m.domain?"; domain="+(m.domain):"";var a=m.secure?"; secure":"";document.cookie=[b,"=",encodeURIComponent(j),e,l,g,a].join("")}else{var d=null;if(document.cookie&&document.cookie!=""){var k=document.cookie.split(";");for(var h=0;h<k.length;h++){var c=jQuery.trim(k[h]);if(c.substring(0,b.length+1)==(b+"=")){d=decodeURIComponent(c.substring(b.length+1));break}}}return d}};