Bannière PrestaShop

Dokumentacja CC PrestaShop Banner

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

Table des matières

1. Introduction
2. Installation
3. Activation de la licence
4. Panel de gestion
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. Utilisation du module dans les modèles
13. Résolution de problèmes
14. FAQ

1. Introduction

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.

Le module offre :

• 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. installation

Exigences du système

• PrestaShop 1.7 ou supérieur
• PHP 7.0 ou plus récent
• Permission d'installer des modules

Processus d'installation

1. Télécharger le fichier ZIP du module depuis la boutique officielle cocos.codes
2. Se connecter au panneau d'administration de PrestaShop
3. Allez dans : Modules > Gestionnaire de modules > Ajouter un nouveau module
4. Cliquez sur "Ajouter un module" et sélectionnez le fichier ZIP téléchargé.
5. Une fois l'installation terminée, cliquez sur "Configurer"

3. Activation de la licence

Avant de pouvoir utiliser toutes les fonctionnalités du module, il est nécessaire d'activer la licence :

1. Après l'installation, procéder à la configuration du module
2. Sélectionnez l'onglet "Licence
3. Saisir la clé de licence reçue après l'achat
4. Cliquez sur "Activer la licence"
5. Une fois l'activation réussie, un message de confirmation s'affiche et toutes les fonctions du module sont déverrouillées.

4 Panneau de gestion

Le panneau de gestion du module se compose de plusieurs onglets qui permettent une configuration complète :

Principaux onglets :

• Zarządzanie banerem – dodawanie, edycja i usuwanie banerów
• Documentation – link do dokumentacji online
• Soutien – link do strony wsparcia technicznego
• Plug-ins - extensions supplémentaires pour le module
• Licence - gestion des licences de modules

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. Cliquez sur "Enregistrer" pour sauvegarder les modifications

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
• CSS personnalisé – 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. S'assurer que la licence est active
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.

À quelle fréquence le module est-il mis à jour ?
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.

Puis-je transférer la licence à un autre magasin ?
La licence est attribuée à un domaine. Si vous changez de domaine de boutique, veuillez contacter le support COCOS pour transférer la licence.

Le module affecte-t-il les performances de l'atelier ?
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.