Benutzer-Werkzeuge

Webseiten-Werkzeuge


design:snippets

Hilfreiche Code-Schnipsel

Verschiedenes

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
/** 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:

CookieNotice.js
/*
 * 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
/** ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 *
 * 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

design/snippets.txt · Zuletzt geändert: 21.09.2015 12:13 von Manuela v.d.Decken