Damit meine Seite rechtssicher (nach der EU-Cookie-Richtlinie) wird, möchte ich auf meiner Seite einen Button einbauen, damit der Besucher Cookies akzeptieren muss bevor er meine Seite betritt?
Hierfür sind mehrere Schritte/Elemente notwendig: Zuallererst wird natürlich der Button sowie eine entsprechende Meldung benötigt. Dieser wird ganz unten in der index.php des Templates, direkt vor dem </body>-Tag eingesetzt. <HTML> <!– CookieNotice.html copyright: Manuela v.d.Decken manuela@isteam.de author: Manuela v.d.Decken manuela@isteam.de license: http://www.gnu.org/licenses/gpl.html GPL License version: 0.0.1 –>
<div id="CookieNotice"> <div id="CookieNoticeBar"> <span id="CookieNoticeClose">X</span> <span id="CookieNoticeInfo">!! HIER WIRD DER GEWÜNSCHTE HINWEISTEXT EINGESETZT !!</span> </div> </div> <script charset="utf-8" type="text/javascript" src="<?php echo oReg.TemplateUrl; ?>js/CookieNotice.min.js"></script>
</HTML> Da hier ein JScript aufgerufen wird, sollte man das natürlich auch noch in den /js/ Ordner des Templates packen.
/** CookieNotice.min.js copyright: Manuela v.d.Decken <manuela@isteam.de> author: Manuela v.d.Decken <manuela@isteam.de> license: http://www.gnu.org/licenses/gpl.html GPL License version: 0.0.1 */function CookieNotice(e){var o=7,t=this;this.Box=document.getElementById(e),this.hideNotice=function(e){e=e||window.event;var i=e.target||e.srcElement;"CookieNoticeClose"==i.id&&(t.Box.style.display="none",t.setCookie("CookieNoticeVisible","none",o),e.stopPropagation?e.stopPropagation():e.cancelBubble=!0)},this.setCookie=function(e,o,t){var i=new Date;i.setTime(i.getTime()+864e5*t);var n="expires="+i.toGMTString();document.cookie=e+"="+o+";path=/; "+n},this.getCookie=function(e){for(var o=e+"=",t=document.cookie.split(";"),i=0;i<t.length;i++){for(var n=t[i];" "==n.charAt(0);)n=n.substring(1);if(0===n.indexOf(o))return n.substring(o.length,n.length)}return""},this.start=function(){var e=t.getCookie("CookieNoticeVisible");"none"!=e&&(t.Box.style.display="block")},this.Box.onclick=t.hideNotice,this.start()}new CookieNotice("CookieNotice");
Gut, das ist jetzt natürlich hervorragend lesbar. Deshalb hier der Code noch einmal, jedoch in Klartext:
/* * DO NOT ALTER OR REMOVE COPYRIGHT NOTICES OR THIS HEADER. * * This program is free software: you can redistribute it and/or modify * it under the terms of the GNU General Public License as published by * the Free Software Foundation, either version 3 of the License, or * (at your option) any later version. * * This program is distributed in the hope that it will be useful, * but WITHOUT ANY WARRANTY; without even the implied warranty of * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the * GNU General Public License for more details. * * You should have received a copy of the GNU General Public License * along with this program. If not, see <http://www.gnu.org/licenses/>. */ /** ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ * * CookieNotice.js * * @category Template * @copyright Manuela v.d.Decken <manuela@isteam.de> * @author Manuela v.d.Decken <manuela@isteam.de> * @license http://www.gnu.org/licenses/gpl.html GPL License * @version 0.0.1 * @lastmodified 19.09.2015 * @since File available since 04.07.2015 * @description switch off the cookie notice for n days (by default after 7 days the cookie will be removed again) ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/ function CookieNotice(NoticeAreaId) { var CookieLifetime = 7; // lifetime of the cookie in days var thisObject = this; this.Box = document.getElementById(NoticeAreaId); this.hideNotice = function(e) { e = e || window.event; var target = e.target || e.srcElement; if (target.id == 'CookieNoticeClose') { thisObject.Box.style.display = 'none'; thisObject.setCookie("CookieNoticeVisible", "none", CookieLifetime); if (e.stopPropagation) { e.stopPropagation(); } else { e.cancelBubble = true; } } }; this.setCookie = function(cname,cvalue,exdays) { var d = new Date(); d.setTime(d.getTime() + (exdays*86400000)); var expires = "expires=" + d.toGMTString(); document.cookie = cname+"="+cvalue+"; path=/; "+expires; }; this.getCookie = function(cname) { var name = cname + "="; var ca = document.cookie.split(';'); for(var i=0; i<ca.length; i++) { var c = ca[i]; while (c.charAt(0)==' ') c = c.substring(1); if (c.indexOf(name) === 0) { return c.substring(name.length, c.length); } } return ""; }; this.start = function() { var value = thisObject.getCookie('CookieNoticeVisible'); if (value != 'none') { thisObject.Box.style.display = 'block'; } }; this.Box.onclick = thisObject.hideNotice; this.start(); } /*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ show the cookie notice if needed ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/ new CookieNotice('CookieNotice');
Jetzt fehlt nur noch die Optik. Dazu wird die nachfolgende CSS-Datei einfach als letztes CSS im <head> eingebunden.
/** ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ * * CookieNotice.css * * @category Template * @copyright Manuela v.d.Decken <manuela@isteam.de> * @author Manuela v.d.Decken <manuela@isteam.de> * @license http://www.gnu.org/licenses/gpl.html GPL License * @version 0.0.1 * @lastmodified 19.09.2015 * @since File available since 04.07.2015 * @description switch off the cookie notice for n days (by default after 7 days the cookie will be removed again) ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/ /*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ format the cookie notice ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/ #CookieNotice { box-sizing: border-box; position: fixed; left: 0; top: 0; right: 0; bottom: 0; padding: 15px; background-color: rgba(120, 120, 120, 0.6); display: none; z-index: 9999; } #CookieNoticeBar { position: relative; top: 30%; background-color: rgba(244,239,195,0.8); text-align: center; color: #777; font-size: 0.9em; padding: 6px 4px; border-radius: 6px; border: solid 1px red; } #CookieNoticeClose { float:right; background: #ff0000; color: #ffffff; font-weight: bold; width: 1.525em; cursor: pointer; border-radius: 4px; } #CookieNoticeInfo {} /*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
..nächste Antwort