Einführung:
Prestashop Custom CSS und JS-Modul ist ein einfaches Modul, mit dem Sie die Seiten individuell gestalten können. Das Modul ermöglicht den Seitenbesitzern, CSS und JS der Website mit weiteren Funktionen zu versehen. Zum Bearbeiten der vorhandenen Codedateien benötigen Sie keinen FTP-Zugriff. Das Addon hilft Ihnen, den CSS- und JS-Code über das Admin-Panel hinzuzufügen. Das Modul hilft dabei, die Abhängigkeit vom Entwickler zu beseitigen, um kleine benutzerdefinierte Änderungen vorzunehmen, und Sie können dies einfach selbst durchführen, indem Sie das Backend-Panel des Moduls verwenden. Das Prestashop Custom CSS & JS-Modul ermöglicht es dem Prestashop-Shop-Administrator, die Benutzeroberfläche einer beliebigen Seite der Prestashop-Website zu ändern. Das Prestashop-Plugin bietet dem Administrator an, das Gleiche für mobile Geräte oder Desktops oder beides zu tun.
Schritte für die Installation von Prestashop Custom JS und CSS Erweiterung:
Um dieses benutzerdefinierte CSS und JS Prestashop Plugin-Addon zu installieren, folgen Sie bitte den folgenden Schritten: 1. Fügen Sie den Addon-Ordner unter Module-Ordner Ihres Systems hinzu. 2. Nach dem Hinzufügen dieses Addon-Ordners zeigt das System das Prestashop-Addon auf der Modulseite unter der Front-Office-Feature-Kategorie wie folgt an:
3. Klicken Sie auf Installieren, um das Prestashop Custom JS- und CSS-Plugin zu installieren.
Admin-Schnittstelle
Folgende Funktionen werden dem Admin in diesem benutzerdefinierten CSS Prestashop-Modul zur Verfügung gestellt: 1. Allgemeine Einstellungen 2. Erweiterte Einstellungen
Allgemeine Einstellungen des benutzerdefinierten JS Prestashop-Moduls:
Nach dem Klicken auf den Link zum Konfigurieren des Custom JS- und CSS-Addons auf der Moduleintragseite öffnet das System standardmäßig die Registerkarten mit den allgemeinen Einstellungen, wie im folgenden Bildschirm gezeigt:
Die aufgeführten Felder werden mit einigen Standardwerten gefüllt
ALLGEMEINE EINSTELLUNGEN TAB DETAILS:
1. Aktivieren deaktivieren: Anfangs ist dieses Feld des benutzerdefinierten CSS-Prestashop-Moduls deaktiviert. Der Administrator kann die Addon-Funktionalität aktivieren / deaktivieren, indem er diese ein- / ausschaltet.
2. Benutzerdefinierte CSS: Der CSS-Inhalt, der auf jeder Seite der Website angezeigt werden muss, muss im Textbereich des benutzerdefinierten CSS- und JS-Prestashop-Plugins eingegeben werden, das mit dem Feld Benutzerdefiniertes CSS angegeben wird.
3. Benutzerdefiniertes JS: Der JS-Inhalt, der auf jeder Seite der Website angezeigt werden muss, muss in den Textbereich des benutzerdefinierten JS Prestashop-Moduls eingegeben werden, das mit dem Feld Custom JS angegeben ist.
Erweiterte Einstellungen des benutzerdefinierten CSS- und JS-Prestashop-Plugins:
Nach dem Klicken auf die Registerkarte Erweiterte Einstellungen des benutzerdefinierten CSS- und JS Prestashop-Plugins wird der folgende Bildschirm angezeigt.
VORAUS EINSTELLUNGEN TAB DETAILS:
- Neuen Eintrag hinzufügen: Zu Beginn wird kein Eintrag in der Registerkarte "Erweitert" des Prestashop Custom JS-Moduls angezeigt. Klicken Sie also auf den neuen Eintrag, um die Details der CSS- und JS-Datei mit dem Seitennamen und dem Gerätetyp hinzuzufügen.
- Tabelle: Wenn die Eingabe abgeschlossen ist, wird die Zeile der Tabelle des benutzerdefinierten Prestashop-CSS-Moduls mit Details zum Eintrag hinzugefügt, z. B. Seitenname, Gerätetyp, Schaltfläche zum Aktivieren oder Deaktivieren und Schaltfläche zum Bearbeiten und Löschen.
- Schaltfläche Aktivieren oder Deaktivieren: Wenn die Eingabe im benutzerdefinierten CSS Prestashop-Modul erfolgt ist, kann der Benutzer die hinzugefügte Datei aktivieren, indem er einmal auf die Schaltfläche "Aktivieren" klickt, die auf die Schaltfläche "Deaktivieren" wechselt, nachdem der Benutzer auf die Schaltfläche "Aktivieren" geklickt hat auf der Sperrtaste, die in der Tabelle erscheint und das Gegenteil passiert.
- Bearbeiten: In der Aktionsspalte der Tabelle befindet sich die Bearbeitungsschaltfläche, wenn Sie darauf klicken. Es erscheint ein Popup-Fenster, das genauso aussieht wie das, das erscheint, nachdem wir auf die Schaltfläche zum Hinzufügen eines neuen Eintrags geklickt haben. Der Unterschied besteht nun darin, dass die Felder des benutzerdefinierten JS PrestaShop-Moduls nun mit allen Details gefüllt sind, die der Benutzer zuvor in dieser Zeile eingegeben hat. Jetzt kann der Benutzer die Einträge des benutzerdefinierten CSS- und JS-Prestashop-Plugins bearbeiten, die in den Dateien vorgenommen wurden, oder den Gerätetyp ändern oder den Eintrag zum Seitennamen hinzufügen.
- Löschen: In der Aktionsspalte der Tabelle gibt es eine Schaltfläche zum Löschen, wenn Sie auf diese Schaltfläche des Prestashop Custom JS-Moduls klicken. Wir können den Eintrag löschen, der in dieser Zeile gemacht wurde.
- Schnittstellenbox: Dies ist das Feld, das nach dem Klicken auf die Schaltfläche "Hinzufügen" erscheint, wenn wir einen neuen Eintrag zu der Tabelle der erweiterten Einstellungen hinzufügen müssen. Es wird auch erscheinen, wenn wir auf die Bearbeitungsschaltfläche klicken, nachdem die Eingabe abgeschlossen ist, aber der Unterschied besteht darin, dass die Felder in der Popup-Box jetzt ein Feld mit den Details der bestimmten Zeile sind, zu der die Bearbeitungsschaltfläche gehört. Felder in der Popup-Box sind:
A. Wählen Sie die Seitenauswahl aus: Das erste Feld des Feldes "Neu hinzufügen" ist ein Dropdown-Menü, das alle Namen der Seiten enthält, die derzeit in Prestashop verfügbar sind. Sie können die Seite auswählen, auf der der Eintrag erfolgen soll.
B. Wählen Sie Gerätetyp: Dieses Feld von Prestashop Custom CSS enthält drei Optionsfelder Mobile, Desktop und beides. Sie können den Gerätetyp auswählen, für den Sie css und js hinzufügen möchten.
C. CSS-Konfiguration: In diesem Textbereich des Prestashop-Plugins von Knowband müssen Sie den CSS-Code hinzufügen, der auf der Seite hinzugefügt werden soll, die Sie zuvor ausgewählt haben.
D. JS-Konfiguration: In diesem Textbereich des benutzerdefinierten CSS Prestashop-Moduls müssen Sie den js-Code hinzufügen, der auf der Seite hinzugefügt werden soll, die Sie zuvor ausgewählt haben.
SCHNITTSTELLE NACH DEM ANKLICKEN NEUEN EINTRAG HINZUFÜGEN
NACH dem Hinzufügen des Eintrags
SCHNITTSTELLE NACH DEM ANKLICKEN DER EDIT-TASTE
Front-End-Modul
Nachdem das Prestashop Custom JS-Plugin von Knowband aktiviert wurde, sieht der Front-End-Benutzer die CSS und JS, die global zur Website hinzugefügt wurden, und der Benutzer sieht auch die CSS und JS, die nur in den erweiterten Einstellungen zu dieser bestimmten Seite hinzugefügt werden Tab.
Die CUSTOM-CSS und JS am Front-End sieht wie folgt aus:
Empfehlungen
Aktualisieren Sie die Startseite Ihres Shops jedes Mal, wenn Sie das Plug-in aktivieren / deaktivieren. Wenn das Plugin nach der Installation nicht funktioniert, überprüfen Sie bitte die Berechtigungen für den Modulordner. Der Ordner sollte beschreibbar sein. Bitte machen Sie die Ordnerberechtigung für 755.
Wir hoffen, dass wir alle Bedenken bezüglich des Installations- und Produktleitfadens dazu geäußert haben Prestashop-Zusatz. Sie sollten auch unseren Blog "Geben Sie mehreren Gründen an Ihre Kunden, um ihren Online-Zahlungsvorgang abzuschließen" Hier
Sehen Sie sich das Video Tutorial hier an:
Modul Link: https://www.knowband.com/prestashop-custom-css-and-js
Benutzerhandbuch: https://www.knowband.com/blog/user-manual/prestashop-custom-js-and-css/
Admin-Demo: https://ps.knowband.com/demo1/16/admin1/index.php?controller=AdminLogin&token=aea1bb3fb1bab860c86c4db00ce5949e&redirect=AdminModules&demo_lang=en
Frontdemo: https://ps.knowband.com/demo1/16/en/
Kaufe dieses Addon jetzt >> Knowband – Benutzerdefinierte CSS und JS – PrestaShop Addons