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.
– 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:
<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>
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(); } }
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.
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 :)
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
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 🙂
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.
Chce aby to okienko stało w miejscu a nie poruszało się wraz z przewijaniem strony. Jak mogę to zmienić?
Dodaj w CCS position fixed i będzie stało w miejscu.
Witam
Dlaczego popup nie wyskakuje gdzieś musi być błąd . Proszę o pomoc .
Gdzie jest umieszczony powyższy kod?
Witam,
jak przerobić kod JS aby Pop Up wywoływał się na kliknięcie Buttona? Coś na zasadzie tabeli rozmiarów.
Trzeba użyć click w jQuery na dany kontener DIV aby zadziałało jako tabela rozmiarów
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
Proszę podesłać zrzut ekranu z konsoli spod chrome lub domenę w komentarz, sprawdzimy co się dzieje i odpowiemy w komentarzu.
Dzień dobry, mimo, że wstawiłam wszystko we właściwe miejsca – popup nie wyświetla się. Domena to ambaje.eu
Pozdrawiam
Pani Julio ma Pani błąd w części JS dotyczące skryptu. Błąd w konsoli spod Chrome.

Proszę o pomoc, okno nie wyskakuje 🙁 Strona – Modoro.pl
Proszę zerknąć na błąd JS. Błąd w konsoli spod Chrome.
Witam, proszę o pomoc. Okno popup nie wyskakuje
Domena: ettiene.pl
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 🙂
W jaki sposób zmienić klasy CSS?
Wystarczy edytować którakolwiek klasę w kodzie źródłowym Pani Julio.
Dzień dobry,
wszystko wklejone w odpowiednie miejsca i niestety nie działa. Domena floragrafik.pl
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.