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, sklepie w budowie 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 TinyMce (edytorek zbliżony do Worda), znajdujemy na nim przycisk „Wgraj obrazek”.

Po wgraniu obrazka zmieniamy jego nazwę 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!

Włączanie / wyłączanie okienka popup

Wersja 1.6.x (i ewentualnei 1.5)

Zrób kopię bezpieczeństwa i zaloguj się do PhpMyAdmin (jak to zrobić opisywaliśmy wielokrotnie np. https://prestashopkrakow.pl/masowa-aktualizacja-cen-produktow-w-presta-shop/)

Dodaj pole konfiguracyjne:

Jeśli Twoja baza danych posiada inny prefix niż  ps_ zmień kod zapytania

Otwórz plik:

Po kodzie (lub w innym miejscu tablicy asocjacyjnej (PHP) $fields):

Dodaj analogiczny kod:

W ten sposób będzie można sterować pokazwyaniem się tego elementu w adminie:

Preferencje -> ogólnie -> Obrazkowy popup:

Następnie w w/w pliku:

na początku wstawionego kodu wpis:

A na końcu:

Czyli dla przykładu ostateczny kod, który tam umieścisz będzie miał postać:

Wersja 1.4

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 *

This site uses Akismet to reduce spam. Learn how your comment data is processed.