0
/* Уведомление в шапке*/
.banner-top {background: #777777;color: #fff;position: relative;}
.banner-top-wrapper {display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;padding: 20px 0}
.banner-top-icon {width: 40px;height: 40px;font-size: 20px;line-height: 36px;text-align: center;border: 1px solid #ffffff;border-radius: 50%;margin-right: 15px;flex: 0 0 40px}
.banner-top-closeBtn {position: absolute;top: 10px;right: 10px;width: 20px;height: 20px;-webkit-transition: -webkit-transform .15s ease-out;transition: -webkit-transform .15s ease-out;transition: transform .15s ease-out;transition: transform .15s ease-out,-webkit-transform .15s ease-out;font-size: 0}
.banner-top-closeBtn:hover {-webkit-transform: rotate(90deg);transform: rotate(90deg)}
.banner-top-closeBtn:after,.banner-top-closeBtn:before {content: '';position: absolute;width: 100%;height: 1px;top: 50%;left: 0;background-color: #4a4a4a}
.banner-top-closeBtn:before {-webkit-transform: rotate(45deg);transform: rotate(45deg)}
.banner-top-closeBtn:after {-webkit-transform: rotate(-45deg);transform: rotate(-45deg)}
.banner-top a {color: #fff;}
Зайдите в Редактор шаблонов --- 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}};
Зайдите в Редактор шаблонов --- main.js и добавьте в самый конец шаблона код:
// Баннер уведомления
$(function(){
function banner() {
// Если в куках нет записи
if(!$.cookie('banner-top')){
var $bannerTop = $('.banner-top');
// Показываем баннер
$bannerTop.show()
$('.banner-top .banner-top-closeBtn').on('click', function(){
// Скрываем баннер
$bannerTop.hide()
// Запоминаем в куках, что посетитель уже заходил
$.cookie('banner-top', true, {
// Время хранения cookie в днях
expires: 1,
path: '/'
});
})
}
}
// Уберите комментарии // со строчек ниже для запуска
banner();
})
В Редакторе шаблонов---HTML, найдите код:
<!-- Шапка (логотип, каталог)-->
И перед ним добавьте данный код:
<!-- Уведомление --> <div class="banner-top" style="display:none"> <div class="container"> <div class="banner-top-wrapper"> <div class="banner-top-icon"> <i class="fa fa-info" aria-hidden="true"></i> </div> <div class="banner-top-content"> <strong class="banner-top-title">Заголовок уведомления</strong> <div class="banner-top-text"><a class="pseudo-link" href="#">Здесь может быть Ваш текст уведомления со ссылкой</a></div> </div> </div> </div> <button class="banner-top-closeBtn" type="button">Закрыть</button> </div>
