{"id":19027,"date":"2015-02-11T00:00:00","date_gmt":"2015-02-11T00:00:00","guid":{"rendered":"https:\/\/www.knowband.com\/blog\/?p=1382"},"modified":"2026-08-10T09:28:20","modified_gmt":"2026-08-10T09:28:20","slug":"prestashop-custom-js-i-modu%c5%82-css-podr%c4%99cznik-u%c5%bcytkownika","status":"publish","type":"post","link":"https:\/\/www.knowband.com\/blog\/pl\/instrukcja-obslugi\/prestashop-custom-js-i-modu%c5%82-css-podr%c4%99cznik-u%c5%bcytkownika\/","title":{"rendered":"Prestashop Custom JS i modu\u0142 CSS – podr\u0119cznik u\u017cytkownika"},"content":{"rendered":"

Wst\u0119p:<\/h2>\n

Niestandardowy modu\u0142 CSS i JS Prestashop to prosty modu\u0142, kt\u00f3ry pozwala na indywidualny styl stron. Modu\u0142 pozwala w\u0142a\u015bcicielom witryn dodawa\u0107 wi\u0119cej funkcji do CSS i JS witryny. Nie potrzebujesz \u017cadnego dost\u0119pu FTP, aby edytowa\u0107 istniej\u0105ce pliki kodu. Dodatek pomaga doda\u0107 kod CSS i JS z panelu administracyjnego. Modu\u0142 pomaga w wyeliminowaniu zale\u017cno\u015bci od programisty w zakresie dokonywania drobnych niestandardowych zmian i mo\u017cna to zrobi\u0107 po prostu u\u017cywaj\u0105c panelu zaplecza modu\u0142u. The Prestashop Custom CSS & JS module<\/a> umo\u017cliwia administratorowi sklepu Prestashop zmian\u0119 interfejsu u\u017cytkownika dowolnej strony witryny Prestashop. Wtyczka Prestashop oferuje administratorowi to samo dla urz\u0105dze\u0144 mobilnych i komputer\u00f3w stacjonarnych lub obu.<\/p>\n

Kroki instalacji Prestashop Custom JS and CSS<\/a> Dodatek:<\/h2>\n

Aby zainstalowa\u0107 ten niestandardowy dodatek wtyczek CSS i JS Prestashop, wykonaj nast\u0119puj\u0105ce kroki: 1. Dodaj dodatkowy folder w folderze modules twojego systemu. 2. Po dodaniu tego folderu addon, system wy\u015bwietli list\u0119 dodatk\u00f3w do Prestashop na stronie modu\u0142u w kategorii funkcji front office, jak podano poni\u017cej:<\/p>\n

\"Instalacja\"<\/a><\/p>\n

3. Kliknij przycisk instalacji, aby zainstalowa\u0107 wtyczk\u0119 Prestashop Custom JS i CSS.<\/p>\n

Interfejs administracyjny<\/h2>\n

Nast\u0119puj\u0105ce funkcje zostan\u0105 dostarczone administratorowi w tym niestandardowym module Prestashop CSS: 1. Ustawienia og\u00f3lne 2. Ustawienia zaawansowane<\/p>\n

Ustawienia og\u00f3lne niestandardowego modu\u0142u JS Prestashop:<\/h3>\n

Po klikni\u0119ciu na link konfiguracji niestandardowego dodatku JS i CSS na stronie z list\u0105 modu\u0142\u00f3w, system otworzy zak\u0142adki ustawie\u0144 og\u00f3lnych domy\u015blnie, jak pokazano na ekranie poni\u017cej:<\/p>\n

\"Ustawienia<\/a><\/p>\n

Wymienione pola zostan\u0105 wype\u0142nione pewnymi warto\u015bciami domy\u015blnymi<\/p>\n

USTAWIENIA OG\u00d3LNE DANE TABELI:<\/strong><\/p>\n

1. W\u0142\u0105cz \/ wy\u0142\u0105cz:<\/strong> Pocz\u0105tkowo to pole niestandardowego modu\u0142u CSS Prestashop b\u0119dzie wy\u0142\u0105czone. Administrator mo\u017ce w\u0142\u0105czy\u0107 \/ wy\u0142\u0105czy\u0107 funkcj\u0119 addon, w\u0142\u0105czaj\u0105c to ON \/ OFF.
\n2. Niestandardowe CSS:<\/strong> Tre\u015b\u0107 CSS, kt\u00f3ra musi by\u0107 wy\u015bwietlana na ka\u017cdej stronie witryny, musi zosta\u0107 wpisana w polu tekstowym niestandardowej wtyczki CSS i JS Prestashop, podanej w polu o nazwie Custom CSS.
\n3. Niestandardowy JS:<\/strong> Zawarto\u015b\u0107 JS, kt\u00f3ra musi by\u0107 wy\u015bwietlana na ka\u017cdej stronie witryny, musi zosta\u0107 wprowadzona w polu tekstowym niestandardowego modu\u0142u JS Prestashop, podanego w polu o nazwie Custom JS.<\/p>\n

Ustawienia zaawansowane niestandardowej wtyczki CSS i JS Prestashop:<\/h3>\n

Po klikni\u0119ciu na kart\u0119 ustawie\u0144 zaawansowanych niestandardowej wtyczki CSS i JS Prestashop pojawi si\u0119 poni\u017cszy ekran.<\/p>\n

\"Ustawienia<\/a><\/p>\n

USTAWIENIA ADVANCE TAB SZCZEG\u00d3\u0141Y:<\/strong><\/p>\n

    \n
  • Dodaj nowy wpis:<\/strong> Pocz\u0105tkowo nie b\u0119dzie \u017cadnych wpis\u00f3w w tabeli z wyprzedzeniem w module Prestashop Custom JS, wi\u0119c kliknij przycisk nowego wpisu, aby doda\u0107 szczeg\u00f3\u0142y pliku CSS i JS z nazw\u0105 strony i typem urz\u0105dzenia.<\/li>\n
  • tabela:<\/strong> Po zako\u0144czeniu wpisu wiersz jest dodawany do tabeli niestandardowego modu\u0142u CSS Prestashop wraz ze szczeg\u00f3\u0142ami wpisu, takimi jak nazwa przycisku w\u0142\u0105czania i wy\u0142\u0105czania typu nazwy strony oraz przycisk edycji i usuwania.<\/li>\n
  • W\u0142\u0105cz lub wy\u0142\u0105cz przycisk:<\/strong> Gdy wpis zostanie wykonany w niestandardowym module Prestashop CSS, u\u017cytkownik mo\u017ce w\u0142\u0105czy\u0107 dodany plik klikaj\u0105c przycisk w\u0142\u0105czania, kt\u00f3ry zmienia si\u0119 w przycisk wy\u0142\u0105czania po klikni\u0119ciu przycisku w\u0142\u0105czania, teraz u\u017cytkownik mo\u017ce wy\u0142\u0105czy\u0107 wpis, klikaj\u0105c na przycisku wy\u0142\u0105czania, kt\u00f3ry pojawia si\u0119 w tabeli i dzieje si\u0119 odwrotnie.<\/li>\n
  • Edytuj:<\/strong> W kolumnie akcji tabeli znajduje si\u0119 przycisk edycji, po klikni\u0119ciu pojawia si\u0119 wyskakuj\u0105ce okienko, kt\u00f3re jest takie samo jak to, kt\u00f3re pojawia si\u0119 po klikni\u0119ciu przycisku Dodaj nowy wpis. R\u00f3\u017cnica polega na tym, \u017ce teraz pola niestandardowego modu\u0142u JS Prestashop s\u0105 wype\u0142nione wszystkimi szczeg\u00f3\u0142ami, kt\u00f3re zosta\u0142y wprowadzone wcze\u015bniej przez u\u017cytkownika w tym wierszu. Teraz u\u017cytkownik mo\u017ce edytowa\u0107 wpisy niestandardowej wtyczki CSS i JS Prestashop, kt\u00f3re zosta\u0142y wykonane w plikach lub mo\u017ce zmieni\u0107 typ urz\u0105dzenia lub mo\u017ce doda\u0107 wpis do nazwy strony.<\/li>\n
  • Kasowa\u0107 :<\/strong> W kolumnie akcji tabeli znajduje si\u0119 przycisk usuwania po klikni\u0119ciu tego przycisku modu\u0142u niestandardowego JS Prestashop, mo\u017cemy usun\u0105\u0107 wpis, kt\u00f3ry zosta\u0142 wykonany w tym wierszu.<\/li>\n
  • Skrzynka interfejsu:<\/strong> To jest okno, kt\u00f3re pojawi si\u0119 po klikni\u0119ciu przycisku Dodaj nowy, je\u015bli musimy doda\u0107 nowy wpis do tabeli ustawie\u0144 zaawansowanych. Pojawi si\u0119 r\u00f3wnie\u017c, je\u015bli klikniemy przycisk edycji po wpisie, ale r\u00f3\u017cnica polega na tym, \u017ce teraz pola w polu "do g\u00f3ry" b\u0119d\u0105 polami zawieraj\u0105cymi szczeg\u00f3\u0142y tego konkretnego wiersza, do kt\u00f3rego nale\u017cy przycisk edycji. Pola w oknie podr\u0119cznym to:<\/li>\n<\/ul>\n

    A. Wybierz rozwijane strony:<\/strong> Pierwsze pole w polu "Dodaj nowy" jest rozwijanym menu, kt\u00f3re ma wszystkie nazwy stron, kt\u00f3re s\u0105 obecnie dost\u0119pne w Prestashop. Mo\u017cesz wybra\u0107 stron\u0119, na kt\u00f3rej chcesz dokona\u0107 wpisu.
    \nB. Wybierz typ urz\u0105dzenia:<\/strong> To pole niestandardowego CSS w Prestashop zawiera trzy przyciski opcji: Telefon kom\u00f3rkowy, Komputer i oba. Mo\u017cesz wybra\u0107 typ urz\u0105dzenia, do kt\u00f3rego chcesz doda\u0107 css i js.
    \nC. Konfiguracja CSS:<\/strong> W tym obszarze tekstowym wtyczki Prestashop firmy Knowband musisz doda\u0107 kod css, kt\u00f3ry musi zosta\u0107 dodany na stronie, kt\u00f3r\u0105 wybra\u0142e\u015b wcze\u015bniej.
    \nD. Konfiguracja JS:<\/strong> W tym obszarze tekstowym niestandardowego modu\u0142u CSS Prestashop musisz doda\u0107 kod js, kt\u00f3ry musi zosta\u0107 dodany na stronie, kt\u00f3r\u0105 wybra\u0142e\u015b wcze\u015bniej.<\/p>\n

    INTERFEJS PO KLIKNI\u0118CIU NA DODANIE NOWEGO WPISU<\/strong><\/p>\n

    \"POP<\/a><\/p>\n

    PO DODAWANIU WEJ\u015aCIA<\/strong><\/p>\n

    \"PO<\/a><\/p>\n

    INTERFEJS PO KLIKNI\u0118CIU PRZYCISKU EDIT<\/strong><\/p>\n

    \"POP<\/a><\/p>\n

    Modu\u0142 czo\u0142owy<\/h2>\n

    Po w\u0142\u0105czeniu wtyczki Prestashop Custom JS przez Knowband, u\u017cytkownik frontonu zobaczy CSS i JS, kt\u00f3re s\u0105 dodawane globalnie do strony internetowej, a u\u017cytkownik zobaczy tak\u017ce CSS i JS, kt\u00f3re s\u0105 dodawane do tej konkretnej strony tylko w ustawieniach zaawansowanych patka.<\/p>\n

    CUSTOM CSS i JS w interfejsie u\u017cytkownika wygl\u0105daj\u0105 nast\u0119puj\u0105co:<\/p>\n

    \"Modu\u0142<\/a><\/p>\n

    Zalecenia<\/strong><\/p>\n

    Od\u015bwie\u017c stron\u0119 g\u0142\u00f3wn\u0105 swojego sklepu za ka\u017cdym razem, gdy w\u0142\u0105czysz lub wy\u0142\u0105czysz wtyczk\u0119. Je\u015bli wtyczka nie dzia\u0142a po instalacji, sprawd\u017a uprawnienia do folderu modu\u0142\u00f3w. Folder powinien by\u0107 zapisywalny. Prosz\u0119 nada\u0107 folderowi uprawnienia do 755.<\/p>\n

    Mamy nadziej\u0119, \u017ce omawiali\u015bmy wszystkie obawy dotycz\u0105ce instalacji i przewodnik po produkcie Prestashop Addon<\/a>. Powiniene\u015b r\u00f3wnie\u017c sprawdzi\u0107 na naszym blogu "Podaj wiele powod\u00f3w swoim klientom do wype\u0142nienia procesu p\u0142atno\u015bci online" Tutaj<\/strong><\/a><\/p>\n

    Obejrzyj samouczek wideo tutaj:<\/strong><\/p>\n