PrestaShop Banner

Dokumentacja CC PrestaShop Banner

Kompleksowa dokumentacja dla modułu zarządzania banerami dla PrestaShop (cc_ps_banner) z bogatymi opcjami konfiguracji i gotowymi szablonami.

Spis treści

1. Wprowadzenie
2. Instalacja
3. Aktywacja licencji
4. Panel zarządzania
5. Zarządzanie banerami
6. Konfiguracja tła
7. Konfiguracja wideo
8. Presety zawartości
9. Konfiguracja nakładki
10. Ustawienia animacji
11. Harmonogram wyświetlania
12. Korzystanie z modułu w szablonach
13. Rozwiązywanie problemów
14. FAQ

1. Wprowadzenie

CC PrestaShop Banner to zaawansowany moduł do tworzenia i zarządzania banerami w sklepach PrestaShop. Moduł oferuje intuicyjny interfejs, który umożliwia tworzenie atrakcyjnych banerów za pomocą gotowych szablonów, bez konieczności znajomości HTML i CSS.

Moduł oferuje:

• Dziewięć gotowych presetów zawartości banera
• Różne typy tła: wideo, zdjęcie lub kolor
• Integrację z YouTube, Vimeo oraz możliwość wgrania własnych plików wideo
• Nakładki (overlay) kolorowe lub graficzne
• Efekty animacji wejścia
• Harmonogram wyświetlania (od-do)
• Możliwość umieszczenia banera w różnych miejscach sklepu
• Obsługę wielu banerów jednocześnie

2. Instalacja

Wymagania systemowe

• PrestaShop 1.7 lub nowszy
• PHP 7.0 lub nowszy
• Uprawnienia do instalacji modułów

Proces instalacji

1. Pobierz plik ZIP modułu z oficjalnego sklepu cocos.codes
2. Zaloguj się do panelu administracyjnego PrestaShop
3. Przejdź do: Moduły > Menedżer modułów > Dodaj nowy moduł
4. Kliknij „Dodaj moduł” i wybierz pobrany plik ZIP
5. Po zakończeniu instalacji kliknij „Konfiguruj”

3. Aktywacja licencji

Przed rozpoczęciem korzystania z pełnej funkcjonalności modułu konieczna jest aktywacja licencji:

1. Po instalacji przejdź do konfiguracji modułu
2. Wybierz zakładkę „Licencja”
3. Wprowadź klucz licencyjny otrzymany po zakupie
4. Kliknij „Aktywuj licencję”
5. Po pomyślnej aktywacji zobaczysz komunikat potwierdzający i odblokowane zostaną wszystkie funkcje modułu

4. Panel zarządzania

Panel zarządzania modułem składa się z kilku zakładek, które umożliwiają pełną konfigurację:

Główne zakładki:

• Zarządzanie banerem – dodawanie, edycja i usuwanie banerów
• Dokumentacja – link do dokumentacji online
• Wsparcie – link do strony wsparcia technicznego
• Wtyczki – dodatkowe rozszerzenia dla modułu
• Licencja – zarządzanie licencją modułu

Po przejściu do zakładki „Zarządzanie banerem” wyświetli się lista wszystkich utworzonych banerów z możliwością ich edycji, usunięcia oraz zmiany statusu aktywności.

5. Zarządzanie banerami

W zakładce „Zarządzanie banerem” możesz tworzyć, edytować i usuwać banery:

Lista banerów

• ID banera
• Nazwa
• Hook (miejsce wyświetlania)
• Preset (szablon zawartości)
• Typ tła
• Typ wideo
• Status aktywności
• Pozycja
• Data utworzenia
• Dostępne akcje (edycja, usunięcie)

Dodawanie i edycja banerów

1. Kliknij przycisk „Dodaj nowy” lub „Edytuj” przy istniejącym banerze
2. Wypełnij formularz danych banera, który podzielony jest na sekcje:
   • Podstawowe dane – nazwa, status aktywności
   • Wyświetlanie – hook, wymiary, zaokrąglenie rogów, pozycja
   • Typ tła – wybór rodzaju tła (wideo, zdjęcie, kolor)
   • Konfiguracja wideo – ustawienia odtwarzacza wideo
   • Preset zawartości – wybór gotowego szablonu i jego konfiguracja
   • Nakładka (Overlay) – konfiguracja warstwy nakładki
   • Animacje – efekty wejścia banera
   • Harmonogram wyświetlania – ustawienie czasu aktywności banera
3. Kliknij „Zapisz” aby zachować zmiany

6. Konfiguracja tła

Moduł oferuje trzy różne typy tła banera:

Kolor

• Wybierz opcję „Kolor” jako typ tła
• Za pomocą selektora kolorów wybierz odpowiedni kolor tła
• Możesz wprowadzić wartość koloru w formacie HEX (#RRGGBB) lub RGBA

Zdjęcie

• Wybierz opcję „Zdjęcie” jako typ tła
• Wgraj obraz za pomocą przycisku „Przeglądaj”
• Obsługiwane formaty: JPG, PNG, GIF (maksymalnie 15MB)
• Podczas edycji, wgranie nowego obrazu zastąpi obecny, pozostawienie pustego pola zachowa istniejący obraz

Wideo

• Wybierz opcję „Wideo” jako typ tła
• Skonfiguruj pozostałe ustawienia wideo w sekcji „Konfiguracja wideo” (opisane w następnym rozdziale)

7. Konfiguracja wideo

Moduł umożliwia wykorzystanie wideo jako tła banera. Dostępne są różne źródła wideo:

Typy wideo

• Brak wideo – używane gdy wybrano inny typ tła niż wideo
• YouTube – osadzenie filmu z serwisu YouTube
• Vimeo – osadzenie filmu z serwisu Vimeo
• URL bezpośredni – link do pliku wideo hostowanego na zewnętrznym serwerze
• Plik wideo (upload) – wgranie własnego pliku wideo

Ustawienia odtwarzania

• Automatyczne odtwarzanie – rozpoczyna odtwarzanie automatycznie po załadowaniu strony
• Wyciszone – wideo odtwarzane bez dźwięku (zalecane dla autoodtwarzania)
• Zapętlenie – automatyczne powtarzanie wideo po jego zakończeniu
• Pokaż kontrolki – wyświetla niestandardowe przyciski sterowania (play/pause, wycisz/włącz dźwięk)

Wgrywanie własnego wideo

• Wybierz typ wideo „Plik wideo (upload)”
• Wgraj plik za pomocą przycisku „Przeglądaj”
• Obsługiwane formaty: MP4, WebM, AVI, MOV (maksymalnie 50MB)

8. Presety zawartości

Moduł oferuje dziewięć gotowych presetów (szablonów) zawartości, które można wybrać i dostosować:

Dostępne presety

• Bez presetu (tylko wideo) – wyświetla samo tło bez dodatkowej zawartości
• Preset 1 (Centralny tytuł z przyciskiem) – duży centralny tytuł, podtytuł i przycisk CTA
• Preset 2 (Tekst wyrównany do lewej) – zawartość wyrównana do lewej strony banera
• Preset 3 (Układ trzech kolumn) – zawartość podzielona na trzy kolumny
• Preset 4 (Podział na dwie kolumny) – zawartość podzielona na dwie kolumny
• Preset 5 (Pełnoekranowy z rozmyciem) – efekt pełnoekranowy z dużym tytułem centralnym
• Preset 6 (Nagłówek ze statystykami) – nagłówek u góry i trzy kolumny z danymi na dole
• Preset 7 (Lista funkcji z CTA) – tytuł i lista funkcji zakończona przyciskiem CTA
• Preset 8 (Nagłówek i dwie kolumny) – układ typu „pobierz aplikację”
• Preset 9 (Nagłówek i dwie kolumny centrowane, powiększone) – układ typu „promocja wydarzenia”

Elementy zawartości do konfiguracji

• Tytuł główny – główny nagłówek banera
• Podtytuł – tekst uzupełniający pod tytułem głównym
• Tekst przycisku – treść wyświetlana na przycisku CTA
• Link przycisku – URL docelowy po kliknięciu przycisku
• Kolor tekstu przycisku – kolor czcionki przycisku
• Kolor tła przycisku – kolor tła przycisku
• Tekst 1, 2, 3 – dodatkowe pola tekstowe wykorzystywane w różnych presetach
• Własny CSS – dodatkowe style CSS dla banera

9. Konfiguracja nakładki

Nakładka (overlay) to warstwa wyświetlana nad tłem banera, która może pomóc w zwiększeniu czytelności tekstu lub stworzeniu efektu przydymienia:

Typy nakładki

• Brak nakładki – brak dodatkowej warstwy nad tłem
• Kolor – kolorowa warstwa z regulowaną przezroczystością
• Obraz – graficzna nakładka (np. gradient, wzór, tekstura)

Ustawienia nakładki kolorowej

• Kolor nakładki – wybór koloru za pomocą selektora (obsługuje formaty HEX i RGBA)
• Przezroczystość – wartość od 0.0 (całkowicie przezroczysta) do 1.0 (nieprzezroczysta)

Ustawienia nakładki obrazowej

• Obraz nakładki – wgranie obrazu za pomocą przycisku „Przeglądaj”
• Przezroczystość – regulacja intensywności nakładki obrazowej

10. Ustawienia animacji

Moduł oferuje kilka efektów animacji, które są stosowane podczas ładowania banera:

Animacja wejścia

• Bez animacji – baner pojawia się natychmiast
• Płynne pojawianie – baner stopniowo staje się widoczny (efekt fade-in)
• Wjazd z lewej – baner wjeżdża od lewej strony ekranu
• Wjazd z prawej – baner wjeżdża od prawej strony ekranu
• Wjazd z dołu – baner wjeżdża od dołu ekranu
• Powiększanie – baner pojawia się z efektem powiększania od środka
• Odbijanie – baner pojawia się z efektem odbicia

Czas animacji

• Wartość w milisekundach (od 100 do 10000)
• Domyślna wartość to 1000ms (1 sekunda)
• Krótszy czas = szybsza animacja
• Dłuższy czas = wolniejsza, bardziej płynna animacja

11. Harmonogram wyświetlania

Funkcja harmonogramu pozwala na automatyczne włączanie i wyłączanie banerów w określonym czasie:

Ustawienia harmonogramu

• Włącz harmonogram – aktywacja funkcji czasowego wyświetlania
• Data rozpoczęcia – data i godzina od kiedy baner ma być wyświetlany
• Data zakończenia – data i godzina do kiedy baner ma być wyświetlany

Przykłady zastosowania

• Banery promocyjne ograniczone czasowo (np. Black Friday, wyprzedaże sezonowe)
• Informacje o nadchodzących wydarzeniach
• Zmiana banerów według pory dnia (inne banery rano, inne wieczorem)
• Okresowe komunikaty dla klientów

12. Korzystanie z modułu w szablonach

Banery są automatycznie wyświetlane w miejscach określonych przez wybrane hooki. Dostępne hooki obejmują:

Główne lokalizacje

• displayHome – główna zawartość strony startowej
• displayTop – górna sekcja strony (nad nagłówkiem)
• displayNav1 – pierwszy pasek nawigacyjny (nad logo/sklepem)
• displayNav2 – drugi pasek nawigacyjny (często pod logo)
• displayNavFullWidth – pełnoszeroka nawigacja (np. menu megadropdown)
• displayBanner – baner reklamowy nad nagłówkiem
• displayFooter – główna zawartość stopki
• displayFooterBefore – sekcja przed stopką (np. dodatkowe linki)
• displayFooterAfter – sekcja po stopce (np. zastrzeżenia, skrypty)
• displayLeftColumn – lewa kolumna strony
• displayRightColumn – prawa kolumna strony
• displayWrapperTop – górna część głównego kontenera strony
• displayWrapperBottom – dolna część głównego kontenera strony
• displayContentWrapperTop – górna część głównej zawartości
• displayContentWrapperBottom – dolna część głównej zawartości
• displayBeforeBodyClosingTag – bezpośrednio przed zamknięciem tagu <body> (często na skrypty)

Hooki strony produktu

• displayProductAdditionalInfo – dodatkowe informacje na stronie produktu
• displayProductListReviews – opinie produktów w widoku listy (np. gwiazdki)
• displayReassurance – blok z gwarancjami/zaufaniem
• displayAfterProductThumbs – elementy po miniaturach zdjęć produktu

Hooki koszyka i zamówienia

• displayShoppingCart – zawartość na stronie koszyka
• displayShoppingCartFooter – dodatki w stopce koszyka (np. przyciski CTA)
• displayBeforeCarrier – sekcja przed wyborem metody dostawy
• displayAfterCarrier – sekcja po wyborze metody dostawy
• displayOrderConfirmation – potwierdzenie złożenia zamówienia

Hooki konta klienta

• displayCustomerAccount – zawartość konta klienta (np. linki, moduły)
• displayMyAccountBlock – blok „Moje konto” (zwykle w nagłówku lub bocznej kolumnie)

13. Rozwiązywanie problemów

Baner nie wyświetla się

1. Sprawdź, czy baner jest aktywny (status „Aktywny” w liście banerów)
2. Upewnij się, że licencja jest aktywna
3. Sprawdź, czy hook, do którego przypisano baner, jest obecny w aktualnym szablonie
4. Jeśli włączony jest harmonogram, upewnij się, że aktualna data mieści się w jego zakresie
5. Wyczyść pamięć podręczną PrestaShop i przeglądarki

Wideo nie odtwarza się automatycznie

1. Upewnij się, że opcja „Automatyczne odtwarzanie” jest włączona
2. Sprawdź, czy wideo jest wyciszone (przeglądarki blokują automatyczne odtwarzanie wideo z dźwiękiem)
3. Sprawdź, czy URL wideo jest poprawny (w przypadku YouTube i Vimeo)
4. Sprawdź, czy plik wideo został poprawnie wgrany (w przypadku własnego pliku)

Problemy z wyświetlaniem na urządzeniach mobilnych

1. Dostosuj wymiary banera tak, aby był responsywny (np. szerokość: 100%)
2. Zmniejsz rozmiar wgranego wideo lub zdjęcia dla lepszej wydajności
3. Dostosuj ilość tekstu – na małych ekranach zbyt dużo tekstu może być nieczytelne

14. FAQ

Czy mogę mieć więcej niż jeden baner w tym samym miejscu (hooku)?
Tak, moduł umożliwia przypisanie wielu banerów do tego samego hooka. Banery będą wyświetlane według ustawionej pozycji (od najniższej do najwyższej wartości).

Czy mogę użyć tego samego banera w różnych miejscach sklepu?
Aktualnie jeden baner może być przypisany tylko do jednego hooka. Jeśli chcesz wyświetlić ten sam baner w różnych miejscach, musisz utworzyć jego kopię i przypisać ją do innego hooka.

Jak duże pliki wideo mogę wgrać?
Moduł pozwala na wgranie plików wideo o maksymalnym rozmiarze 50MB. Dla optymalnej wydajności zalecamy jednak kompresję wideo do niezbędnego minimum i wykorzystanie formatu MP4 z kodekiem H.264.

Czy banery są responsywne?
Tak, banery dostosowują się do szerokości kontenera, w którym są wyświetlane. Aby zapewnić pełną responsywność, zalecamy ustawienie szerokości na 100% oraz odpowiedniej wysokości (możesz użyć jednostek vh dla wysokości zależnej od wysokości ekranu).

Czy mogę osadzić formularz w banerze?
Moduł w standardowej wersji nie obsługuje bezpośrednio formularzy. Jeśli potrzebujesz umieścić formularz w banerze, możesz użyć niestandardowego kodu HTML w polach tekstowych, ale funkcjonalność formularza będzie zależeć od szablonu Twojego sklepu.

Jak często aktualizowany jest moduł?
Moduł jest regularnie aktualizowany, aby zapewnić zgodność z najnowszymi wersjami PrestaShop oraz wprowadzać nowe funkcje. Posiadacze ważnej licencji mają dostęp do wszystkich aktualizacji.

Czy mogę przenieść licencję na inny sklep?
Licencja jest przypisana do jednej domeny. W przypadku zmiany domeny sklepu należy skontaktować się z supportem COCOS w celu przeniesienia licencji.

Czy moduł wpływa na wydajność sklepu?
Moduł został zoptymalizowany pod kątem wydajności. Największy wpływ na szybkość ładowania mogą mieć duże pliki wideo lub zdjęcia. Zalecamy optymalizację plików multimedialnych przed ich wykorzystaniem w banerach.