Shoper PopUp czyli wyskakuje - Blog web-port.pl

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 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ł

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)

18 komentarzy o “Shoper PopUp”

Krzysztof
3 czerwca 2016 o 18:28

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

Odpowiedź
1. Krystian Kociszewski
  18 kwietnia 2016 o 16:58
  
  Dodaj w CCS position fixed i będzie stało w miejscu.
  
  Odpowiedź
Antoni
15 sierpnia 2018 o 12:36

Witam

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

Odpowiedź
1. Krystian Kociszewski
  8 listopada 2018 o 09:38
  
  Gdzie jest umieszczony powyższy kod?
  
  Odpowiedź
Jakub
18 listopada 2018 o 22:09

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

Odpowiedź
1. web-port.pl
  5 grudnia 2018 o 15:29
  
  Trzeba użyć click w jQuery na dany kontener DIV aby zadziałało jako tabela rozmiarów
  
  Odpowiedź
Artur
20 listopada 2019 o 15:34

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

Odpowiedź
1. Krystian Kociszewski
  24 listopada 2019 o 08:43
  
  Proszę podesłać zrzut ekranu z konsoli spod chrome lub domenę w komentarz, sprawdzimy co się dzieje i odpowiemy w komentarzu.
  
  Odpowiedź
Julia Borowska
27 listopada 2020 o 01:28

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

Odpowiedź
1. web-port.pl
  10 grudnia 2020 o 11:23
  
  Pani Julio ma Pani błąd w części JS dotyczące skryptu. Błąd w konsoli spod Chrome.
  
  Odpowiedź
Dorota
30 listopada 2021 o 22:27

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

Odpowiedź
1. web-port.pl
  8 grudnia 2021 o 11:15
  
  Proszę zerknąć na błąd JS. Błąd w konsoli spod Chrome.
  
  Odpowiedź
Julia
7 grudnia 2021 o 21:59

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

Odpowiedź
1. web-port.pl
  8 grudnia 2021 o 11:19
  
  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 🙂
  
  Odpowiedź
Julia
9 grudnia 2021 o 09:38

W jaki sposób zmienić klasy CSS?

Odpowiedź
1. web-port.pl
  28 lutego 2023 o 10:49
  
  Wystarczy edytować którakolwiek klasę w kodzie źródłowym Pani Julio.
  
  Odpowiedź
Paweł
6 marca 2023 o 15:05

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

Odpowiedź
1. web-port.pl
  7 marca 2023 o 08:52
  
  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.
  
  Odpowiedź

Shoper PopUp

Shoper popup – funkcjonalność:

web-port.pl

Może Ci się spodobać...

Shoper – Exit Pop Up

Shoper – Newsletter Pop Up

18 komentarzy o “Shoper PopUp”

Dodaj komentarz: Anuluj