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:

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

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.

.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

Shoper PopUp
Ocena: 5/5 (głosów: 3)

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

6 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

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>