Jeżeli chcemy mieć popup z obrazkiem widoczny na stronie głównej z przyciemnionym tłem (np. informacje o aktualnych promocjach albo zniżkach) 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:

Narzędzia >> CMS

Strony WWW Kraków

Następnie edytujemy dowolną podstronę (nie ma to żadnego znaczenia). Potem używamy edytora pola tekstowego TinyMce (edytorek zbliżony do Worda), a dokładniej 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.

Uwaga! Taka właśnie nazwa użyta jest w bibliotece wyzwalającej okienko więc jak chcesz wgrać plik o innej nazwie – odpowiednio zmień plik fancyIntro.js dołączony do tego posta w załączniku.

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 bilblioteka obsługująca funkcję ciasteczek, wyzalająca okienko i aktualna (na dzisiaj) wersja skryptu FancyBox która posiada działającą metodę open(). Ta dostarczana z PrestaShop może mieć z nią problemy.


/js/jquery/fancyCookie.js
/js/jquery/fancyIntro.js
/js/jquery/jquery.fancybox.js

Przesłanie wymaganych plików CSS

Pliki stylujące okienko.


/css/jquery.fancybox-intro.css

Przesłanie wymaganych obrazków

Obrazki użyte w obramowaniach okienka.


/js/jquery/fancybox/fancybox_overlay.png
/js/jquery/fancybox/fancybox_loading.gif
/js/jquery/fancybox/fancybox_sprite.png

Modyfikacje plików

Otwieramy plik nagłówka Twojego szablonu:

/themes/{NAZWA-TWOJEGO-SZABLONU}/header.tpl

następnie zaraz przed zamknięciem znacznika:


</head>

Wstawiamy kod:


{if $page_name=='index'}
<link href="/css/jquery.fancybox-intro.css" rel="stylesheet" type="text/css" media="{$media}" />
<script type="text/javascript" src="/js/jquery/jquery.fancybox.js"></script>
<script type="text/javascript" src="/js/jquery/fancyCookie.js"></script>
<script type="text/javascript" src="/js/jquery/fancyIntro.js"></script>
{/if}

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

Jeżeli chesz wyłączyć okienko – zakomentuj lub usuń ten kod.

UWAGI

Możliwe, że jeśli używasz modułu uecookies – elementy mogą na siebie nachodzić. Wtedy przeedytuj plik:


/modules/uecookie/top.tpl

i zmień dyrektywę CSS z-index na:


z-index: 999;

Jeśli chcesz testować zachowanie się okienka najlepiej wyłącz obsługę cookies w przegladarce lub za każdym razem usuwaj ciasteczka.

Podsumowanie

Gotowe! Teraz po wyczyszczeniu cache Presta Shop (o tym jak czyścimy cache Presta Shop w wersjach 1.4-1.6 też niebawem napiszemy) powinniśmy na starcie sklepu (strona głowna) 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 jedej z realizacji sklepu internetowego firmy SmartProjects.pl.

Demo i pliki użyte w modyfikacji znajdziesz poniżej.

Demo Pobierz

Share This:

Zostaw komentarz

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