{"id":3981,"date":"2025-05-28T10:59:54","date_gmt":"2025-05-28T08:59:54","guid":{"rendered":"https:\/\/cocos.codes\/?p=3981"},"modified":"2026-01-21T16:10:20","modified_gmt":"2026-01-21T15:10:20","slug":"prestashop-banner","status":"publish","type":"post","link":"https:\/\/cocos.codes\/pl\/archiwa\/prestashop-banner\/","title":{"rendered":"PrestaShop Banner 1.0"},"content":{"rendered":"<h6>Dokumentacja PrestaShop Banner<\/h6>Kompleksowa <a href=\"https:\/\/cocos.codes\/pl\/kategoria\/baza-wiedzy\/prestashop\/dokumentacje-prestashop\/\" title=\"Dokumentacja\">dokumentacja<\/a> dla modu\u0142u zarz\u0105dzania banerami dla <a href=\"https:\/\/prestashop.com\/\" title=\"PrestaShop\" target=\"_blank\" rel=\"noopener\">PrestaShop<\/a> (<a href=\"https:\/\/cocos.codes\/pl\/produkt\/prestashop-banner\/\" title=\"Cc_ps_banner\">cc_ps_banner<\/a>) z bogatymi opcjami konfiguracji i gotowymi szablonami.<br \/><br \/><p><strong>Spis tre\u015bci<\/strong><\/p><ol><li>Wprowadzenie<\/li><li>Instalacja<\/li><li>Aktywacja licencji<\/li><li>Panel zarz\u0105dzania<\/li><li>Zarz\u0105dzanie banerami<\/li><li>Konfiguracja t\u0142a<\/li><li>Konfiguracja wideo<\/li><li>Presety zawarto\u015bci<\/li><li>Konfiguracja nak\u0142adki<\/li><li>Ustawienia animacji<\/li><li>Harmonogram wy\u015bwietlania<\/li><li>Korzystanie z modu\u0142u w szablonach<\/li><li>Rozwi\u0105zywanie problem\u00f3w<\/li><li>FAQ<\/li><\/ol><h6><br \/>1. Wprowadzenie<\/h6>CC PrestaShop Banner to zaawansowany modu\u0142 do tworzenia i zarz\u0105dzania banerami w sklepach PrestaShop. Modu\u0142 oferuje intuicyjny interfejs, kt\u00f3ry umo\u017cliwia tworzenie atrakcyjnych baner\u00f3w za pomoc\u0105 gotowych szablon\u00f3w, bez konieczno\u015bci znajomo\u015bci HTML i CSS.<br \/><br \/>Modu\u0142 oferuje:<ul><li>Dziewi\u0119\u0107 gotowych preset\u00f3w zawarto\u015bci banera<\/li><li>R\u00f3\u017cne typy t\u0142a: wideo, zdj\u0119cie lub kolor<\/li><li>Integracj\u0119 z YouTube, Vimeo oraz mo\u017cliwo\u015b\u0107 wgrania w\u0142asnych plik\u00f3w wideo<\/li><li>Nak\u0142adki (overlay) kolorowe lub graficzne<\/li><li>Efekty animacji wej\u015bcia<\/li><li>Harmonogram wy\u015bwietlania (od-do)<\/li><li>Mo\u017cliwo\u015b\u0107 umieszczenia banera w r\u00f3\u017cnych miejscach sklepu<\/li><li>Obs\u0142ug\u0119 wielu baner\u00f3w jednocze\u015bnie<\/li><\/ul><h6><br \/>2. Instalacja<\/h6><strong>Wymagania systemowe<\/strong><ul><li>PrestaShop 1.7 lub nowszy<\/li><li>PHP 7.0 lub nowszy<\/li><li>Uprawnienia do instalacji modu\u0142\u00f3w<\/li><\/ul><strong>Proces instalacji<\/strong><ol><li>Pobierz plik ZIP modu\u0142u z oficjalnego sklepu <a class=\"button\" href=\"https:\/\/cocos.codes\" title=\"Cocos.codes\">cocos.codes<\/a><\/li><li>Zaloguj si\u0119 do panelu administracyjnego PrestaShop<\/li><li>Przejd\u017a do: Modu\u0142y &gt; Mened\u017cer modu\u0142\u00f3w &gt; Dodaj nowy modu\u0142<\/li><li>Kliknij \u201eDodaj modu\u0142&#8221; i wybierz pobrany plik ZIP<\/li><li>Po zako\u0144czeniu instalacji kliknij \u201eKonfiguruj&#8221;<\/li><\/ol><div class=\"cc-alert cc-alert-info\"><div class=\"cc-alert-title\">Info<\/div><div class=\"cc-alert-content\">Po instalacji modu\u0142 automatycznie utworzy niezb\u0119dne tabele w bazie danych. Konieczne b\u0119dzie skonfigurowanie modu\u0142u oraz aktywacja licencji przed pe\u0142nym wykorzystaniem wszystkich funkcji.<\/div><\/div><h6><br \/>3. Aktywacja licencji<\/h6>Przed rozpocz\u0119ciem korzystania z pe\u0142nej funkcjonalno\u015bci modu\u0142u konieczna jest aktywacja licencji:<ol><li>Po instalacji przejd\u017a do konfiguracji modu\u0142u<\/li><li>Wybierz zak\u0142adk\u0119 \u201eLicencja&#8221;<\/li><li>Wprowad\u017a klucz licencyjny otrzymany po zakupie<\/li><li>Kliknij \u201eAktywuj licencj\u0119&#8221;<\/li><li>Po pomy\u015blnej aktywacji zobaczysz komunikat potwierdzaj\u0105cy i odblokowane zostan\u0105 wszystkie funkcje modu\u0142u<\/li><\/ol><div class=\"cc-alert cc-alert-warning\"><div class=\"cc-alert-title\">Ostrze\u017cenie<\/div><div class=\"cc-alert-content\">Bez aktywnej licencji modu\u0142 b\u0119dzie dzia\u0142a\u0142 w trybie ograniczonym, bez wszystkich zaawansowanych funkcji. W g\u00f3rnej cz\u0119\u015bci panelu administracyjnego b\u0119dzie wy\u015bwietlany komunikat o nieaktywnej licencji.<\/div><\/div><h6><br \/>4. Panel zarz\u0105dzania<\/h6>Panel zarz\u0105dzania modu\u0142em sk\u0142ada si\u0119 z kilku zak\u0142adek, kt\u00f3re umo\u017cliwiaj\u0105 pe\u0142n\u0105 konfiguracj\u0119:<br \/><br \/><strong>G\u0142\u00f3wne zak\u0142adki:<\/strong><ul><li><strong>Zarz\u0105dzanie banerem<\/strong> &#8211; dodawanie, edycja i usuwanie baner\u00f3w<\/li><li><strong>Dokumentacja<\/strong> &#8211; link do dokumentacji online<\/li><li><strong>Wsparcie<\/strong> &#8211; link do strony wsparcia technicznego<\/li><li><strong>Wtyczki<\/strong> &#8211; dodatkowe rozszerzenia dla modu\u0142u<\/li><li><strong>Licencja<\/strong> &#8211; zarz\u0105dzanie licencj\u0105 modu\u0142u<\/li><\/ul><br \/>Po przej\u015bciu do zak\u0142adki &#8222;Zarz\u0105dzanie banerem&#8221; wy\u015bwietli si\u0119 lista wszystkich utworzonych baner\u00f3w z mo\u017cliwo\u015bci\u0105 ich edycji, usuni\u0119cia oraz zmiany statusu aktywno\u015bci.<h6><br \/>5. Zarz\u0105dzanie banerami<\/h6>W zak\u0142adce &#8222;Zarz\u0105dzanie banerem&#8221; mo\u017cesz tworzy\u0107, edytowa\u0107 i usuwa\u0107 banery:<br \/><br \/><strong>Lista baner\u00f3w<\/strong><ul><li>ID banera<\/li><li>Nazwa<\/li><li>Hook (miejsce wy\u015bwietlania)<\/li><li>Preset (szablon zawarto\u015bci)<\/li><li>Typ t\u0142a<\/li><li>Typ wideo<\/li><li>Status aktywno\u015bci<\/li><li>Pozycja<\/li><li>Data utworzenia<\/li><li>Dost\u0119pne akcje (edycja, usuni\u0119cie)<\/li><\/ul><strong>Dodawanie i edycja baner\u00f3w<\/strong><ol><li>Kliknij przycisk &#8222;Dodaj nowy&#8221; lub &#8222;Edytuj&#8221; przy istniej\u0105cym banerze<\/li><li>Wype\u0142nij formularz danych banera, kt\u00f3ry podzielony jest na sekcje:<ul><li><strong>Podstawowe dane<\/strong> &#8211; nazwa, status aktywno\u015bci<\/li><li><strong>Wy\u015bwietlanie<\/strong> &#8211; hook, wymiary, zaokr\u0105glenie rog\u00f3w, pozycja<\/li><li><strong>Typ t\u0142a<\/strong> &#8211; wyb\u00f3r rodzaju t\u0142a (wideo, zdj\u0119cie, kolor)<\/li><li><strong>Konfiguracja wideo<\/strong> &#8211; ustawienia odtwarzacza wideo<\/li><li><strong>Preset zawarto\u015bci<\/strong> &#8211; wyb\u00f3r gotowego szablonu i jego konfiguracja<\/li><li><strong>Nak\u0142adka (Overlay)<\/strong> &#8211; konfiguracja warstwy nak\u0142adki<\/li><li><strong>Animacje<\/strong> &#8211; efekty wej\u015bcia banera<\/li><li><strong>Harmonogram wy\u015bwietlania<\/strong> &#8211; ustawienie czasu aktywno\u015bci banera<\/li><\/ul><\/li><li>Kliknij &#8222;Zapisz&#8221; aby zachowa\u0107 zmiany<\/li><\/ol><div class=\"cc-alert cc-alert-tip\"><div class=\"cc-alert-title\">Wskaz\u00f3wka<\/div><div class=\"cc-alert-content\">Dobr\u0105 praktyk\u0105 jest nadawanie banerom opisowych nazw, kt\u00f3re u\u0142atwiaj\u0105 ich identyfikacj\u0119 w panelu, np. &#8222;Promocja wiosenna &#8211; strona g\u0142\u00f3wna&#8221; lub &#8222;Banner promocyjny &#8211; Black Friday&#8221;.<\/div><\/div><h6><br \/>6. Konfiguracja t\u0142a<\/h6>Modu\u0142 oferuje trzy r\u00f3\u017cne typy t\u0142a banera:<br \/><br \/><strong>Kolor<\/strong><ul><li>Wybierz opcj\u0119 &#8222;Kolor&#8221; jako typ t\u0142a<\/li><li>Za pomoc\u0105 selektora kolor\u00f3w wybierz odpowiedni kolor t\u0142a<\/li><li>Mo\u017cesz wprowadzi\u0107 warto\u015b\u0107 koloru w formacie HEX (#RRGGBB) lub RGBA<\/li><\/ul><strong>Zdj\u0119cie<\/strong><ul><li>Wybierz opcj\u0119 &#8222;Zdj\u0119cie&#8221; jako typ t\u0142a<\/li><li>Wgraj obraz za pomoc\u0105 przycisku &#8222;Przegl\u0105daj&#8221;<\/li><li>Obs\u0142ugiwane formaty: JPG, PNG, GIF (maksymalnie 15MB)<\/li><li>Podczas edycji, wgranie nowego obrazu zast\u0105pi obecny, pozostawienie pustego pola zachowa istniej\u0105cy obraz<\/li><\/ul><strong>Wideo<\/strong><ul><li>Wybierz opcj\u0119 &#8222;Wideo&#8221; jako typ t\u0142a<\/li><li>Skonfiguruj pozosta\u0142e ustawienia wideo w sekcji &#8222;Konfiguracja wideo&#8221; (opisane w nast\u0119pnym rozdziale)<\/li><\/ul><div class=\"cc-alert cc-alert-note\"><div class=\"cc-alert-title\">Notatka<\/div><div class=\"cc-alert-content\">W przypadku wyboru t\u0142a wideo, warto ustawi\u0107 r\u00f3wnie\u017c kolorowe t\u0142o jako warstwa zapasowa podczas \u0142adowania wideo, aby u\u017cytkownik nie widzia\u0142 pustego elementu.<\/div><\/div><h6><br \/>7. Konfiguracja wideo<\/h6>Modu\u0142 umo\u017cliwia wykorzystanie wideo jako t\u0142a banera. Dost\u0119pne s\u0105 r\u00f3\u017cne \u017ar\u00f3d\u0142a wideo:<br \/><br \/><strong>Typy wideo<\/strong><ul><li><strong>Brak wideo<\/strong> &#8211; u\u017cywane gdy wybrano inny typ t\u0142a ni\u017c wideo<\/li><li><strong>YouTube<\/strong> &#8211; osadzenie filmu z serwisu YouTube<\/li><li><strong>Vimeo<\/strong> &#8211; osadzenie filmu z serwisu Vimeo<\/li><li><strong>URL bezpo\u015bredni<\/strong> &#8211; link do pliku wideo hostowanego na zewn\u0119trznym serwerze<\/li><li><strong>Plik wideo (upload)<\/strong> &#8211; wgranie w\u0142asnego pliku wideo<\/li><\/ul><strong>Ustawienia odtwarzania<\/strong><ul><li><strong>Automatyczne odtwarzanie<\/strong> &#8211; rozpoczyna odtwarzanie automatycznie po za\u0142adowaniu strony<\/li><li><strong>Wyciszone<\/strong> &#8211; wideo odtwarzane bez d\u017awi\u0119ku (zalecane dla autoodtwarzania)<\/li><li><strong>Zap\u0119tlenie<\/strong> &#8211; automatyczne powtarzanie wideo po jego zako\u0144czeniu<\/li><li><strong>Poka\u017c kontrolki<\/strong> &#8211; wy\u015bwietla niestandardowe przyciski sterowania (play\/pause, wycisz\/w\u0142\u0105cz d\u017awi\u0119k)<\/li><\/ul><strong>Wgrywanie w\u0142asnego wideo<\/strong><ul><li>Wybierz typ wideo &#8222;Plik wideo (upload)&#8221;<\/li><li>Wgraj plik za pomoc\u0105 przycisku &#8222;Przegl\u0105daj&#8221;<\/li><li>Obs\u0142ugiwane formaty: MP4, WebM, AVI, MOV (maksymalnie 50MB)<\/li><\/ul><div class=\"cc-alert cc-alert-warning\"><div class=\"cc-alert-title\">Ostrze\u017cenie<\/div><div class=\"cc-alert-content\">Autoplay wideo z d\u017awi\u0119kiem jest blokowany przez wi\u0119kszo\u015b\u0107 nowoczesnych przegl\u0105darek. Dla najlepszych efekt\u00f3w, zalecamy w\u0142\u0105czenie opcji &#8222;Wyciszone&#8221; przy w\u0142\u0105czonym automatycznym odtwarzaniu.<\/div><\/div><h6><br \/>8. Presety zawarto\u015bci<\/h6>Modu\u0142 oferuje dziewi\u0119\u0107 gotowych preset\u00f3w (szablon\u00f3w) zawarto\u015bci, kt\u00f3re mo\u017cna wybra\u0107 i dostosowa\u0107:<br \/><br \/><strong>Dost\u0119pne presety<\/strong><ul><li><strong>Bez presetu (tylko wideo)<\/strong> &#8211; wy\u015bwietla samo t\u0142o bez dodatkowej zawarto\u015bci<\/li><li><strong>Preset 1 (Centralny tytu\u0142 z przyciskiem)<\/strong> &#8211; du\u017cy centralny tytu\u0142, podtytu\u0142 i przycisk CTA<\/li><li><strong>Preset 2 (Tekst wyr\u00f3wnany do lewej)<\/strong> &#8211; zawarto\u015b\u0107 wyr\u00f3wnana do lewej strony banera<\/li><li><strong>Preset 3 (Uk\u0142ad trzech kolumn)<\/strong> &#8211; zawarto\u015b\u0107 podzielona na trzy kolumny<\/li><li><strong>Preset 4 (Podzia\u0142 na dwie kolumny)<\/strong> &#8211; zawarto\u015b\u0107 podzielona na dwie kolumny<\/li><li><strong>Preset 5 (Pe\u0142noekranowy z rozmyciem)<\/strong> &#8211; efekt pe\u0142noekranowy z du\u017cym tytu\u0142em centralnym<\/li><li><strong>Preset 6 (Nag\u0142\u00f3wek ze statystykami)<\/strong> &#8211; nag\u0142\u00f3wek u g\u00f3ry i trzy kolumny z danymi na dole<\/li><li><strong>Preset 7 (Lista funkcji z CTA)<\/strong> &#8211; tytu\u0142 i lista funkcji zako\u0144czona przyciskiem CTA<\/li><li><strong>Preset 8 (Nag\u0142\u00f3wek i dwie kolumny)<\/strong> &#8211; uk\u0142ad typu &#8222;pobierz aplikacj\u0119&#8221;<\/li><li><strong>Preset 9 (Nag\u0142\u00f3wek i dwie kolumny centrowane, powi\u0119kszone)<\/strong> &#8211; uk\u0142ad typu &#8222;promocja wydarzenia&#8221;<\/li><\/ul><strong>Elementy zawarto\u015bci do konfiguracji<\/strong><ul><li><strong>Tytu\u0142 g\u0142\u00f3wny<\/strong> &#8211; g\u0142\u00f3wny nag\u0142\u00f3wek banera<\/li><li><strong>Podtytu\u0142<\/strong> &#8211; tekst uzupe\u0142niaj\u0105cy pod tytu\u0142em g\u0142\u00f3wnym<\/li><li><strong>Tekst przycisku<\/strong> &#8211; tre\u015b\u0107 wy\u015bwietlana na przycisku CTA<\/li><li><strong>Link przycisku<\/strong> &#8211; URL docelowy po klikni\u0119ciu przycisku<\/li><li><strong>Kolor tekstu przycisku<\/strong> &#8211; kolor czcionki przycisku<\/li><li><strong>Kolor t\u0142a przycisku<\/strong> &#8211; kolor t\u0142a przycisku<\/li><li><strong>Tekst 1, 2, 3<\/strong> &#8211; dodatkowe pola tekstowe wykorzystywane w r\u00f3\u017cnych presetach<\/li><li><strong>W\u0142asny CSS<\/strong> &#8211; dodatkowe style CSS dla banera<\/li><\/ul><div class=\"cc-alert cc-alert-tip\"><div class=\"cc-alert-title\">Wskaz\u00f3wka<\/div><div class=\"cc-alert-content\">Pola tekstowe obs\u0142uguj\u0105 formatowanie HTML, co pozwala na dodanie pogrubienia, kursywy, kolor\u00f3w tekstu oraz innych efekt\u00f3w. Mo\u017cna r\u00f3wnie\u017c dodawa\u0107 ikony i emoji, aby uatrakcyjni\u0107 zawarto\u015b\u0107.<\/div><\/div><h6><br \/>9. Konfiguracja nak\u0142adki<\/h6>Nak\u0142adka (overlay) to warstwa wy\u015bwietlana nad t\u0142em banera, kt\u00f3ra mo\u017ce pom\u00f3c w zwi\u0119kszeniu czytelno\u015bci tekstu lub stworzeniu efektu przydymienia:<br \/><br \/><strong>Typy nak\u0142adki<\/strong><ul><li><strong>Brak nak\u0142adki<\/strong> &#8211; brak dodatkowej warstwy nad t\u0142em<\/li><li><strong>Kolor<\/strong> &#8211; kolorowa warstwa z regulowan\u0105 przezroczysto\u015bci\u0105<\/li><li><strong>Obraz<\/strong> &#8211; graficzna nak\u0142adka (np. gradient, wz\u00f3r, tekstura)<\/li><\/ul><strong>Ustawienia nak\u0142adki kolorowej<\/strong><ul><li><strong>Kolor nak\u0142adki<\/strong> &#8211; wyb\u00f3r koloru za pomoc\u0105 selektora (obs\u0142uguje formaty HEX i RGBA)<\/li><li><strong>Przezroczysto\u015b\u0107<\/strong> &#8211; warto\u015b\u0107 od 0.0 (ca\u0142kowicie przezroczysta) do 1.0 (nieprzezroczysta)<\/li><\/ul><strong>Ustawienia nak\u0142adki obrazowej<\/strong><ul><li><strong>Obraz nak\u0142adki<\/strong> &#8211; wgranie obrazu za pomoc\u0105 przycisku &#8222;Przegl\u0105daj&#8221;<\/li><li><strong>Przezroczysto\u015b\u0107<\/strong> &#8211; regulacja intensywno\u015bci nak\u0142adki obrazowej<\/li><\/ul><div class=\"cc-alert cc-alert-tip\"><div class=\"cc-alert-title\">Wskaz\u00f3wka<\/div><div class=\"cc-alert-content\">Ciemna nak\u0142adka z przezroczysto\u015bci\u0105 0.3-0.6 nad zdj\u0119ciem lub wideo znacznie poprawia czytelno\u015b\u0107 bia\u0142ego tekstu. Dla jasnego tekstu na jasnym tle zalecamy u\u017cycie ciemniejszej nak\u0142adki.<\/div><\/div><h6><br \/>10. Ustawienia animacji<\/h6>Modu\u0142 oferuje kilka efekt\u00f3w animacji, kt\u00f3re s\u0105 stosowane podczas \u0142adowania banera:<br \/><br \/><strong>Animacja wej\u015bcia<\/strong><ul><li><strong>Bez animacji<\/strong> &#8211; baner pojawia si\u0119 natychmiast<\/li><li><strong>P\u0142ynne pojawianie<\/strong> &#8211; baner stopniowo staje si\u0119 widoczny (efekt fade-in)<\/li><li><strong>Wjazd z lewej<\/strong> &#8211; baner wje\u017cd\u017ca od lewej strony ekranu<\/li><li><strong>Wjazd z prawej<\/strong> &#8211; baner wje\u017cd\u017ca od prawej strony ekranu<\/li><li><strong>Wjazd z do\u0142u<\/strong> &#8211; baner wje\u017cd\u017ca od do\u0142u ekranu<\/li><li><strong>Powi\u0119kszanie<\/strong> &#8211; baner pojawia si\u0119 z efektem powi\u0119kszania od \u015brodka<\/li><li><strong>Odbijanie<\/strong> &#8211; baner pojawia si\u0119 z efektem odbicia<\/li><\/ul><strong>Czas animacji<\/strong><ul><li>Warto\u015b\u0107 w milisekundach (od 100 do 10000)<\/li><li>Domy\u015blna warto\u015b\u0107 to 1000ms (1 sekunda)<\/li><li>Kr\u00f3tszy czas = szybsza animacja<\/li><li>D\u0142u\u017cszy czas = wolniejsza, bardziej p\u0142ynna animacja<\/li><\/ul><div class=\"cc-alert cc-alert-note\"><div class=\"cc-alert-title\">Notatka<\/div><div class=\"cc-alert-content\">Animacje s\u0105 realizowane przy u\u017cyciu CSS, co zapewnia p\u0142ynne dzia\u0142anie nawet na urz\u0105dzeniach mobilnych. Je\u015bli animacja nie dzia\u0142a p\u0142ynnie na starszych urz\u0105dzeniach, zalecamy skr\u00f3cenie czasu animacji lub wybranie prostszego efektu.<\/div><\/div><h6><br \/>11. Harmonogram wy\u015bwietlania<\/h6>Funkcja harmonogramu pozwala na automatyczne w\u0142\u0105czanie i wy\u0142\u0105czanie baner\u00f3w w okre\u015blonym czasie:<br \/><br \/><strong>Ustawienia harmonogramu<\/strong><ul><li><strong>W\u0142\u0105cz harmonogram<\/strong> &#8211; aktywacja funkcji czasowego wy\u015bwietlania<\/li><li><strong>Data rozpocz\u0119cia<\/strong> &#8211; data i godzina od kiedy baner ma by\u0107 wy\u015bwietlany<\/li><li><strong>Data zako\u0144czenia<\/strong> &#8211; data i godzina do kiedy baner ma by\u0107 wy\u015bwietlany<\/li><\/ul><strong>Przyk\u0142ady zastosowania<\/strong><ul><li>Banery promocyjne ograniczone czasowo (np. Black Friday, wyprzeda\u017ce sezonowe)<\/li><li>Informacje o nadchodz\u0105cych wydarzeniach<\/li><li>Zmiana baner\u00f3w wed\u0142ug pory dnia (inne banery rano, inne wieczorem)<\/li><li>Okresowe komunikaty dla klient\u00f3w<\/li><\/ul><div class=\"cc-alert cc-alert-info\"><div class=\"cc-alert-title\">Info<\/div><div class=\"cc-alert-content\">Harmonogram dzia\u0142a na podstawie czasu serwera, nie czasu lokalnego u\u017cytkownika. Upewnij si\u0119, \u017ce strefa czasowa serwera jest poprawnie skonfigurowana w ustawieniach PrestaShop.<\/div><\/div><h6><br \/>12. Korzystanie z modu\u0142u w szablonach<\/h6>Banery s\u0105 automatycznie wy\u015bwietlane w miejscach okre\u015blonych przez wybrane hooki. Dost\u0119pne hooki obejmuj\u0105:<br \/><br \/><strong>G\u0142\u00f3wne lokalizacje<\/strong><ul><li><strong>displayHome<\/strong> &#8211; g\u0142\u00f3wna zawarto\u015b\u0107 strony startowej<\/li><li><strong>displayTop<\/strong> &#8211; g\u00f3rna sekcja strony (nad nag\u0142\u00f3wkiem)<\/li><li><strong>displayNav1<\/strong> &#8211; pierwszy pasek nawigacyjny (nad logo\/sklepem)<\/li><li><strong>displayNav2<\/strong> &#8211; drugi pasek nawigacyjny (cz\u0119sto pod logo)<\/li><li><strong>displayNavFullWidth<\/strong> &#8211; pe\u0142noszeroka nawigacja (np. menu megadropdown)<\/li><li><strong>displayBanner<\/strong> &#8211; baner reklamowy nad nag\u0142\u00f3wkiem<\/li><li><strong>displayFooter<\/strong> &#8211; g\u0142\u00f3wna zawarto\u015b\u0107 stopki<\/li><li><strong>displayFooterBefore<\/strong> &#8211; sekcja przed stopk\u0105 (np. dodatkowe linki)<\/li><li><strong>displayFooterAfter<\/strong> &#8211; sekcja po stopce (np. zastrze\u017cenia, skrypty)<\/li><li><strong>displayLeftColumn<\/strong> &#8211; lewa kolumna strony<\/li><li><strong>displayRightColumn<\/strong> &#8211; prawa kolumna strony<\/li><li><strong>displayWrapperTop<\/strong> &#8211; g\u00f3rna cz\u0119\u015b\u0107 g\u0142\u00f3wnego kontenera strony<\/li><li><strong>displayWrapperBottom<\/strong> &#8211; dolna cz\u0119\u015b\u0107 g\u0142\u00f3wnego kontenera strony<\/li><li><strong>displayContentWrapperTop<\/strong> &#8211; g\u00f3rna cz\u0119\u015b\u0107 g\u0142\u00f3wnej zawarto\u015bci<\/li><li><strong>displayContentWrapperBottom<\/strong> &#8211; dolna cz\u0119\u015b\u0107 g\u0142\u00f3wnej zawarto\u015bci<\/li><li><strong>displayBeforeBodyClosingTag<\/strong> &#8211; bezpo\u015brednio przed zamkni\u0119ciem tagu &lt;body&gt; (cz\u0119sto na skrypty)<\/li><\/ul><strong>Hooki strony produktu<\/strong><ul><li><strong>displayProductAdditionalInfo<\/strong> &#8211; dodatkowe informacje na stronie produktu<\/li><li><strong>displayProductListReviews<\/strong> &#8211; opinie produkt\u00f3w w widoku listy (np. gwiazdki)<\/li><li><strong>displayReassurance<\/strong> &#8211; blok z gwarancjami\/zaufaniem<\/li><li><strong>displayAfterProductThumbs<\/strong> &#8211; elementy po miniaturach zdj\u0119\u0107 produktu<\/li><\/ul><strong>Hooki koszyka i zam\u00f3wienia<\/strong><ul><li><strong>displayShoppingCart<\/strong> &#8211; zawarto\u015b\u0107 na stronie koszyka<\/li><li><strong>displayShoppingCartFooter<\/strong> &#8211; dodatki w stopce koszyka (np. przyciski CTA)<\/li><li><strong>displayBeforeCarrier<\/strong> &#8211; sekcja przed wyborem metody dostawy<\/li><li><strong>displayAfterCarrier<\/strong> &#8211; sekcja po wyborze metody dostawy<\/li><li><strong>displayOrderConfirmation<\/strong> &#8211; potwierdzenie z\u0142o\u017cenia zam\u00f3wienia<\/li><\/ul><strong>Hooki konta klienta<\/strong><ul><li><strong>displayCustomerAccount<\/strong> &#8211; zawarto\u015b\u0107 konta klienta (np. linki, modu\u0142y)<\/li><li><strong>displayMyAccountBlock<\/strong> &#8211; blok &#8222;Moje konto&#8221; (zwykle w nag\u0142\u00f3wku lub bocznej kolumnie)<\/li><\/ul><div class=\"cc-alert cc-alert-tip\"><div class=\"cc-alert-title\">Wskaz\u00f3wka<\/div><div class=\"cc-alert-content\">Dla uzyskania najlepszych efekt\u00f3w, zalecamy dostosowanie szeroko\u015bci i wysoko\u015bci banera odpowiednio do miejsca, w kt\u00f3rym ma by\u0107 wy\u015bwietlany. Na przyk\u0142ad, banery w kolumnach bocznych powinny by\u0107 w\u0119\u017csze ni\u017c banery na stronie g\u0142\u00f3wnej.<\/div><\/div><h6><br \/>13. Rozwi\u0105zywanie problem\u00f3w<\/h6><strong>Baner nie wy\u015bwietla si\u0119<\/strong><ol><li>Sprawd\u017a, czy baner jest aktywny (status &#8222;Aktywny&#8221; w li\u015bcie baner\u00f3w)<\/li><li>Upewnij si\u0119, \u017ce licencja jest aktywna<\/li><li>Sprawd\u017a, czy hook, do kt\u00f3rego przypisano baner, jest obecny w aktualnym szablonie<\/li><li>Je\u015bli w\u0142\u0105czony jest harmonogram, upewnij si\u0119, \u017ce aktualna data mie\u015bci si\u0119 w jego zakresie<\/li><li>Wyczy\u015b\u0107 pami\u0119\u0107 podr\u0119czn\u0105 PrestaShop i przegl\u0105darki<\/li><\/ol><strong>Wideo nie odtwarza si\u0119 automatycznie<\/strong><ol><li>Upewnij si\u0119, \u017ce opcja &#8222;Automatyczne odtwarzanie&#8221; jest w\u0142\u0105czona<\/li><li>Sprawd\u017a, czy wideo jest wyciszone (przegl\u0105darki blokuj\u0105 automatyczne odtwarzanie wideo z d\u017awi\u0119kiem)<\/li><li>Sprawd\u017a, czy URL wideo jest poprawny (w przypadku YouTube i Vimeo)<\/li><li>Sprawd\u017a, czy plik wideo zosta\u0142 poprawnie wgrany (w przypadku w\u0142asnego pliku)<\/li><\/ol><strong>Problemy z wy\u015bwietlaniem na urz\u0105dzeniach mobilnych<\/strong><ol><li>Dostosuj wymiary banera tak, aby by\u0142 responsywny (np. szeroko\u015b\u0107: 100%)<\/li><li>Zmniejsz rozmiar wgranego wideo lub zdj\u0119cia dla lepszej wydajno\u015bci<\/li><li>Dostosuj ilo\u015b\u0107 tekstu &#8211; na ma\u0142ych ekranach zbyt du\u017co tekstu mo\u017ce by\u0107 nieczytelne<\/li><\/ol><div class=\"cc-alert cc-alert-error\"><div class=\"cc-alert-title\">B\u0142\u0105d<\/div><div class=\"cc-alert-content\">Je\u015bli napotykasz nierozwi\u0105zywalne problemy z modu\u0142em, upewnij si\u0119, \u017ce korzystasz z najnowszej wersji oraz \u017ce Tw\u00f3j sklep PrestaShop jest aktualny. W przypadku trudno\u015bci skontaktuj si\u0119 z supportem COCOS poprzez stron\u0119 <a class=\"button\" href=\"https:\/\/cocos.codes\/wsparcie\/\" title=\"Cocos.codes\/wsparcie\">cocos.codes\/wsparcie<\/a>.<\/div><\/div><h6><br \/>14. FAQ<\/h6><strong>Czy mog\u0119 mie\u0107 wi\u0119cej ni\u017c jeden baner w tym samym miejscu (hooku)?<\/strong><br \/>Tak, modu\u0142 umo\u017cliwia przypisanie wielu baner\u00f3w do tego samego hooka. Banery b\u0119d\u0105 wy\u015bwietlane wed\u0142ug ustawionej pozycji (od najni\u017cszej do najwy\u017cszej warto\u015bci).<br \/><br \/><strong>Czy mog\u0119 u\u017cy\u0107 tego samego banera w r\u00f3\u017cnych miejscach sklepu?<\/strong><br \/>Aktualnie jeden baner mo\u017ce by\u0107 przypisany tylko do jednego hooka. Je\u015bli chcesz wy\u015bwietli\u0107 ten sam baner w r\u00f3\u017cnych miejscach, musisz utworzy\u0107 jego kopi\u0119 i przypisa\u0107 j\u0105 do innego hooka.<br \/><br \/><strong>Jak du\u017ce pliki wideo mog\u0119 wgra\u0107?<\/strong><br \/>Modu\u0142 pozwala na wgranie plik\u00f3w wideo o maksymalnym rozmiarze 50MB. Dla optymalnej wydajno\u015bci zalecamy jednak kompresj\u0119 wideo do niezb\u0119dnego minimum i wykorzystanie formatu MP4 z kodekiem H.264.<br \/><br \/><strong>Czy banery s\u0105 responsywne?<\/strong><br \/>Tak, banery dostosowuj\u0105 si\u0119 do szeroko\u015bci kontenera, w kt\u00f3rym s\u0105 wy\u015bwietlane. Aby zapewni\u0107 pe\u0142n\u0105 responsywno\u015b\u0107, zalecamy ustawienie szeroko\u015bci na 100% oraz odpowiedniej wysoko\u015bci (mo\u017cesz u\u017cy\u0107 jednostek vh dla wysoko\u015bci zale\u017cnej od wysoko\u015bci ekranu).<br \/><br \/><strong>Czy mog\u0119 osadzi\u0107 formularz w banerze?<\/strong><br \/>Modu\u0142 w standardowej wersji nie obs\u0142uguje bezpo\u015brednio formularzy. Je\u015bli potrzebujesz umie\u015bci\u0107 formularz w banerze, mo\u017cesz u\u017cy\u0107 niestandardowego kodu HTML w polach tekstowych, ale funkcjonalno\u015b\u0107 formularza b\u0119dzie zale\u017ce\u0107 od szablonu Twojego sklepu.<br \/><br \/><strong>Jak cz\u0119sto aktualizowany jest modu\u0142?<\/strong><br \/>Modu\u0142 jest regularnie aktualizowany, aby zapewni\u0107 zgodno\u015b\u0107 z najnowszymi wersjami PrestaShop oraz wprowadza\u0107 nowe funkcje. Posiadacze wa\u017cnej licencji maj\u0105 dost\u0119p do wszystkich aktualizacji.<br \/><br \/><strong>Czy mog\u0119 przenie\u015b\u0107 licencj\u0119 na inny sklep?<\/strong><br \/>Licencja jest przypisana do jednej domeny. W przypadku zmiany domeny sklepu nale\u017cy skontaktowa\u0107 si\u0119 z supportem COCOS w celu przeniesienia licencji.<br \/><br \/><strong>Czy modu\u0142 wp\u0142ywa na wydajno\u015b\u0107 sklepu?<\/strong><br \/>Modu\u0142 zosta\u0142 zoptymalizowany pod k\u0105tem wydajno\u015bci. Najwi\u0119kszy wp\u0142yw na szybko\u015b\u0107 \u0142adowania mog\u0105 mie\u0107 du\u017ce pliki wideo lub zdj\u0119cia. Zalecamy optymalizacj\u0119 plik\u00f3w multimedialnych przed ich wykorzystaniem w banerach.","protected":false},"excerpt":{"rendered":"Dokumentacja Presta Shop Banner Kompleksowa dokumentacja dla modu\u0142u zarz\u0105dzania banerami dla Presta Shop (cc_ps_banner) z bogatymi opcjami konfiguracji i gotowymi szablonami. Spis tre\u015bci Wprowadzenie Instalacja Aktywacja licencji Panel zarz\u0105dzania Zarz\u0105dzanie","protected":false},"author":1,"featured_media":3987,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"powered_cache_disable_cache":false,"powered_cache_disable_css_optimization":false,"powered_cache_disable_js_optimization":false,"footnotes":""},"categories":[236],"tags":[249,197,250,143,251],"class_list":["post-3981","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-dokumentacje-prestashop","tag-banner","tag-dokumentacja","tag-modul","tag-prestashop","tag-reklama"],"_links":{"self":[{"href":"https:\/\/cocos.codes\/pl\/wp-json\/wp\/v2\/posts\/3981","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/cocos.codes\/pl\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cocos.codes\/pl\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cocos.codes\/pl\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/cocos.codes\/pl\/wp-json\/wp\/v2\/comments?post=3981"}],"version-history":[{"count":0,"href":"https:\/\/cocos.codes\/pl\/wp-json\/wp\/v2\/posts\/3981\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cocos.codes\/pl\/wp-json\/wp\/v2\/media\/3987"}],"wp:attachment":[{"href":"https:\/\/cocos.codes\/pl\/wp-json\/wp\/v2\/media?parent=3981"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cocos.codes\/pl\/wp-json\/wp\/v2\/categories?post=3981"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cocos.codes\/pl\/wp-json\/wp\/v2\/tags?post=3981"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}