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:

[pastacode lang=”markup” manual=”%3Cdiv%20id%3D%22popup_mask%22%20style%3D%22display%3A%20none%3B%22%3E%3C%2Fdiv%3E%0A%0A%3Cdiv%20id%3D%22popup_container%22%3E%0A%0A%09%3Cdiv%20id%3D%22popup_inner%22%20style%3D%22display%3A%20none%3B%22%3E%0A%0A%09%09%3Cdiv%20class%3D%22popup_inner_left%22%3E%0A%0A%09%09%3Ch3%3ECollar%20Puller%3C%2Fh3%3E%0A%09%09%3Ca%20id%3D%22exit%22%20href%3D%22%23%22%20rel%3D%22nofollow%22%3Ex%3C%2Fa%3E%0A%09%09%3Cp%20class%3D%22popup_description_container%22%3EZabawka%2C%20kt%C3%B3ra%20wed%C5%82ug%20producenta%20%0A%09%09wyrabia%20mi%C4%99%C5%9Bnie%2C%20roz%C5%82adowuje%20niespo%C5%BCyt%C4%85%0A%09%09energi%C4%99%20naszego%20psa%2C%20pomaga%20zrzuci%C4%87%20zb%C4%99dne%20kilogramy%2C%20a%20%0A%09%09nawet%20eliminuje%20agresj%C4%99.%20Jak%20to%20si%C4%99%20ma%20w%20praktyce%3F%0A%09%09%3C%2Fp%3E%0A%0A%09%09%3Cp%20class%3D%22popup_button_container%22%3E%0A%09%09%09%3Ca%20class%3D%22popup_button_link%22%20title%3D%22Wi%C4%99cej%22%20href%3D%22http%3A%2F%2Fcanagan.shop.pl%22%3EWI%C4%98CEJ%3C%2Fa%3E%0A%09%09%3C%2Fp%3E%0A%0A%09%09%3C%2Fdiv%3E%0A%0A%09%09%3Cdiv%20class%3D%22popup_inner_right%22%3E%3C%2Fdiv%3E%0A%0A%09%3C%2Fdiv%3E%0A%0A%3C%2Fdiv%3E” message=”” highlight=”” provider=”manual”/]

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:

[pastacode lang=”javascript” manual=”%3Cscript%20type%3D%22text%2Fjavascript%22%3E%0A%2F%2F%20%3C!%5BCDATA%5B%0Adocument.onload%20%3D%20checkCookie()%3B%0A%2F**%2F%0Afunction%20getCookie(c_name)%20%7B%0Avar%20i%2Cx%2Cy%2CARRcookies%3Ddocument.cookie.split(%22%3B%22)%3B%0A%09for%20(i%3D0%3Bi%3CARRcookies.length%3Bi%2B%2B)%20%7B%20%0A%09%09x%3DARRcookies%5Bi%5D.substr(0%2CARRcookies%5Bi%5D.indexOf(%22%3D%22))%3B%20%0A%09%09y%3DARRcookies%5Bi%5D.substr(ARRcookies%5Bi%5D.indexOf(%22%3D%22)%2B1)%3B%20%0A%09%09x%3Dx.replace(%2F%5E%5Cs%2B%7C%5Cs%2B%24%2Fg%2C%22%22)%3B%20%0A%09%09%09if%20(x%3D%3Dc_name)%20%7B%20%0A%09%09%09%09return%20unescape(y)%3B%20%0A%09%09%09%7D%20%0A%09%7D%20%0A%7D%20%0A%2F**%2F%20%0Afunction%20setCookie()%20%7B%20%0A%09var%20exdate%3Dnew%20Date()%3B%20%0A%09exdate.setTime(exdate.getTime()%20%2B%203600000%20)%3B%20%0A%09var%20c_value%3D%22popup_no%22%20%2B%20((3600000%3D%3Dnull)%20%3F%20%22%22%20%3A%20%22%3B%20%0A%09expires%3D%22%2Bexdate.toUTCString()%2B%20%22%3B%20%0A%09path%3D%2F%3B%20domain%3D.canagan.shop.pl%22)%3B%20%0A%09document.cookie%3D%22popup%22%20%2B%20%22%3D%22%20%2B%20c_value%3B%20%0A%7D%20%0A%0Afunction%20timeMsg()%20%7B%20%0A%09var%20t%3DsetTimeout(%22newsletterOn()%22%2C5000)%3B%20%0A%7D%20%0A%2F**%2F%20%0Afunction%20checkCookie()%20%7B%20%0A%09var%20popup%3DgetCookie(%22popup%22)%3B%20%0A%09if%20(popup!%3Dnull%20%26%26%20popup!%3D%22%22)%20%7B%20%0A%09%7D%20else%20%7B%20%0A%09%09setCookie()%3B%20timeMsg()%3B%20%0A%09%7D%20%0A%7D%20%0A%0A%2F**%2F%20%0Afunction%20newsletterOn()%20%7B%20%0A%09document.getElementById(%22popup_inner%22).style.display%20%3D%20%22block%22%3B%20%0A%09document.getElementById(%22popup_mask%22).style.display%20%3D%20%22block%22%3B%20%0A%09document.getElementById(%22popup_container%22).style.display%20%3D%20%22block%22%3B%20%0A%7D%20%0A%0Afunction%20newsletterOff()%20%7B%20%0A%09document.getElementById(%22popup_inner%22).style.display%20%3D%20%22none%22%3B%20%0A%09document.getElementById(%22popup_mask%22).style.display%20%3D%20%22none%22%3B%20%0A%09document.getElementById(%22popup_container%22).style.display%20%3D%20%22none%22%3B%20%0A%7D%20%0A%2F%2F%20%5D%5D%3E%0A%3C%2Fscript%3E” message=”” highlight=”” provider=”manual”/]

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.

[pastacode lang=”css” manual=”.popup_description_container%20%7B%0A%20%20font-size%3A%2016px%3B%0A%20%20margin-bottom%3A%207%25%3B%0A%7D%0A.popup_button_link%20%7B%0A%20%20background%3A%20%238b57d6%20none%20repeat%20scroll%200%200%3B%0A%20%20border%3A%201px%20solid%20%238b57d6%3B%0A%20%20color%3A%20%23fff%3B%0A%20%20font-size%3A%2018px%3B%0A%20%20padding%3A%2010px%2020px%3B%0A%7D%0A.popup_button_link%3Ahover%20%7B%0A%20%20background%3A%20%23fff%20none%20repeat%20scroll%200%200%3B%0A%20%20border%3A%201px%20solid%20%238b57d6%3B%0A%20%20color%3A%20%238b57d6%3B%0A%20%20font-size%3A%2018px%3B%0A%20%20padding%3A%2010px%2020px%3B%0A%7D%0A.popup_button_container%20%7B%0A%20%20text-align%3A%20center%3B%0A%20%20padding-top%3A%2010%25%3B%0A%7D%0A.popup_inner_left%20%3E%20h3%20%7B%0A%20%20font-size%3A%2030px%3B%0A%20%20margin-bottom%3A%2010%25%3B%0A%20%20text-align%3A%20center%3B%0A%7D%0A%23popup_mask%20%7B%0A%20%20background-color%3A%20black%3B%0A%20%20display%3A%20block%3B%0A%20%20height%3A%20100%25%3B%0A%20%20left%3A%200%3B%0A%20%20opacity%3A%200.5%3B%0A%20%20position%3A%20fixed%3B%0A%20%20top%3A%200%3B%0A%20%20width%3A%20100%25%3B%0A%20%20z-index%3A%2010001%3B%0A%7D%0A%23popup_inner%20%7B%0A%20%20background%3A%20url(%22http%3A%2F%2Fcanagan.shop.pl%2F%2Fskins%2Fuser%2Frwd_shoper_1%2Fimages%2Fuser%2Fbg_popup.jpg%22)%20no-repeat%20right%20bottom%20%23fff%3B%0A%20%20border%3A%200%3B%0A%20%20display%3A%20block%3B%0A%20%20width%3A%2040%25%3B%0A%20%20min-height%3A%20300px%3B%0A%20%20overflow%3A%20auto%3B%0A%20%20padding%3A%2020px%3B%0A%20%20z-index%3A%2010003%3B%0A%20%20margin%3A%20100px%20auto%3B%0A%20%20position%3A%20absolute%3B%0A%20%20left%3A%2030%25%3B%0A%20top%3A%205%25%3B%0A%20%20border%3A%2010px%20solid%20%238B57D6%3B%0A%7D%0A%23popup_inner%20%23exit%20%7B%0A%20%20background%3A%20%23fff%20none%20repeat%20scroll%200%200%3B%0A%20%20color%3A%20%23000%3B%0A%20%20font-size%3A%2027px%3B%0A%20%20padding%3A%205px%209px%2011px%3B%0A%20%20position%3A%20absolute%3B%0A%20%20right%3A%2020px%3B%0A%20%20top%3A%2014px%3B%0A%7D%0A%23popup_inner%20%23exit%3Ahover%20%7B%0A%20%20background%3A%20%238b57d6%20none%20repeat%20scroll%200%200%3B%0A%20%20color%3A%20%23fff%3B%0A%20%20font-size%3A%2027px%3B%0A%20%20padding%3A%205px%209px%2011px%3B%0A%20%20position%3A%20absolute%3B%0A%20%20right%3A%2020px%3B%0A%20%20top%3A%2014px%3B%0A%7D%0A.popup_inner_left%20%7B%0A%20%20float%3A%20left%3B%0A%20%20width%3A%2040%25%3B%0A%7D%0A.popup_inner_right%20%7B%0A%20%20width%3A%2048%25%3B%0A%20%20float%3A%20left%3B%0A%7D%0A%2F*——–%20%20Pseudo%20RWD%20%20———–*%2F%0A%09%40media%20all%20and%20(max-width%3A%201920px)%20%7B%09%0A%09%7D%0A%09%40media%20all%20and%20(max-width%3A%201680px)%20%7B%09%0A%09%09%23popup_inner%20%7B%0A%09%09%20%20left%3A%2025%25%3B%0A%09%09%20%20width%3A%2050%25%3B%0A%09%09%7D%0A%09%7D%0A%09%40media%20all%20and%20(max-width%3A%201366px)%20%7B%0A%09%09%23popup_inner%20%7B%0A%09%09%20%20left%3A%2018%25%3B%0A%09%09%20%20width%3A%2060%25%3B%0A%09%09%7D%09%09%0A%09%7D%0A%09%40media%20all%20and%20(max-width%3A%201344px)%20%7B%09%0A%09%09%23popup_inner%20%7B%0A%09%09%20%20left%3A%2018%25%3B%0A%09%09%20%20width%3A%2060%25%3B%0A%09%09%7D%0A%09%7D%0A%09%40media%20all%20and%20(max-width%3A%201280px)%20%7B%09%0A%09%09%23popup_inner%20%7B%0A%09%09%20%20left%3A%2018%25%3B%0A%09%09%20%20width%3A%2060%25%3B%0A%09%09%7D%0A%09%7D%0A%09%40media%20all%20and%20(max-width%3A%201024px)%20%7B%0A%09%09%23popup_inner%20%7B%0A%09%09%20%20left%3A%207%25%3B%0A%09%09%20%20width%3A%2080%25%3B%0A%09%09%7D%0A%09%7D%0A%09%40media%20all%20and%20(max-width%3A%20980px)%20%7B%09%0A%09%09%23popup_inner%20%7B%0A%09%09%20%20left%3A%207%25%3B%0A%09%09%20%20width%3A%2080%25%3B%0A%09%09%7D%0A%09%7D%0A%09%40media%20all%20and%20(max-width%3A%20800px)%20%7B%09%0A%09%09%23popup_inner%20%7B%0A%09%09%20%20left%3A%200%25%3B%0A%09%09%20%20width%3A%2092%25%3B%0A%09%09%7D%0A%09%7D%0A%09%40media%20all%20and%20(max-width%3A%20768px)%20%7B%09%0A%09%09%23popup_inner%20%7B%0A%09%09%20%20left%3A%200%25%3B%0A%09%09%20%20width%3A%2092%25%3B%0A%09%09%7D%0A%09%7D%0A%09%40media%20all%20and%20(max-width%3A%20640px)%20%7B%0A%09%09%23popup_inner%20%7B%0A%09%09%20%20height%3A%20100%25%3B%0A%09%09%20%20left%3A%200%3B%0A%09%09%20%20margin%3A%200%3B%0A%09%09%20%20overflow%3A%20auto%3B%0A%09%09%20%20position%3A%20absolute%3B%0A%09%09%20%20top%3A%200%3B%0A%09%09%20%20width%3A%20100%25%3B%0A%09%09%20%20z-index%3A%2010003%3B%0A%09%09%20%20padding%3A%200%3B%0A%09%09%20%20border%3A%20none%3B%0A%09%09%20%20background%3A%20%23fff%3B%0A%09%09%7D%0A%09%09.popup_inner_left%20%7B%0A%09%09%20%20float%3A%20left%3B%0A%09%09%20%20width%3A%20100%25%3B%0A%09%09%7D%09%09%0A%09%09.popup_description_container%20%7B%0A%09%09%20%20padding%3A%203%25%3B%0A%09%09%7D%0A%09%7D%0A%09%40media%20all%20and%20(max-width%3A%20480px)%20%7B%0A%09%09%23popup_inner%20%7B%0A%09%09%20%20height%3A%20100%25%3B%0A%09%09%20%20left%3A%200%3B%0A%09%09%20%20margin%3A%200%3B%0A%09%09%20%20overflow%3A%20auto%3B%0A%09%09%20%20position%3A%20absolute%3B%0A%09%09%20%20top%3A%200%3B%0A%09%09%20%20width%3A%20100%25%3B%0A%09%09%20%20z-index%3A%2010003%3B%0A%09%09%20%20padding%3A%200%3B%0A%09%09%20%20border%3A%20none%3B%0A%09%09%20%20background%3A%20%23fff%3B%0A%09%09%7D%0A%09%09.popup_inner_left%20%7B%0A%09%09%20%20float%3A%20left%3B%0A%09%09%20%20width%3A%20100%25%3B%0A%09%09%7D%0A%09%09.popup_description_container%20%7B%0A%09%09%20%20padding%3A%203%25%3B%0A%09%09%7D%0A%09%7D%0A%09%40media%20all%20and%20(max-width%3A%20360px)%20%7B%0A%09%09%23popup_inner%20%7B%0A%09%09%20%20height%3A%20100%25%3B%0A%09%09%20%20left%3A%200%3B%0A%09%09%20%20margin%3A%200%3B%0A%09%09%20%20overflow%3A%20auto%3B%0A%09%09%20%20position%3A%20absolute%3B%0A%09%09%20%20top%3A%200%3B%0A%09%09%20%20width%3A%20100%25%3B%0A%09%09%20%20z-index%3A%2010003%3B%0A%09%09%20%20padding%3A%200%3B%0A%09%09%20%20border%3A%20none%3B%0A%09%09%20%20background%3A%20url(%22http%3A%2F%2Fcanagan.shop.pl%2F%2Fskins%2Fuser%2Frwd_shoper_1%2Fimages%2Fuser%2Fbg_popup.jpg%22)%20no-repeat%20right%20bottom%20%23fff%3B%0A%09%09%7D%0A%09%09.popup_inner_left%20%7B%0A%09%09%20%20float%3A%20left%3B%0A%09%09%20%20width%3A%20100%25%3B%0A%09%09%7D%0A%09%09.popup_description_container%20%7B%0A%09%09%20%20padding%3A%203%25%3B%0A%09%09%7D%0A%09%7D%0A%09%40media%20all%20and%20(max-width%3A%20320px)%20%7B%0A%09%09%23popup_inner%20%7B%0A%09%09%20%20height%3A%20100%25%3B%0A%09%09%20%20left%3A%200%3B%0A%09%09%20%20margin%3A%200%3B%0A%09%09%20%20overflow%3A%20auto%3B%0A%09%09%20%20position%3A%20absolute%3B%0A%09%09%20%20top%3A%200%3B%0A%09%09%20%20width%3A%20100%25%3B%0A%09%09%20%20z-index%3A%2010003%3B%0A%09%09%20%20padding%3A%200%3B%0A%09%09%20%20border%3A%20none%3B%0A%09%09%20%20background%3A%20%23fff%3B%0A%09%09%7D%0A%09%09.popup_inner_left%20%7B%0A%09%09%20%20float%3A%20left%3B%0A%09%09%20%20width%3A%20100%25%3B%0A%09%09%7D%0A%09%09.popup_description_container%20%7B%0A%09%09%20%20padding%3A%203%25%3B%0A%09%09%7D%0A%09%7D” message=”” highlight=”” provider=”manual”/]

Najważniejszy element Shoper PopUp w stylu to:

[pastacode lang=”css” manual=”background%3A%20url(%22http%3A%2F%2Fcanagan.shop.pl%2F%2Fskins%2Fuser%2Frwd_shoper_1%2Fimages%2Fuser%2Fbg_popup.jpg%22)%20no-repeat%20right%20bottom%20%23fff%3B” message=”” highlight=”” provider=”manual”/]

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 :)

14 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: https://www.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 🙂

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>