Поиграх си, докато докарам един ред код - не се извиква от външен сървър, асинхронен е и адаптиран към всяко мобилно устройство (за респонсив сайт). Взаимствах от кода, който е предоставил колегата Борисов
в този пост, като свалих и едитнах леко джава файла от сайта, предлагащ безплатната услуга. Тъй като избягвам да вграждам джунджурии с външни заявки, реших да събера двата кода в един JS файл -
cookies.js (поставен в директорията за скриптове в папка
js).
Вграден е не в хедъра, а преди затварящият се таг
</body>:
HTML:
<!-- Start Cookie Script -->
<script src="js/cookies.js" async></script>
<!-- End Cookie Script /-->
Това е кода, намиращ се в горния файл и
минимизиран според изискванията на Google Speed:
Код:
function initBar(){var e=document.createElement("div");e.id=data[0].ID,e.innerHTML="<style>#"+data[1].ID+" :hover{ background-color:"+data[1].HOVER+"!important; float:left; text-decoration:underline;}#"+data[0].ID+" p{text-align:left;color:#777;font-size:14px;line-height:19px;padding:0;margin:0;}</style><p>"+data[0].SHORT_TEXT_PRIVACY_DESCRIPTION+'</p><a onclick="setCookieBar()" href="javascript:void(0);" style="'+data[2].STYLE+'" id="'+data[2].ID+'">'+data[2].TEXT+'</a><a style="'+data[1].STYLE+'" id="'+data[1].ID+'" href="'+data[1].LINK+'">'+data[1].TEXT+"</a>",e.setAttribute("style",data[0].STYLE),document.getElementsByTagName("body")[0].appendChild(e)}function checkCookieBar(){var e=getCookie("privacy_policy_confirmation");""!=e||initBar()}function setCookieBar(){var e=new Date;e.setTime(e.getTime()+31536e6),document.cookie="privacy_policy_confirmation=1; expires="+e.toGMTString()+"; path=/",document.getElementById(data[0].ID).remove()}function getCookie(e){for(var a=e+"=",o=document.cookie.split(";"),t=0;t<o.length;t++){for(var i=o[t];" "==i.charAt(0);)i=i.substring(1);if(0==i.indexOf(a))return i.substring(a.length,i.length)}return""}var pageLang="bg",langTranslate={bg:["Този сайт използва услуги от Google за анализ на трафика и други трети страни, които запазват свои собствени бисквитки. Осведомете се как използват бисквитките за предоставяне на услугите си.","Още информация","Разбрах","/privacy-policy-page"]},cookieStyle=[{ID:"cookie-bar",SHORT_TEXT_PRIVACY_DESCRIPTION:langTranslate[pageLang][0],STYLE:"bottom:5px;left:5px;background:#f3f3f3;padding:13px;max-width:300px;position:fixed;z-index:9999;border:solid 1px #888;box-sizing:border-box"},{ID:"cookie-button",LINK:langTranslate[pageLang][3],TEXT:langTranslate[pageLang][1],HOVER:"rgb(236, 236, 236)",STYLE:"text-decoration:none;padding:7px; background:#888;border-radius: 2px 2px 2px 2px;-moz-border-radius: 2px 2px 2px 2px;-webkit-border-radius: 2px 2px 2px 2px;float:left;cursor:pointer;color:#fff;margin:9px 5px 9px 0"},{ID:"cookie-ok-button",TEXT:langTranslate[pageLang][2],STYLE:"text-decoration:none;padding:7px 19px; background:#ff9900;border-radius: 2px 2px 2px 2px;-moz-border-radius: 2px 2px 2px 2px;-webkit-border-radius: 2px 2px 2px 2px;float:right;cursor:pointer;color:#fff;margin:9px 0"}],data=cookieStyle;window.onload=checkCookieBar();
Ако решите да го използвате, можете да го копирате, редактирате в Notepad++ (оформление: UTF-8 без BOM ) и именувате под друго или същото име. В случай, че изберете различно име, трябва да го замените и в скрипта: <script src="js/novoime.js" async></script>
Можете да промените съдържанието според услугите, които използва сайта ви.
Съобщението, което се визуализира на сайта ми (линка в цитата) е:
Тук отново си играх да създам отделна страница, като описвам услугите, които сайта ми използва от трети страни - аналитикс, форма за коментари, социални бутони и т. н.
Ако има и други колеги с експерименти, нека постнат примери и да намерим най-подходящите решения за не натоварващ код.