Press "Enter" to skip to content

Popup RWD z dowonym obrazkiem otwierany na stronie głównej – Presta Shop 1.4 – 1.6 [Aktualizacja]

Admin 0

Jeżeli chcemy mieć popup z obrazkiem widoczny na stronie głównej z przyciemnionym tłem (np. informacje o aktualnych promocjach albo zniżkach, urlopie świątecznym itp.) ale widoczny tylko jeden raz aby nie atakował odwiedzających za każdym razem jak wejdą na nasz sklep – zapraszam do lektury.

Wgranie obrazka

Najpierw musimy wgrać obrazek, który chcemy pokazać. Do tego celu użyjmy narzędzia CMS.

Wersja 1.6 (podobnie w 1.5)

Preferencje -> CMS.

Następnie edytujemy dowolną podstronę (nie ma to żadnego znaczenia). Potem używamy edytora pola tekstowego TinyMce (edytorek zbliżony do Worda):

Po wgraniu obrazka zmieniamy jego na zwę na “intro”:

Tworzenie Sklepów Presta Shop
Zmiana nazwy obrazka
Tworzenie Sklepów Presta Shop
Zmiana nazwy obrazka

W zależności od rozszerzenia pliku który wgraliśmy może być on dostępny pod różnymi nazwami:

http://[naszadomena]/img/cms/intro.jpeg

http://[naszadomena]/img/cms/intro.jpg

http://[naszadomena]/img/cms/intro.png

http://[naszadomena]/img/cms/intro.gif

itp.

Jak obrazek się wyświetla – idziemy dalej.

Wersja 1.4

Narzędzia -> CMS

Strony WWW Kraków

Podobnie edytujemy dowolny dokument. Używamy opcji dodaj obrazek (potem guzik Przeglądaj):

Strony WWW Kraków

Następnie pojawi się manager plików Presta Shop. Używamy opcji Upload i wgrywamy nasz plik na stronę. Najlepiej za wczasu zmienić nazwę pliku na jakiś przyjazny (bez polskich liter albo spacji czy znaków specjalnych). Np. nazwijmy go: intro.jpg.

Wgrywamy plik. Na osobnej karcie przeglądarki sprawdzamy czy plik poprawnie wgrano. Wejdźmy pod adres:

http://[naszadomena]/img/cms/intro.jpg

Jak obrazek się wyświetla – idziemy dalej.

Przesłanie wymaganych bibliotek JavaScript

Na serwer przesyłamy do katalogu głównego (na dole tego posta znajdziesz paczkę z plikami) poniższe pliki.

Jest to biblioteka obsługująca funkcję ciasteczek, wyzwalająca okienko i aktualna (na dzisiaj) wersja skryptu FancyBox która posiada działającą metodę open() (Ta dostarczana z Presta Shop może mieć z nią problemy).

Przesłanie wymaganych plików CSS

Pliki stylujące okienko.

Przesłanie wymaganych obrazków

Obrazki użyte w obramowaniach okienka.

Modyfikacje plików

Otwieramy plik nagłówka Twojego szablonu:

następnie zaraz przed zamknięciem znacznika:

Wstawiamy kod:

Jeśli chcemy aby okienko było na każdej stronie – wstawiamy powyższy kod bez klauzuli IF:

Gotowe!

Jeżeli chcesz wyłączyć okienko – zakomentuj lub usuń ten kod. Przykład komentarza:

UWAGI:

a) Zamiast okienka popup pojawia się kwadrat z pytajnikiem.

Powoduje to inna nazwa pliku, który ma być prezentowany w pop-up.

Domyślnie nazwa pliku to

Jeśli nasz obrazek ma inne rozszerzenie należy to zmienić w pliku:

b) zmiany nie są widoczne (Presta Shop 1.6)

Możliwe, że masz wyłączoną kompilację plików PHP albo cache. W tym celu odśwież cache sklepu:

Parametry zaawansowane -> Wydajność -> Wyczyść pamięć podręczną

i asekuracyjnie na tej samej stronie chwilowo włącz

Wymuszenie kompilacji -> Zapisz (Wyłączając pamięć podręczną),

Po pojawieniu się zmian przywróć poprzednie ustawienia

c) nachodzące elementy

Możliwe, że jeśli używasz modułu uecookies lub np. modułu z popupem do zapisywania do newslettera. Wtedy elementy mogą na siebie nachodzić. Aby to poprawić otwórz plik:

i zmień dyrektywę CSS z-index:

Na:

Jeśli chcesz testować zachowanie się okienka najlepiej wyłącz obsługę cookies w przeglądarce lub za każdym razem usuwaj ciasteczka. Ewentualnie testuj to na trybie prywatnym lub w innej przeglądarce WWW.

Podsumowanie

Gotowe! Teraz po wyczyszczeniu cache Presta Shop powinniśmy na starcie sklepu (strona główna) widzieć okienko z dopasowanym do wysokości przeglądarki obrazkiem (RWD). Oczywiście tylko 1 raz (pilnują tego cookies) oraz tylko na stronie głównej.

Modyfikacja została wykonana na jednej z realizacji sklepu internetowego firmy SmartProjects.pl.

Pliki użyte w modyfikacji znajdziesz poniżej:

Pobierz

Share This:

Dodaj komentarz

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