[Box] Informacja o plikach Cookies

[Box] Informacja o plikach Cookies
11 Apr 2013

Według Nowego prawa telekomunikacyjnego na każdej stronie musi zostać umieszczona informacja o wykożystywanych plikach cookies.

Czym są pliki “cookies”?

Pliki “cookies” to małe pliki tekstowe rejestrujące aktywność użytkownika online. Ułatwiają poruszanie się po witrynie oraz podejmowanie rozmaitych działań, ponieważ rozpoznają urządzenie Użytkownika i wyświetlają stronę dopasowaną do jego indywidualnych preferencji. Ich wyłączenie może spowodować błędne działanie strony oraz brak dostępu do niektórych funkcji.
Wiemy już co to są tzw. Ciasteczka. Teraz w prosty sposób pokażę, jak umieścić na dowolną stronę, czy to jest sklep internetowy, CMS, czy zwykła strona HTML taki panel z informacją o ciasteczkach:

2013_04_11  15-10-49

Zanim zaczniesz pamiętaj:

Jeśli chcesz dodać box na stonę w zwykłym HTML’u, musisz umieścić kod w każdym pliku *.html. Natomiast jeśli kożystasz ze skryptu PHP, wrzuć kod do pliku nagłówkowego szablonu,  index.php, overall_header.tpl, gora.php itd..

Przejdźmy do realizacji kodu:

Po pierwsze musimy mieć nasz box, który będziemy wyświetlać. Oto gotowy kod:

<!–Ciasteczka–>
<div id=”black2″ style=”display: none;”></div>
<div id=”wrap”  style=”display: none;”>
    <div id=”white2″ style=”display: none;”>
        <div>
            <h3>Witaj, ta strona wykożystuje pliki Cookies </h3><a href=”#” onclick=’ciastkoOff(“ciacho”, 1, 360);’ id=”exit”>Akceptuje i Zamykam okno</a>
            <p>
             Korzystanie z witryny oznacza zgodę na wykorzystywanie plików cookie,
z których niektóre mogą być już zapisane w folderze przeglądarki.
Więcej informacji można znaleźć w <a href=”https://wojtek1150.com/cookie.html”>Polityce plików cookies.</a>
</p>
        </div>
    </div>
</div>
<!–Ciasteczka–>

Kod umieszczamy najlepiej tuż za znacznikiem <body>
Następnie należy go ostylować, tak więc:

/*Ciastka*/
.container{
    position: relative;
}
#white2 {
    background: none #fff;
    border: 0;
    display: block;
    width: 100%;
    height: 150px;
    overflow: auto;
    z-index: 10003;
padding:0;
margin:0;
}
#white2 a:link,#white2 a:visited{
color:#044986;
text-decoration:none;
}
#white2 a:hover{
color:#0775D6;
}
.ciacho-wrap-container{
    color: #323232;
    position: relative;
    left: 0;
    top: 0;
    z-index: 10002;
margin: 0;
padding:0;
}
.ciacho-inner-container {
    background: none repeat scroll 0 0 #F8F8F8;
    margin: 0 auto;
    padding: 5px;
    border: 0;
    width: 50%;
margin:auto;
}
.ciacho-wrap-container .ciacho-inner {
    background: none repeat scroll 0 0 transparent;
    position: relative;
width: 80%;
margin:auto;
}
.ciacho-wrap-container .ciacho-inner #exit{
    position: absolute;
    right: 200px;
    bottom: 5px;
    border: 1px solid #999;
    padding: 10px;
    font-size: 18px;
background-color: #0889F7;
color:#FFF;
text-decoration:none;
}
.ciacho-wrap-container .ciacho-inner h1,
.ciacho-wrap-container .ciacho-inner h2,
.ciacho-wrap-container .ciacho-inner h3{
    color: #23679e;
    font-size: 20px;
    font-weight: bold;
    line-height: 22px;
    margin-bottom: 20px;
    padding-top: 15px;
}
.ciacho-wrap-container .ciacho-inner form{
    width: 50%;
    padding: 20px 0;
}
.ciacho-wrap-container .ciacho-inner form input{
    width: 350px;
    border: 1px solid #999;
    height: 33px;
    line-height: 33px;
    padding: 0 10px;
}
.ciacho-wrap-container .ciacho-inner .ciacho_text,
.ciacho-wrap-container .ciacho-inner .ciacho_text2{
    width: 50%;
}
/*Ciastka*/

Kod umiesczamy w pliku *.css naszego szablonu.

Ostatnim krokiem, będzie dodanie skryptu Javascript, który będzie umożliwiam nam, wyświetlenie po 2 sekundach boxa, z  możliwością wyłączenia go. Wybór zostanie zapamiętany do chwili wygaśnięcia ciasteczek witryny. Oto gotowy kod:

<!– CIASTKA–>
<script type=”text/javascript”>
    document.onload = timeMsg();
    function timeMsg()
    {
        var t=setTimeout(“ciastkoOn()”,2000);
    }
    function getCookie(c_name)
    {
    var i,x,y,ARRcookies=document.cookie.split(“;”);
    for (i=0;i<ARRcookies.length;i++)
    {
      x=ARRcookies[i].substr(0,ARRcookies[i].indexOf(“=”));
      y=ARRcookies[i].substr(ARRcookies[i].indexOf(“=”)+1);
      x=x.replace(/^\s+|\s+$/g,””);
      if (x==c_name)
        {
        return unescape(y);
        }
      }
    }
    function ciastkoOn()
    {
        var username=getCookie(“ciacho”);
        if (username!=null && username!=””)
            {
            document.getElementById(“white2”).style.display = “none”;
            document.getElementById(“black2”).style.display = “none”;
            document.getElementById(“wrap”).style.display = “none”;
            }
        else
            {
            document.getElementById(“white2”).style.display = “block”;
            document.getElementById(“black2”).style.display = “block”;
            document.getElementById(“wrap”).style.display = “block”;
            }
    }
    function ciastkoOff(c_name,value,exdays)
    {
        var exdate=new Date();
        exdate.setDate(exdate.getDate() + exdays);
        var c_value=escape(value) + ((exdays==null) ? “” : “; expires=”+exdate.toUTCString());
        document.cookie=c_name + “=” + c_value;
        document.getElementById(“white2”).style.display = “none”;
        document.getElementById(“black2”).style.display = “none”;
        document.getElementById(“wrap”).style.display = “none”;
    }
</script>
<!–CIASTKA–>