Shoper

Shoper – Newsletter Pop Up

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

Projekt popup Design Store

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ł

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)

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);
		}
		
	});
Shoper – Newsletter Pop Up
Ocena: 5/5 (głosów: 2)

Magda Jaworska

Tworzę mobilne aplikacje! Pasja to wszystkie aspekty projektowania stron www, ze szczególnym uwzględnieniem nietypowych funkcjonalności wymaganych w dzisiejszym e-commerce.

2 komentarzy o “Shoper – Newsletter Pop Up

  1. 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?

    1. 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 });

Dodaj komentarz:

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *

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>