Popup – wersja RWD – część II

Zapraszam do lektury drugiej części poradnika opisującego jak dodać w sklepie Shoper dodatkowy moduł z funkcją PopUp, czyli zwyczajowo „wyskakujące okienko”. Wpis ten rozszerza odrobinę temat poruszony tu Popup w wersji RWD poradnik część 1/. Opiszę wam jak w miarę prosty sposób dodać taki „fjuczer” choć polecam rozwagę bo nadmiar wszelkiego rodzaju zaskakujących (wyskakujących) elementów w sklepie może równie dobrze przyczynić się do rezygnacji z dalszego oglądania stron sklepu.

Wpis ten nie jest poradnikiem biznesowym (na takie też przyjdzie pora), tylko technicznym w którym dam wam narzędzie a wy sami zdecydujecie czy i jak go użyć 🙂

W poprzednim wpisie omawiałem stworzenie modułu na bazie gotowych skryptów wbudowanych w oprogramowanie Shoper. Dla przypomnienia chodzi o „Modal” który w prosty sposób umożliwi wyświetlenie dowolnych informacji, polecam taką formę przy wszelkiego rodzaju informacjach tekstowych (np info o urlopie, albo innych drobnych problemach które trzeba szybko zakomunikować).

W sytuacji w której potrzebujecie wyświetlić trochę bardziej skomplikowane informacje (np formularz zapisu do newslettera lub baner graficzny) lepszym rozwiązaniem może być wykorzystanie standardowych modułów HTML jakimi dysponuje Shoper.

Założenie jest proste, tworzymy moduł HTML z dowolną treścią a następnie przy pomocy odrobiny kodu CSS oraz odrobiny kodu JavaSript przekształcamy ten moduł tak by „wyskakiwał” zgodnie z naszymi potrzebami.

Co będę robił na potrzeby demonstracyjne do tego wpisu?

Wykonam popup w którym umieszczę formularz zapisu do newslettera pobrany z systemu mailChimp. MailChimp to dość rozbudowane oprogramowanie do zarządzania wysyłką wiadomości dostępne w wersji zarówno darmowej (jest limit ilości wysłanych maili) jak i płatnej. Sami używamy go u nas w firmie z racji, iż jest bardziej rozbudowane od narzędzia dostępnego w sklepie. Oczywiście u siebie możecie użyć kodu HTML formularza prosto ze sklepu (wystarczy podglądnąć i skopiować kod dostępny w sklepie Shoper, jeżeli nie wiecie jak to zrobić to „wkrótce” na blogu pojawi się krótki filmik prezentujący między innymi właśnie taką sztuczkę).

To do dzieła.

Krok 1 – przygotowuje kod HTML formularza zapisu, w przypadku MailChimp to super proste. Wystarczy w pierwszej kolejności stworzyć listę subskrybentów a następnie do tej listy stworzyć nowy formularz zapisu. Nie będę się tu rozpisywał o szczegółach bo całość znajdziecie w pomocy MailChimp’a jeżeli będziecie chcieli z niego skorzystać. Ważne jest to że ostatecznie dostaniecie kawałek kodu który wklejcie narazie w pusty plik tekstowy i odstawcie na chwilę. Cichaczem dodam, że sam MailChimp daje możliwość wygenerowania zarówno czystego kodu formularza jak i formularza w formie popup 🙂 Gdybym chciał go tu jednak użyć to cały ten wpis byłby trochę mało sensowny więc psss…, nie mówimy nikomu.

Na potrzeby testów ustawiłem takie opcje w swoim formularzu:

blog-popup-rwd-2-zd1

 

Kopiujemy kod i wklejamy go do pustego pliku w Notatniku lub programie do pisania kodu HTML.

 

Krok 2 – ok, mamy już nasz kod HTML który czeka sobie w poczekalni, teraz musimy stworzyć nasz PopUp. Zaczynami od stworzenia nowego modułu. Przechodzimy do działu zarządzania wyglądem (polecam jak zawsze pracować na kopii aktywnego stylu graficznego) i wchodzimy na zakładkę „Moduły”.

Tam klikamy w „dodaj moduł” i ustawiamy zawartość modułu. W omawianym dzisiaj przykładzie dodajemy moduł bez nagłówka (mimo, że ustawiamy nazwę) a jako id wpisujemy popup-flex.

blog-popup-rwd-2-zd2

 

Krok 3 – wyłączamy edytor klikając na przycisk „wyłącz edytor”, a następnie wklejamy kod naszego formularza z pliku tekstowego w którym go zostawiliśmy i zapisujemy zmiany.

Zapisany moduł wstawiamy na stronę w dowolne miejsce (ja najczęściej umieszczam go w górnej sekcji z modułami. Ważne jest to by zwrócić uwagę na to na których stronach wstawiliśmy moduł bo jak wiecie w oprogramowaniu Shoper można zmieniać układ dla kilku stron (układ podstawowy, strona główna, lista produktów, karta produktu, blog i koszyk).

Po zapisaniu zmian klikam podgląd i widzę coś takiego:

blog-popup-rwd-2-zd3

 

Jak widzicie  moduł wyświetla się poprawnie tuż pod menu ale czy to jest PopUp? Zdecydowanie NIE, bo przecież nie wyskakuje :).

Dodajmy więc trochę kodu CSS/LESS i zadbajmy o jego wygląd.

Krok 4 – Przejdźmy raz jeszcze do zarządzania wyglądem naszego szablonu, tym razem na zakładkę Własny styl CSS i dodajmy następujące reguły. Kod będę pisał korzystając z uroków LESS a nie czystego CSS, myślę że zwiększy to czytelność kodu dla tych co się na tym mniej znają i ułatwi wam jego edycje.

W kodzie zauważycie że czasami przed regułą lub innym tekstem wstawiam podwójny znak „//”. W ten sposób zaznaczam, że dana linia tekstu jest tylko komentarzem i system ją pominie przy generowaniu kodu CSS.

#popup-flex{
//display: none;
//
//rozmiary popupa
width: 480px;
min-height: 100px;
//
//pozycja popupa
z-index: 99999;
position: fixed;
top: 100px;
left: 50%;
margin-left: -240px;
//
//wyglad popupa
background-color: white;
border: 2px solid red;
box-shadow: 0 0 0 2000px rgba(0,0,0,0.5);
padding: 10px;
box-sizing: border-box;
}

W pierwszej lini wstawiłem //display: none; i jak się domyślacie z wcześniejszego zdania ta linia jest przez system pomijana więc moglibyście się zastanawiać po co ją wstawiam. Otóż na tym etapie rzeczywiście ten wpis tylko by mi przeszkadzał bo zwyczajnie wyłącza widoczność całego modułu a przecież ale na końcu będzie on mi potrzebny bo po przekazaniu zarządzania wyświetlaniem do kodu JavaScript jeżeli nie miałbym w kodzie CSS takiego zapisu to mogłoby dojść do sytuacji w której klient wchodzący na stronę sklepu (który wcześniej wyłączył już nasz popup) przy każdym odświeżeniu strony lub przejściu na jakąś podstronę przez ułamek sekundy znowu widziałby nasz popup. Wynika to z faktu, że nasz kod JavaScript odpala się po tym jak system załaduje całą zawartość HTML oraz style CSS, więc dopiero po chwili nasz kod JavaScript sprawdzi czy ma wyświetlać PopUp czy też nie.

Z kodu który wkleiłem wcześniej warto opisać kilka reguł:

  • z-index – określa którą warstwą jest nasz moduł, czym niższy nr tym niżej wyświetla się warstwa(chodzi o głębokość a nie wysokość strony). Ponieważ nasz moduł ma się poruszać nad innymi elementami sklepu musimy mu dać wysoką wartość z-index. Ponieważ nie chce mi się sprawdzać jaki z-index mają inne elementy więc dodaje bardzo dużą liczbę by mieć pewien bufor.
  • position: fixed – odpowiada za przyklejenie moduły tak by poruszał się razem ze skrolem, zamiast fixed możecie dać np absolute wówczas popup przy skrolowaniu strony zostanie na pierwotnej pozycji.
  • margin-left: -240px – potrzebny jest do wyrównania centralnej pozycji modułu. Skąd wartość -240px? Wynika to z szerokości całego modułu. Jeżeli założymy, że cała przeglądarka ma np 2000px (dla ułatwienia wyliczeń) a nasz moduł ma szerokość 500px to ustawiając mu wartość left: 50% oznacza że przesuwamy go od lewej strony o 50% szerokości ekranu (czyli o 1000px). Skoro tak go przesuniemy to moduł wcale nie będzie na środku (jego lewa krawędź będzie na 1001px a prawa na 1501px). Musimy więc cofnąć go trochę w lewo. Ta trocha to dokładnie połowa szerokości samego modułu a więc w naszym przypadku wyniesie 240px. Dodatkowo musimy dodać znak minusa bo niejako cofamy moduł (więc wymuszamy odjęcie pozycji).
  • box-shadow: 0 0 0 2000px rgba(0,0,0,0.5) – ta reguła odpowiada za cień jaki nasz moduł rzuca na stronę, 2000px to zasięg cienia a rgba to kolor wraz z przeźroczystością. W tym wypadku użyłem koloru czarnego z 50% transparentnością.
  • box-sizing: border-box – to ostatni element który chcę omówić, wpis ten odpowiada za to by mimo dodania odstępu pomiędzy krawędziami PopUp’a a wszystkim tym co jest wewnątrz nie zmieniała nam się szerokość całego modułu bo to wpłynęłoby na jego pozycje. Normalnie jest tak, że jeżeli macie element któremu nadacie np szerokość 400px i jednocześnie dodacie wewnętrzny odstęp np 30px to w rzeczywistości szerokość waszego elementu będzie wynosiła 400 + 30 + 30 czyli 460px. Taka zmiana będzie już widoczna przy ustalaniu pozycji i wartości tego minusowego marginesu o którym pisałem wcześniej. Box-sizing dodajemy po to by się nie martwić takim wpływem i nie musieć przeliczać pozycji za każdym razem jak zmienicie zdanie co do tego ile ma wynosić odstęp wewnątrz PopUp’a.

Mój PopUp wygląda teraz tak:

blog-popup-rwd-2-zd4

No i proszę co robi kilka linijek kodu. Aby nie wydłużać poradnika w nieskończoność nie zamierzam omawiać zbyt daleko idących edycji jego wyglądu. Możecie swobodnie poćwiczyć to we własnym sklepie. W kolejnym kroku chciałbym przejść już do kodu JavaScript.

Krok 5 – Mając już moduł wstępnie ostylowany i z działającym formularzem zapisu przejdźmy do zarządzania tym kiedy moduł ma się wyświetlić. W wersji RWD Shoper korzysta z frameworka JQuery (nie będę tego rozwijał ale ważne byście o tym wiedzieli). Skorzystamy z jego składni co spowoduje że cały ten kod nie będzie działał poprawnie w klasycznej skórce. Kod który widzicie poniżej należy wkleić w dziale zarządzania wyglądem szablonu na zakładce „Własny skrypt JS”.

$(document).ready(function(){
if( $("#popup-flex").length){
$("#popup-flex").prepend('<a id="exit"><span>zamknij x</span></a>')
}
$( "#exit" ).click(function() {
$.cookie("ciastko", 99, { path: '/', expires : 2 });
$("#popup-flex").remove();
});
$('#mc_embed_signup form').submit(function(e)
{
$.cookie("ciastko", 99, { path: '/', expires : 360 });
$( "#popup-flex" ).css( 'display', 'none' );
});
if ( $.cookie("ciastko") == null || $.cookie("ciastko") != 99 ) {
$( "#popup-flex" ).css( 'display', 'block' );
}
});

Kod JavaScript jest jak widzicie całkiem prosty. ALe na wszelki wypadek omówię klika jego podstawowych elementów. Pierwsza linia informuje przeglądarkę by odpaliła skrypt po tym jak już załaduje całą treść strony.

Następnie sprawdzamy czy moduł PopUp jest na stronie i jeżeli jest to „wstrzykujemy” do niego link pozwalający nam zamknąć PopUp.

W kolejnej części przypisujemy do linku zamknięcia ciasteczko z datą ważności (w tym przypadku 2 dni) co oznacza, że jak ktoś się nie zapisał tylko wyłączył PopUp klikając na „zamknij x” to PopUp nie wyświetli się tej osobie przez kolejne 2 dni.

W ostatniej części stosujemy podobne zapisy ale tym razem przypisujemy ciasteczko do formularza tak by po zapisaniu się do newslettera PopUp nie pojawiał się ponownie przez 360 dni.

Krok 6 – po zapisaniu zmian JS wracamy do naszego kodu LESS by troszkę go zmodyfikować. Przede wszystkim musimy włączyć zapis display: none; przez usunięcie „//”.

Dodatkowo możemy się pokusić o dodanie stylu do przycisku zamknięcia tak by go trochę bardziej uwidocznić oraz dodajmy kod wyłączający popup na komórkach (ostatnio google ogłosił, że takie elementy będą negatywnie wpływały na wyniki w wyszukiwaniach mobilnych).

Nasz ostateczny kod będzie więc wyglądał tak:

#popup-flex{
display: none;
//
//rozmiary popupa
width: 480px;
min-height: 100px;
//
//pozycja popupa
z-index: 99999;
position: fixed;
top: 100px;
left: 50%;
margin-left: -240px;
//
//wyglad popupa
background-color: white;
border: 2px solid red;
box-shadow: 0 0 0 2000px rgba(0,0,0,0.5);
padding: 10px;
box-sizing: border-box;
//
//wyglad linku zamkniecia
#exit{
background-color: red;
position: absolute;
right: 0;
top: 0;
padding: 5px 10px;
color: white;
cursor: pointer;
}
}
//wylaczenie popupa na komorkach
@media (max-width: 480px){
#popup-flex{
display: none !important;
}
}

 

UWAGA!!! – jeżeli chcecie zmienić treść wewnątrz modułu np dodając inny formularz zapisu to musicie zmienić wartość „#mc_embed_signup form” która jest umieszczona w kodzie na id waszego formularza. Jeżeli nie chcecie formularza tylko zwykły tekst albo reklamę graficzną to możecie całkiem usunąć tą część kodu:

$('#mc_embed_signup form').submit(function(e)
{
$.cookie("ciastko", 99, { path: '/', expires : 360 });
$( "#popup-flex" ).css( 'display', 'none' );
});

Co powinno dać wam taki efekt końcowy:

blog-popup-rwd-2-zd5

 

Prawda, że całkiem całkiem… wiem wiem formularz trochę marny ale nie o to w tym wpisie chodziło 🙂

Uwaga!!! – dla tych którzy nie chcą dłubać w kodzie mam mały komunikat reklamowy, już wkrótce (mam nadzieję że na początku wrześnie w sklepie z aplikacjami Shoper pojawi się nasza mała aplikacja PopUp – Kreator która pozwoli wam wyklikać przeróżne PopUp’y. Z zapisem do newslettera, potwierdzeniem wieku, zegarem odliczającym czas do otwarcia sklepu i ogólne typu HTML umożliwiające dodanie dowolnej treści.

Dodatkowo znajdują się tam takie bajery jak wybór tego kiedy ma się wyświetlić PopUp (przy wejściu na stronę lub wyjściu ze strony), można też będzie nadać opóźnienie lub wywołać PopUp przy zeskrolowaniu strony do jakiejś wysokości. mam nadzieję, że wam się spodoba.

I to wszytko co przygotowałem na dzisiaj. Następnym razem zapraszam do nowej serii wpisów wspomaganych video. Pierwszy czeka już na obróbkę video a pomówimy w nim o podstawach edycji szablonów, narzędziach jakie warto używać itp.

7 odpowiedzi do “Popup – wersja RWD – część II”

  1. Dzięki, to działa! 🙂 Tylko tło dookoła popupu mi się nie przyciemnia jak u Ciebie na efekcie końcowym. Co może być nie tak?

    1. na końcu kodu wywołującego popup dodaj funkcję delay() i podaj czas w miliskeundach. Czyli końcówka powinna wyglądać tak ( ‘display’, ‘block’ ).delay( 1500 );

  2. Witam. Poradniki są świetnie opisane i naprawdę przydane.
    Od jakiegoś czasu chodzi mi po głowie problem z którym nie mogę sobie poradzić. Mianowicie, w jaki sposób sprawdzić aby dodany moduł zachowywał się inaczej dla trybu desktop oraz mobilnego? Czy jest to duża przeprawa czy może da się to załatwić prostym trickiem?

    1. jeżeli chodzi Ci o style CSS to najlepiej zrobić to korzystając z media queries. Czyli ustawić inny styl CSS dla danej rozdzielczości ekranu.

      @media (max-width: 480px){
      tu jakis kod CSS
      }

      Taki zapis będzie działał na rozdzielczości do 480px (komórki)

Odpowiedz na „kubaAnuluj pisanie odpowiedzi

Twój adres email nie zostanie opublikowany.