Jak dodać informację o cookies do sklepu Shoper?

Miało być wczoraj ale nie wytrzymałem już więcej przed monitorem także wybaczcie małe opóźnienie. Poradnik, który Wam tu przedstawiam będzie służył dodaniu informacji o obsłudze ciasteczek na stronie sklepu wraz z przyciskiem akceptacji. Ponieważ nie lubię wyważać otwartych drzwi 🙂 dzisiejszy kod powstał w oparciu o jedno z rozwiązań jakie już opisywałem.

Założenia są takie by po wejściu do sklepu klient zobaczył okno z informacją o ciasteczkach i mógł akceptować warunki korzystania ze sklepu.

Wyskakujące okienko z tekstem omawiałem już przy okazji poradnika z zachętą do zapisania się w newsleterze zatem większość kodu nam się tu pokryje.

AKTUALIZACJA z 10 KWIETNIA

Shoper wydał własny skrypt umożliwiający dodanie informacji o cookies (dostępny od wersji 5.4.8)

AKTUALIZACJA z 27 MARCA

——————nowa wersja w formie zakładki na dole strony —————————

Na prośbę kilku osób stworzyłem drugą wersję którą oczywiście można ja zobaczyć na sklep.szablonsklep.pl a pliki są do pobrania pod tym linkiem Kliknij by pobrać plik

W tej wersji okno z informacją pojawia się na dole strony podobnie do tego na heppin.com.

Poniżej umieszczony jest opis dodania kodu, całość to tak naprawdę dwa małe kroki w zależności od tego jaką formę prezentacji informacji wybierzecie pobierzcie odpowiednie pliki.

——————wcześniejsza wersja w formie popup—————————

 

Krok 1 – to stworzenie kodu HTML odpowiedzialnego za popup z informacją oraz dodatkowy kod javascript który pozwoli nam zapisać akceptację tak by okno nie pojawiało się przy poruszaniu się po sklepie.

 

Nie kopiujcie tego kodu bezpośrednio z bloga i nie wklejajcie do sklep, nie będzie on działać poprawnie! Na dole wpisu jest link do plików tekstowych z całym kodem.

 



Kod ten wgrajcie w panelu administracyjnym w dziale Konfiguracja/Integracje własne w sekcji „Stopka strony, przed zamknięciem </body>”.

Oczywiście proponuję edytować tekst tak by dostosować go do własnych potrzeb.

 

Krok 2 – to ostylowanie naszego boksu z informacją tak by wyglądał choć odrobinę sensownie:

.container{
    position: relative;
}
#black2 {
    background-color: rgb(0,0,0);
    display: block;
    height: 100%;
    left: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
                filter: alpha(opacity=50);
                -moz-opacity: 0.5;
                -khtml-opacity: 0.5;
                opacity: 0.5;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 10001;
}
#white2 {
    background: none #fff;
    border: 0;
    display: block;
    width: 800px;
    min-height: 250px;
    overflow: auto;
    padding: 30px 50px;
    z-index: 10003;
    margin: 100px auto;
}
.ciacho-wrap-container{
    color: #323232;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 10002;
}
.ciacho-wrap-container .ciacho-inner-container {
    background: none repeat scroll 0 0 #F8F8F8;
    margin: 0 auto;
    padding: 5px;
    border: 0;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -ms-border-radius: 3px;
    border-radius: 3px;
    width: 800px;
}
.ciacho-wrap-container .ciacho-inner {
    background: none repeat scroll 0 0 transparent;
    padding: 20px;
    position: relative;
}
.ciacho-wrap-container .ciacho-inner #exit{
    position: absolute;
    right: 5px;
    bottom: 5px;
    border: 1px solid #999;
    padding: 10px;
    font-size: 18px;
}
.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%;
}

I to by było na tyle 🙂

 

Tu znajdziecie pliki o których wcześniej pisałem Kliknij by pobrać plik

 

Na stronie sklep.szablonsklep.pl jest przykład działania takiego okna. Nie klikajcie akceptacji bo wam zniknie i się już nie pojawi 🙂

27 odpowiedzi do “Jak dodać informację o cookies do sklepu Shoper?”

    1. zgodnie z tym co pisałem w kroku 1 zawartość powinno się dodać w Konfiguracja/Integracje/Integracje własne w sekcji body ale dodanie kodu jako dodatkowy moduł lub w stopce również powinno zadziałać 🙂

  1. Witam, chciałem chciałem dodać ten box na stronę firmową ale niestety jestem zielony w tym temacie i nie wiem gdzie to dodać 🙁 mam cms-a i czy tam to gdzies trzeba wkleić czy gdzieś indziej ??

    1. treść box.html dodajesz do Konfiguracja/Integracja/Integracje własne w sekcji body,
      treść style.css dodajesz w Konfiguracja/Wygląd/Aktywny styl graficzny na zakładce własny styl CSS

  2. Bardzo fajny skrypcik, ale jest mały problem z wyświetlaniem stron na smarfonach. Ładuje się strona i wyskakuje komunikat o Cookies, ale ze wzlędu na mały ekran smartfonu nie widać prawej strony co jest normalne (nie widać X którym można zamknąć cookies), jednak przesunięcie ekranu w prawo powoduje przesunięcie strony w tle, ale komunikat o cookies nie przesuwa się, tak że nadal nie widać (X) którym można go zamknąć.
    Jednym słowem nie ma możliwości naciśnięcia (X) przy potwierdzeniu cookies.
    Pytanie czy jest na to jakieś rozwiązanie?

  3. Świetna robota, skrypt bardzo przydatny, ekstra wygląd i działanie…

    Proponuję jednak drobną modyfikację w kodzie CSS 😉
    Zamiast: .ciacho2-wrap-container .ciacho2-inner-container { width: 980px; }
    Proponuję dać: .ciacho2-wrap-container .ciacho2-inner-container { width: 90%; }

    Ta drobna zmiana umożliwi zamknięcie komunikatu na ekranie o rozdzielczości mniejszej niż 980px np. stare monitory lub przeglądanie strony www w pomniejszonym oknie przeglądarki bądź przeglądanie strony na smartfonie.

  4. WItam.
    Box’y są swietne , kawał dobrej roboty, ale są naprawdę duże.
    Czy nie dałoby się zmniejszyć box’a tak, aby pojawiał się tylko nad oknem sklepu na samej górze, obniżając troszkę cały sklep ? A po zamknięciu box’a sklep wraca do pierwotnej linii…..Tak ma np. intymna.pl, lub mtory.pl…

    1. wszystko się da 🙂 masz dostęp do kodu CSS który zarządza wyglądem boksów. Ciężko by mi było stworzyć kod który zaspokoi wszystkie potrzeby ale możecie dowolnie edytować kod CSS który przygotowałem. Np wysokość całego boksu jest w klasie .ciacho2-wrap-container ustalona na 120px, Rozmiar fonta tytuły w .ciacho2-wrap-container .ciacho2-inner h1 ustalona na 22px a rozmiar zamknięcia okna jest do zmiany przy klasie .ciacho2-wrap-container .ciacho2-inner #exit

  5. Dzięki za Twoją pracę. Bardzo przydał się ten skrypt. Mam tylko jeden problem.

    Wszystko działa OK jeśli zamknę informację o używaniu ciasteczek z poziomy strony głównej (index), ale jeżeli jakiś użytkownik trafi do sklepu bezpośrednio na stronę produktową – np. z wyszukiwarki, to oczywiście też pojawi mu się komunikat po ciasteczkach, lecz niestety jeśli go zamknie to na następnej wyświetlanej stronie znów się pojawia. I na każdej następnej, aż do momentu kiedy zamknie ten komunikat na stronie głównej.

    Tylko zamknięcie komunikatu na stronie głównej powoduje zapis informacji w cookies, że użytkownik przeczytał komunikat.

    Pozdrawiam.

Skomentuj Grzegorz Rusin Anuluj pisanie odpowiedzi