Popup – wersja RWD – część I

Jakiś czas temu (dawno dawno) napisałem krótki wpis o tym jak dodać popup z formularzem zapisu do newslettera. Dziś wracam do tematu odświeżając go pod kątem RWD. W dalszej części postu opisuje jak dodać w sklepie pracującym na oprogramowaniu Shoper dodatkowy moduł z dowolną treścią w formie PopUp.

Pracując na gotowych rozwiązaniach takich jak np. sklep Shoper powinniście zgłębić zakamarki kodu który i tak już jest częścią waszych sklepów. Polecam zerknąć czasem na dokumentację udostępnioną przez producenta na stronie https://developers.shoper.pl/ a w szczególności sekcję „Theme development ” w której znajdziecie sporo informacji na temat kodu zarządzającego wyglądem sklepu. Dokumentacja techniczna będzie niestety wymagać od was choć podstawowej znajomości zagadnień z zakresu HTML/CSS czy też Javascript oraz języka angielskiego.

Nie przestraszcie się jednak zbytnio bo większość rzeczy jest dość jasno opisana i można tam znaleźć przykłady użycia poszczególnych rzeczy. Poruszam ten temat celowo, ponieważ dzisiejszy wpis chciałbym zacząć od uruchomienia modułu PopUp najszybszą z możliwych dróg, czyli przez użycie gotowego kodu który udostępnia Shoper.

Piszę o tzw. module „Modal” którego kod znajdziecie w dokumentacji pod tym adresem https://developers.shoper.pl/theme-development/js/modal

Moduł ten jest wykorzystany między innymi do wyświetlenia okna szybkiego podglądu produktu w stylu RWD.

Jeżeli szukacie szybkiej i super prostej metody by wyświetlić informację w oknie PopUp wykonajcie te kilka kroków:

Krok 1 – przejdź na stronę z linku który podałem wcześniej,

Krok 2 – skopiuj kod podany w sekcji „Example of use”.

Powinien wyglądać tak jak ten poniżej:

modal

 

W stosunku do kodu jaki znajdziecie na stronach pomocy shopera zmieniłem tylko kilka drobnych rzeczy. Najważniejsze to treść nagłówka (czyli to co jest po header) oraz treść samego popupa (czyli to co po content). Niestety taki sposób dodawania popupa ma swoje minusy. Pierwszym podstawowym minusem jest sposób tworzenia jego zawartości. Nie macie tu takiej swobody jak przy dodawaniu zwykłego modułu gdzie dostępny jest edytor tekstu itd. Tu musicie dodawać wszystko ręcznie. Drugi duży minus to fakt, że z automatu modal będzie pojawiał się przy każdym odświeżeniu strony lub przy każdym przejściu między stronami sklepu. To może być uciążliwe dla klienta.

Na potrzebę tego wpisu wzbogaciłem kod o zapis który sprawi, że okno popupa nie będzie się pojawiać ponownie aż do wyjścia ze sklepu. W tym celu użyłem tzw. sesji i teraz kod wygląda tak:

blog-popup-rwd-03

 

Teraz popup wyświetli się tylko raz w trakcie trwania sesji czyli do zamknięcia okna przeglądarki.

Krok 3 – wklej swój kod javascript w dziale Konfiguracja/Wygląd/Galeria stylów w zakładce „Własny skrypt JS” dostępnej w edycji każdego ze stylów. Przypominam, o robieniu kopii aktywnego stylu i testowania zmian na nieaktywnej skórce zanim coś zaprezentujecie klientom.

Po zapisaniu zmian popup będzie się już wyświetlał.

 

Ze względu na ograniczony czas musiałem podzielić ten wpis na dwie części. Za kilka dni pojawi się tu jego kontynuacja w której omówię drugą wersję popupa, który nie będzie już bazował na skryptach shopera ale umożliwi Wam dodawanie treści tak jak w standardowych modułach typu HTML co ułatwi np tworzenie popupa z formularzem zapisu  do newslettera.

Pozdrawiam serdecznie i do następnego wpisu…

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

  1. Dzięki za wpis! Czekam z niecierpliwością na drugą część 🙂 Może byś podpowiedział jeszcze co dopisać, aby popup wyświetlał się przy wychodzeniu ze strony lub z jakimś opóźnieniem?

Odpowiedz na „AniaAnuluj pisanie odpowiedzi

Twój adres email nie zostanie opublikowany.