Wstęp:
Niestandardowy moduł CSS i JS Prestashop to prosty moduł, który pozwala na indywidualny styl stron. Moduł pozwala właścicielom witryn dodawać więcej funkcji do CSS i JS witryny. Nie potrzebujesz żadnego dostępu FTP, aby edytować istniejące pliki kodu. Dodatek pomaga dodać kod CSS i JS z panelu administracyjnego. Moduł pomaga w wyeliminowaniu zależności od programisty w zakresie dokonywania drobnych niestandardowych zmian i można to zrobić po prostu używając panelu zaplecza modułu. The Prestashop Custom CSS & JS module umożliwia administratorowi sklepu Prestashop zmianę interfejsu użytkownika dowolnej strony witryny Prestashop. Wtyczka Prestashop oferuje administratorowi to samo dla urządzeń mobilnych i komputerów stacjonarnych lub obu.
Kroki instalacji Prestashop Custom JS and CSS Dodatek:
Aby zainstalować ten niestandardowy dodatek wtyczek CSS i JS Prestashop, wykonaj następujące kroki: 1. Dodaj dodatkowy folder w folderze modules twojego systemu. 2. Po dodaniu tego folderu addon, system wyświetli listę dodatków do Prestashop na stronie modułu w kategorii funkcji front office, jak podano poniżej:
3. Kliknij przycisk instalacji, aby zainstalować wtyczkę Prestashop Custom JS i CSS.
Interfejs administracyjny
Następujące funkcje zostaną dostarczone administratorowi w tym niestandardowym module Prestashop CSS: 1. Ustawienia ogólne 2. Ustawienia zaawansowane
Ustawienia ogólne niestandardowego modułu JS Prestashop:
Po kliknięciu na link konfiguracji niestandardowego dodatku JS i CSS na stronie z listą modułów, system otworzy zakładki ustawień ogólnych domyślnie, jak pokazano na ekranie poniżej:
Wymienione pola zostaną wypełnione pewnymi wartościami domyślnymi
USTAWIENIA OGÓLNE DANE TABELI:
1. Włącz / wyłącz: Początkowo to pole niestandardowego modułu CSS Prestashop będzie wyłączone. Administrator może włączyć / wyłączyć funkcję addon, włączając to ON / OFF.
2. Niestandardowe CSS: Treść CSS, która musi być wyświetlana na każdej stronie witryny, musi zostać wpisana w polu tekstowym niestandardowej wtyczki CSS i JS Prestashop, podanej w polu o nazwie Custom CSS.
3. Niestandardowy JS: Zawartość JS, która musi być wyświetlana na każdej stronie witryny, musi zostać wprowadzona w polu tekstowym niestandardowego modułu JS Prestashop, podanego w polu o nazwie Custom JS.
Ustawienia zaawansowane niestandardowej wtyczki CSS i JS Prestashop:
Po kliknięciu na kartę ustawień zaawansowanych niestandardowej wtyczki CSS i JS Prestashop pojawi się poniższy ekran.
USTAWIENIA ADVANCE TAB SZCZEGÓŁY:
- Dodaj nowy wpis: Początkowo nie będzie żadnych wpisów w tabeli z wyprzedzeniem w module Prestashop Custom JS, więc kliknij przycisk nowego wpisu, aby dodać szczegóły pliku CSS i JS z nazwą strony i typem urządzenia.
- tabela: Po zakończeniu wpisu wiersz jest dodawany do tabeli niestandardowego modułu CSS Prestashop wraz ze szczegółami wpisu, takimi jak nazwa przycisku włączania i wyłączania typu nazwy strony oraz przycisk edycji i usuwania.
- Włącz lub wyłącz przycisk: Gdy wpis zostanie wykonany w niestandardowym module Prestashop CSS, użytkownik może włączyć dodany plik klikając przycisk włączania, który zmienia się w przycisk wyłączania po kliknięciu przycisku włączania, teraz użytkownik może wyłączyć wpis, klikając na przycisku wyłączania, który pojawia się w tabeli i dzieje się odwrotnie.
- Edytuj: W kolumnie akcji tabeli znajduje się przycisk edycji, po kliknięciu pojawia się wyskakujące okienko, które jest takie samo jak to, które pojawia się po kliknięciu przycisku Dodaj nowy wpis. Różnica polega na tym, że teraz pola niestandardowego modułu JS Prestashop są wypełnione wszystkimi szczegółami, które zostały wprowadzone wcześniej przez użytkownika w tym wierszu. Teraz użytkownik może edytować wpisy niestandardowej wtyczki CSS i JS Prestashop, które zostały wykonane w plikach lub może zmienić typ urządzenia lub może dodać wpis do nazwy strony.
- Kasować : W kolumnie akcji tabeli znajduje się przycisk usuwania po kliknięciu tego przycisku modułu niestandardowego JS Prestashop, możemy usunąć wpis, który został wykonany w tym wierszu.
- Skrzynka interfejsu: To jest okno, które pojawi się po kliknięciu przycisku Dodaj nowy, jeśli musimy dodać nowy wpis do tabeli ustawień zaawansowanych. Pojawi się również, jeśli klikniemy przycisk edycji po wpisie, ale różnica polega na tym, że teraz pola w polu "do góry" będą polami zawierającymi szczegóły tego konkretnego wiersza, do którego należy przycisk edycji. Pola w oknie podręcznym to:
A. Wybierz rozwijane strony: Pierwsze pole w polu "Dodaj nowy" jest rozwijanym menu, które ma wszystkie nazwy stron, które są obecnie dostępne w Prestashop. Możesz wybrać stronę, na której chcesz dokonać wpisu.
B. Wybierz typ urządzenia: To pole niestandardowego CSS w Prestashop zawiera trzy przyciski opcji: Telefon komórkowy, Komputer i oba. Możesz wybrać typ urządzenia, do którego chcesz dodać css i js.
C. Konfiguracja CSS: W tym obszarze tekstowym wtyczki Prestashop firmy Knowband musisz dodać kod css, który musi zostać dodany na stronie, którą wybrałeś wcześniej.
D. Konfiguracja JS: W tym obszarze tekstowym niestandardowego modułu CSS Prestashop musisz dodać kod js, który musi zostać dodany na stronie, którą wybrałeś wcześniej.
INTERFEJS PO KLIKNIĘCIU NA DODANIE NOWEGO WPISU
PO DODAWANIU WEJŚCIA
INTERFEJS PO KLIKNIĘCIU PRZYCISKU EDIT
Moduł czołowy
Po włączeniu wtyczki Prestashop Custom JS przez Knowband, użytkownik frontonu zobaczy CSS i JS, które są dodawane globalnie do strony internetowej, a użytkownik zobaczy także CSS i JS, które są dodawane do tej konkretnej strony tylko w ustawieniach zaawansowanych patka.
CUSTOM CSS i JS w interfejsie użytkownika wyglądają następująco:
Zalecenia
Odśwież stronę główną swojego sklepu za każdym razem, gdy włączysz lub wyłączysz wtyczkę. Jeśli wtyczka nie działa po instalacji, sprawdź uprawnienia do folderu modułów. Folder powinien być zapisywalny. Proszę nadać folderowi uprawnienia do 755.
Mamy nadzieję, że omawialiśmy wszystkie obawy dotyczące instalacji i przewodnik po produkcie Prestashop Addon. Powinieneś również sprawdzić na naszym blogu "Podaj wiele powodów swoim klientom do wypełnienia procesu płatności online" Tutaj
Obejrzyj samouczek wideo tutaj:
Link modułu: https://www.knowband.com/prestashop-custom-css-and-js
Instrukcja obsługi: https://www.knowband.com/blog/user-manual/prestashop-custom-js-and-css/
Demonstracja administratora: https://ps.knowband.com/demo1/16/admin1/index.php?controller=AdminLogin&token=aea1bb3fb1bab860c86c4db00ce5949e&redirect=AdminModules&demo_lang=en
Frontowe demo: https://ps.knowband.com/demo1/16/en/
Kup ten dodatek teraz >> Knowband – Custom CSS i JS – PrestaShop Addons