Shoper

Shoper PopUp

Shoper popup, utworzenie nie tylko do zapisu newslettera po przez wyskakujące okienko. Informacje o promocjach czy urlopie obsługi 🙂 sklepu. Zapraszam do testowania funkcji Pop up do systemu Shoper.

Wygląd i treść Pop Up’a można swobodnie modyfikować zgodnie z waszymi wytycznymi.

Docelowo powinno to wyglądać tak (efekt możecie zobaczyć na http://canagan.shop.pl).

shoper-pop-up_wyglad

Shoper popup – funkcjonalność:

– po wyświetleniu strony sklepu klientowi ma wyświetlić się okno z informacją dotyczącą każdej tematyki jaką można sobie wyobrazić z przyciskiem (linkiem) prowadzącym do produktu lub innej strony w sklepie lub poza nim,
– wyskakujące okno ma się wyświetlić z ustalonym opóźnieniem (na potrzeby wpisu 5 sekund),
– okno Pop Up’a ma wyświetlać się tylko raz na godzinę,
– okienko musi działać na całym sklepie czyli w całej domenie lub sub domenie sklepu,
– nie ma być męczące jednak przypominające o ważnej informacji przekazywanej ze sklepu do klienta.

Na wyskakujące okienko nie wpływa żadna aktualizacja sklepu więc z powodzeniem można ją zastosować.

Krok 1 – budujemy kod HTML wyświetlający nasze okienko:

<div id="popup_mask" style="display: none;"></div>

<div id="popup_container">

<div id="popup_inner" style="display: none;">

<div class="popup_inner_left">

<h3>Collar Puller</h3>
<a id="exit" href="#" rel="nofollow">x</a>
<p class="popup_description_container">Zabawka, która według producenta
wyrabia mięśnie, rozładowuje niespożytą
energię naszego psa, pomaga zrzucić zbędne kilogramy, a
nawet eliminuje agresję. Jak to się ma w praktyce?
</p>

<p class="popup_button_container">
<a class="popup_button_link" title="Więcej" href="http://canagan.shop.pl">WIĘCEJ</a>
</p>

</div>

<div class="popup_inner_right"></div>

</div>

</div>

Najważniejsze 3 podstawowe elementy, które należy zostawić w spokoju to:

popup_mask – to element odpowiadający za przyciemnione tło pod okienkiem,
popup_container – jest elementem pozwalającym na łatwiejsze i ładniejsze umiejscowienie głównego okna,
popup_inner – odpowiada za główne okno z informacjami.

Krok 2 – przygotowanie kodu JavaScript zarządzającego pojawieniem się okna, opóźnieniem jego pojawiania się oraz sprawdzeniem czy dany odwiedzający od godziny nie był na stronie:

<script type="text/javascript">
// <![CDATA[
document.onload = checkCookie();
/**/
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 setCookie() {
var exdate=new Date();
exdate.setTime( exdate.getTime() + 3600000 );
var c_value = "popup_no" + ((3600000 === null) ? "" : ";
expires = "+exdate.toUTCString()+ ";
path=/; domain=.canagan.shop.pl");
document.cookie="popup" + "=" + c_value;
}

function timeMsg() {
var t=setTimeout("newsletterOn()",5000);
}
/**/
function checkCookie() {
var popup=getCookie("popup");
if (popup!=null && popup!="") {
} else {
setCookie(); timeMsg();
}
}

/**/
function newsletterOn() {
document.getElementById("popup_inner").style.display = "block";
document.getElementById("popup_mask").style.display = "block";
document.getElementById("popup_container").style.display = "block";
}

function newsletterOff() {
document.getElementById("popup_inner").style.display = "none";
document.getElementById("popup_mask").style.display = "none";
document.getElementById("popup_container").style.display = "none";
}
// ]]>
</script>

Shoper popup według założeń ma się nie uaktywniać przez następna godzinę, działać na wszystkich podstronach (aby zapobiec każdorazowo wyskakiwać okienku po przejściu do rożnych zakładek w sklepie) oraz czasie po jakim ma się pojawić.

timeMsg

gdzie znajdziecie czas opóźnienia w milisekundach 5000 (czyli 5 sekund),

setCookie

tworzy ciasteczko, które pozwala później sprawdzić czy klient już u nas był

3600000

po jakim czasie okienko ma się pojawiać ponownie aby nie drażnić klienta gdy przegląda sklep, czas ustawiony na 1 godzinę (3600000 milisekund)

domain=.canagan.shop.pl

określona domena na której ma działać okienko aby nie pokazywało się na każdej stronie, do której przechodzi klient

Krok 3 – Style naszego okienka aby miały piękny i profesjonalny wygląd również w wersji mobilnej (RWD)

Co tyczy się wersji „RWD” trzeba zmierzyć się z własnymi odczuciami i doświadczeniem w kreowaniu wyskakujących okienek na najmniejsze ekraniki telefonów. Również ekrany tabletów aby nie uciekła ważna do przekazania klientowi informacja i nie uznał Pop Up’a za stresującą reklamę. W tym przypadku zrezygnowałem z wyświetlania obrazka na najmniejszym ekranie z korzyścią do przekazania informacji oraz linku prowadzącego do podstrony.

.popup_description_container {
font-size: 16px;
margin-bottom: 7%;
}
.popup_button_link {
background: #8b57d6 none repeat scroll 0 0;
border: 1px solid #8b57d6;
color: #fff;
font-size: 18px;
padding: 10px 20px;
}
.popup_button_link:hover {
background: #fff none repeat scroll 0 0;
border: 1px solid #8b57d6;
color: #8b57d6;
font-size: 18px;
padding: 10px 20px;
}
.popup_button_container {
text-align: center;
padding-top: 10%;
}
.popup_inner_left > h3 {
font-size: 30px;
margin-bottom: 10%;
text-align: center;
}
#popup_mask {
background-color: black;
display: block;
height: 100%;
left: 0;
opacity: 0.5;
position: fixed;
top: 0;
width: 100%;
z-index: 10001;
}
#popup_inner {
background: url("http://canagan.shop.pl//skins/user/rwd_shoper_1/images/user/bg_popup.jpg") no-repeat right bottom #fff;
border: 0;
display: block;
width: 40%;
min-height: 300px;
overflow: auto;
padding: 20px;
z-index: 10003;
margin: 100px auto;
position: absolute;
left: 30%;
top: 5%;
border: 10px solid #8B57D6;
}
#popup_inner #exit {
background: #fff none repeat scroll 0 0;
color: #000;
font-size: 27px;
padding: 5px 9px 11px;
position: absolute;
right: 20px;
top: 14px;
}
#popup_inner #exit:hover {
background: #8b57d6 none repeat scroll 0 0;
color: #fff;
font-size: 27px;
padding: 5px 9px 11px;
position: absolute;
right: 20px;
top: 14px;
}
.popup_inner_left {
float: left;
width: 40%;
}
.popup_inner_right {
width: 48%;
float: left;
}
/*-------- Pseudo RWD -----------*/
@media all and (max-width: 1920px) {
}
@media all and (max-width: 1680px) {
#popup_inner {
left: 25%;
width: 50%;
}
}
@media all and (max-width: 1366px) {
#popup_inner {
left: 18%;
width: 60%;
}
}
@media all and (max-width: 1344px) {
#popup_inner {
left: 18%;
width: 60%;
}
}
@media all and (max-width: 1280px) {
#popup_inner {
left: 18%;
width: 60%;
}
}
@media all and (max-width: 1024px) {
#popup_inner {
left: 7%;
width: 80%;
}
}
@media all and (max-width: 980px) {
#popup_inner {
left: 7%;
width: 80%;
}
}
@media all and (max-width: 800px) {
#popup_inner {
left: 0%;
width: 92%;
}
}
@media all and (max-width: 768px) {
#popup_inner {
left: 0%;
width: 92%;
}
}
@media all and (max-width: 640px) {
#popup_inner {
height: 100%;
left: 0;
margin: 0;
overflow: auto;
position: absolute;
top: 0;
width: 100%;
z-index: 10003;
padding: 0;
border: none;
background: #fff;
}
.popup_inner_left {
float: left;
width: 100%;
}
.popup_description_container {
padding: 3%;
}
}
@media all and (max-width: 480px) {
#popup_inner {
height: 100%;
left: 0;
margin: 0;
overflow: auto;
position: absolute;
top: 0;
width: 100%;
z-index: 10003;
padding: 0;
border: none;
background: #fff;
}
.popup_inner_left {
float: left;
width: 100%;
}
.popup_description_container {
padding: 3%;
}
}
@media all and (max-width: 360px) {
#popup_inner {
height: 100%;
left: 0;
margin: 0;
overflow: auto;
position: absolute;
top: 0;
width: 100%;
z-index: 10003;
padding: 0;
border: none;
background: url("http://canagan.shop.pl//skins/user/rwd_shoper_1/images/user/bg_popup.jpg") no-repeat right bottom #fff;
}
.popup_inner_left {
float: left;
width: 100%;
}
.popup_description_container {
padding: 3%;
}
}
@media all and (max-width: 320px) {
#popup_inner {
height: 100%;
left: 0;
margin: 0;
overflow: auto;
position: absolute;
top: 0;
width: 100%;
z-index: 10003;
padding: 0;
border: none;
background: #fff;
}
.popup_inner_left {
float: left;
width: 100%;
}
.popup_description_container {
padding: 3%;
}
}

Najważniejszy element Shoper PopUp w stylu to:

background: url("http://canagan.shop.pl//skins/user/rwd_shoper_1/images/user/bg_popup.jpg") no-repeat right bottom #fff;

gdzie


http://canagan.shop.pl//skins/user/rwd_shoper_1/images/user/bg_popup.jpg

to adres do pliku graficznego, który został wgrany do plików graficznych po stronie administracyjnej Shoper.

Krok 4 – wklejamy kody w odpowiednie miejsca po stronie administracyjnej i wgrywamy plik graficzny:

– kod z kroku 1
wklejamy w „Konfiguracja -> Integracje -> Integracje własne => Stopka strony, przed zamknięciem < / body >„,

– kod z kroku 2
wklejamy w „Konfiguracja -> Integracje -> Integracje własne => Nagłówek strony – < head >„,

– kod z kroku 3
wklejamy w „Konfiguracja -> Wygląd -> Aktywny styl graficzny => Własny styl CSS„,

– plik graficzny Shoper PopUp to 740 na 350 pikseli, któremu nadajemy nazwę „bg_popup.jpg”
aktualnie w tym sklepie aby móc pobrać obrazek do wyskakującego okienka musimy przejść do „http://TWOJA DOMENA SKLEPU/admin/configSkins/list” i wybrać „RWD – klasyczny (kopia 1)” (kopia stylu graficznego stworzona na potrzeby możliwości wgrywania plików graficznych), który jest używany jako biblioteka mediów w tym konkretnym przypadku potem przechodzimy do „Plików graficznych” i klikamy na plik „bg_popup.jpg”,a dokładnie na ołówek przy nim. Wybieramy przeglądaj i klikamy zapisz. Za pomocą FireBug w przeglądarce FireFox sprawdamy link do obrazka, kopiujemy go i wklejamy w nasz styl CSS.

W przypadku pytań piszcie, postaram się pomóc jak to tylko będzie możliwe

5/5 - (5 votes)

web-port.pl

Agencja marketingowa i reklamy w Kudowie Zdroju. Tworzymy porządne strony, sklepy internetowe wraz z identyfikacją wizualną. Pasjonaci grafiki i kodu od powstania WWW :)

18 komentarzy o “Shoper PopUp

  1. Chce aby to okienko stało w miejscu a nie poruszało się wraz z przewijaniem strony. Jak mogę to zmienić?

    1. Krystian Kociszewski

      Dodaj w CCS position fixed i będzie stało w miejscu.

  2. Witam

    Dlaczego popup nie wyskakuje gdzieś musi być błąd . Proszę o pomoc .

    1. Krystian Kociszewski

      Gdzie jest umieszczony powyższy kod?

  3. Witam,
    jak przerobić kod JS aby Pop Up wywoływał się na kliknięcie Buttona? Coś na zasadzie tabeli rozmiarów.

    1. Trzeba użyć click w jQuery na dany kontener DIV aby zadziałało jako tabela rozmiarów

  4. Zaimplementowałem kod, w odpowiednie miejsca, i pop up się nie pojawia.
    krok 1: “Konfiguracja -> Integracje -> Integracje własne => Stopka strony, przed zamknięciem “,
    krok 2: „“Konfiguracja -> Integracje -> Integracje własne => Nagłówek strony – “,
    krok 3: „Konfiguracja -> Wygląd -> Aktywny styl graficzny => Własny styl CSS

    1. Krystian Kociszewski

      Proszę podesłać zrzut ekranu z konsoli spod chrome lub domenę w komentarz, sprawdzimy co się dzieje i odpowiemy w komentarzu.

  5. Dzień dobry, mimo, że wstawiłam wszystko we właściwe miejsca – popup nie wyświetla się. Domena to ambaje.eu
    Pozdrawiam

    1. Pani Julio ma Pani błąd w części JS dotyczące skryptu. Błąd w konsoli spod Chrome.
      Błąd

  6. Proszę o pomoc, okno nie wyskakuje 🙁 Strona – Modoro.pl

    1. Proszę zerknąć na błąd JS. Błąd w konsoli spod Chrome.

  7. Witam, proszę o pomoc. Okno popup nie wyskakuje
    Domena: ettiene.pl

    1. Te same funkcje w na stronie są zastosowane do pokazania „okienka z ciasteczkami”, należy je zmienić oraz klasy CSS do obsługi okienka i będzie dobrze 🙂

  8. W jaki sposób zmienić klasy CSS?

    1. Wystarczy edytować którakolwiek klasę w kodzie źródłowym Pani Julio.

  9. Dzień dobry,
    wszystko wklejone w odpowiednie miejsca i niestety nie działa. Domena floragrafik.pl

    1. Proszę zmienić w pierwszej kolejności w skrypcie na swoim sklepie domenę na swoją w function setCookie jest nadal domena przykładowa z skryptu zamiast docelowej.

Dodaj komentarz:

Twój adres e-mail nie zostanie opublikowany. Wymagane pola są oznaczone *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>