Shoper newsletter popup

Bezpośrednio platforma Shoper nie udostępnia możliwości pokazywania wyskakującego okienka (już nawet Google sugeruje nie używanie tego rozwiązania). Na dzisiaj jednak podarujemy sobie przesłanki o tym rozwiązaniu od gigantów i przedstawię miły i konkretny tekst na ten temat.

Shoper newsletter popup! Całą stylizacje można swobodnie modyfikować zgodnie z Twoimi wytycznymi. Docelowo powinno to wyglądać tak (efekt możecie zobaczyć na https://design-store.pl). Ładny, minimalistyczny i wycentrowany na ekranie :).

Shoper newsletter popup – funkcjonalność:

– po wyświetleniu strony użytkownikowi ma wyświetlić się okno z możliwością zapisania się do listy mailingowej z przyciskiem do potwierdzenia i formularzem,
– okno ma się wyświetlić z ustalonym opóźnieniem czasowym (na potrzeby wpisu 5 sekund),
– okno Pop Up’a ma wyświetlać się 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>Bezpłatny newsletter </h3>
			<a href="#" onclick="newsletterOff();" id="exit">x</a>
			<p class="popup_description_container">
				5% rabatu na wszystkie produkty z sklepu
				za zapisanie się na nasz newsletter.
			</p>
			<form id="newsletterpro_form"  action="/pl/newsletter/sign" method="post">
				<fieldset>
					<div>
						<input class="input_email"  type="text" name="email" value="" />
					</div>
					<div>
						<button type="submit" class="popup_button_link">
							<img src="/public/images/1px.gif" alt=""/>
							<span>Zapisz mnie</span>
						</button>
					</div>
				</fieldset>
			</form>
			<p>
			Chcę dostawać informacje handlowe o wyprzedażach i innych akcjach specjalnych.
			</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">

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.setDate(exdate.getDate() + 300);
	var c_value="newsleter_no" + ((300==null) ? "" : "; expires="+exdate.toUTCString());
	document.cookie="newsletter" + "=" + c_value;
}
function timeMsg() {
	var t=setTimeout("newsletterOn()",3000);
}
/**/
function checkCookie() {
	var newsletter=getCookie("newsletter");
	if (newsletter!=null && newsletter!="") {
	} 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)

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;
  font-weight: 400;
  margin-bottom: 4%;
}
.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: 5%;
  margin-top: 0;
  text-align: center;
}
.popup_inner_left > p {
  font-weight: 400;
}
#popup_mask {
  background-color: black;
  display: block;
  height: 100%;
  left: 0;
  opacity: 0.5;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 2147483647;
}
#popup_inner {
  background: url("https://design-store.pl/skins/user/rwd_shoper_1/images/user/bg_popup.png") no-repeat right bottom #fff;
  border: 0;
  display: block;
  width: 40%;
  min-height: 300px;
  overflow: auto;
  padding: 20px;
  z-index: 2147483647;
  margin: 100px auto;
  position: fixed;
  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;
}
.popup_inner_left .input_email {
  border: 2px solid #8b57d6 !important;
  width: 100%;
}
/*--------  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("https://design-store.pl/skins/user/rwd_shoper_1/images/user/bg_popup.png") 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("https://design-store.pl/skins/user/rwd_shoper_1/images/user/cscreenshot-design-store-pl.png") no-repeat right bottom #fff;

gdzie

https://design-store.pl/skins/user/rwd_shoper_1/images/user/cscreenshot-design-store-pl.png

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

Krok 5 – wersja funkcjonalności w jQuery z walidacją wpisanego adresu e-mail oraz kodem rabatowym za dopisanie o listy mailingowej.

Tworzymy rabat, w tym przypadku -5% na cały asortyment i dostępnością na jednego klienta. Kopiujemy kod rabatu do treści wiadomości newslettera z podziękowaniami do klienta.

Dodatkową wtyczkę jQuery do obsługi ciasteczek kontrolujących okienko wklejamy w „Konfiguracja -> Integracje -> Integracje własne => Nagłówek strony – < head >„,

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>

Kod kontrolujący wklejamy dziale zarządzania wyglądem szablonu na zakładce “Własny skrypt JS”

	var bkj = jQuery.noConflict();
	
	
	
	bkj(document).ready(function(){
		
		bkj( "#exit" ).click(function() {
			bkj.cookie("newsletterpro", 1, { expires : 1 }); // expires : 1  czyli na 1 dzień	
			
			bkj( "#popup_mask" ).css( 'display', 'none' );
			bkj( "#popup_inner" ).css( 'display', 'none' );
		});
		
		
		
		bkj('.popup_button_link').click(function(e) {
			e.preventDefault();
			
			var emailaddress = $('.input_email').val();
			
			if(isValidEmailAddress(emailaddress)) {
				//alert(emailaddress); 
				bkj.cookie("newsletterpro", 99, { path: '/', expires : 360 });
			
				bkj( "#popup_mask" ).css( 'display', 'none' );
				bkj( "#popup_inner" ).css( 'display', 'none' );
				
				bkj('#newsletterpro_form').submit();
			} else {
				bkj( ".popup_inner_left .input_email" ).css("cssText",  'border-color: red !important;' );
			}

			
		});
		
		//alert('test');

		if (!bkj.cookie("newsletterpro")) {
			bkj( "#popup_mask" ).css( 'display', 'block' ).delay( 4450 );
			bkj( "#popup_inner" ).css( 'display', 'block' ).delay( 4500 );
		}
		
		function isValidEmailAddress(emailAddress) {
			var pattern = new RegExp(/^(("[\w-\s]+")|([\w-]+(?:\.[\w-]+)*)|("[\w-\s]+")([\w-]+(?:\.[\w-]+)*))(@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$)|(@\[?((25[0-5]\.|2[0-4][0-9]\.|1[0-9]{2}\.|[0-9]{1,2}\.))((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\.){2}(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\]?$)/i);
			return pattern.test(emailAddress);
		}
		
	});

5/5 - (3 votes)

10 komentarzy o “Shoper – Newsletter Pop Up”

Raf
23 marca 2018 o 13:09

Witam, jak wchodzę na główną stronę swojej witryny to popup działa poprawienie, wyświetla się raz po kliknięciu zamknięcia. Problem pojawia się gdy wejdę na stronę np. bezpośrednio do produktu i wtedy popup pojawia mi się na każdej stronie, aż do momentu gdy wejdę na główną stronę i go zamknę. Co mam zrobić, aby to dobrze działało?

Odpowiedź
1. Magdalena
  27 marca 2018 o 10:22
  
  W linijce:
  
  bkj.cookie(„newsletterpro”, 1, { expires : 1 });
  
  dopisać
  
  path: '/’
  
  czyli cała linjka będzie wyglądać tak:
  bkj.cookie(„newsletterpro”, 1, { path: '/’, expires : 1 });
  
  Odpowiedź
Rafał
6 lutego 2019 o 10:35

Na telefonie nadal jest popup na cały ekran – i co gorsze, nie można go wyłączyć ani się zapisać?
Co może być nie tak?

Odpowiedź
1. Magdalena
  28 maja 2019 o 13:17
  
  Zerknij na na tzw. „z-index” w CSS pewnie to jest powód dlaczego nie można zamknąć okienka. Co tyczy się całego ekranu to wykorzystuj vh w CSS do wysokości i szerokości okienka.
  
  Odpowiedź
Rafał
12 czerwca 2019 o 14:54

Aż tak się nie znam… Można prosić gotowy kod do wklejenia?

Odpowiedź
1. Magda
  20 stycznia 2020 o 09:02
  
  Wystarczy skopiować elementy z kodem
  
  Odpowiedź
Krzysiek
17 października 2019 o 12:10

Witam, gdy wpisuje kod w odpowiednie miejsca na mojej stronie to nic nie działa ,a na stronie znika cała zawartość.
Jak zrobić to aby pojawił się newsletter w okienku i zawartość strony.

Odpowiedź
1. Magda
  6 listopada 2019 o 19:07
  
  Poproszę o link do zdjęcia Krzysiek abym to mogła potwierdzić
  
  Odpowiedź
Maciej
22 maja 2023 o 14:03

Dzień dobry, mam taki problem, ponieważ po wklejeniu kodu i stworzeniu pop-up’u, w momencie, w którym ktoś zapisuje się do newslettera, wyskakuje powiadomienie „Nieprawidłowy format adresu e-mail.”. Czy wie Pani co może być tego przyczyną? Pozdrawiam serdecznie.

Odpowiedź
1. web-port.pl
  8 lutego 2024 o 10:14
  
  Proszę o w klejenie zrzutu z konsoli …
  
  Odpowiedź

Shoper – Newsletter Pop Up

Magda Jaworska

10 komentarzy o “Shoper – Newsletter Pop Up”

Dodaj komentarz: Anuluj

Shoper – Newsletter Pop Up

Shoper newsletter popup – funkcjonalność:

Magda Jaworska

Może Ci się spodobać...

Shoper – Exit Pop Up

Shoper PopUp

10 komentarzy o “Shoper – Newsletter Pop Up”

Dodaj komentarz: Anuluj