Custom CSS & JavaScript (CSS & JS Code einfach in deinen Shop einfügen)

Inhalt

1. Wozu dient das Plugin "Custom CSS & JavaScript (CSS & JS Code einfach in deinen Shop einfügen)"

Die Themen „Cookies“ und „Consentmanagement“ sind präsenter denn je. Die Nutzer müssen aktiv in sämtliche Anwendungen, die Cookies setzen und nicht für die Funktionalität des Webshops technisch notwendig sind, einwilligen. Darüber hinaus soll(t)en die Nutzer jederzeit und auf jeder Unterseite die Möglichkeit haben, die Cookie-Einstellungen zu öffnen und bei  Bedarf anzupassen.

Mit „Custom CSS & JavaScript“ fügst Du mühelos Dein eigenes CSS zum JTL-Shop hinzu. Das Plugin ermöglicht schnelle CSS-Anpassungen ohne FTP-Upload und Server-Operationen.

2. Was kann das Plugin "Custom CSS & JavaScript (CSS & JS Code einfach in deinen Shop einfügen)"

Das knowmates-Plugin „Custom CSS & JavaScript“ ist exklusiv für das Shopsystem JTL-Shop entwickelt.

Mit dem Plugin fügst Du benutzerdefiniertes CSS für den gesamten Webshop, für einzelne Beiträge, Seiten oder Abschnitte hinzu oder überschreibst bestehendes CSS. Aus Performance- Gründen und anstatt einfaches CSS auf der Seite zu rendern, wird eine statische Datei generiert, die zum Zweck der Aktualisierung versioniert wird. Das verhindert Caching-Probleme und sorgt für Änderungen just in time. Mit nur zwei Mausklicks aktivierst oder deaktivierst Du Deine Änderungen.

Du fügst über das Shop-Backend CSS- und JavaScript-Code in Deinen JTL-Shop ein und individualisierst so Deinen Consentmanager. Hinterlege den Titel, den Zweck der Datenspeicherung, einen Beschreibungstext, die verarbeitende Firma sowie die Nutzungsbedingungen bzw. den Datenschutzlink (siehe Abbildung 1 sowie Abbildung 2). Durch die aktive  Einwilligung des Nutzers wird der entsprechend hinterlegte eigene JavaScript-Code an allen definierten Stellen ausgeführt. Die Einstellungen sind in Abhängigkeit von den installierten Sprachen auch mehrsprachig möglich.

Abbildung 1: Deaktivierte individuelle Datenschutz-Einstellungen im JTL-Shop

Abbildung 2: Aktive Einwilligung des Nutzers in individuelle Datenschutz -Einstellungen im JTL-Shop

 

3. Systemvoraussetzungen

  • JTL-Shop 5.2., 5.3
  • PHP 8.1, PHP 8.2
  • Template NOVA
  • ionCube Loader in der aktuellsten Version

4. Installation im JTL-Shop

Für Deinen JTL-Shop 5 beziehst Du Plugins über den JTL-Extension Store. Um auf Inhalte des JTL-Extension Stores zugreifen zu können, musst Du zunächst Dein JTL-Konto mit Deinem JTL-Shop 5 verknüpfen. Dies wird normalerweise beim Installationsprozess des Shops bereits abgefragt.

So verknüpfst Du Dein JTL-Konto mit Deinem JTL-Shop 5:

  1. Logge Dich im JTL-Shop-Backend ein.
  2. Navigiere im Menü zu „PLUGINS“ > „Meine Käufe“.
  3. Klicke auf „Konto verknüpfen“.
  4. Logge Dich mit Deinen JTL-Daten ein.
  5. Anschließend siehst Du in „PLUGINS“ > „Meine Käufe“ die Übersicht zu Deinen Lizenzen und Subscriptions.

So buchst Du eine Extension für JTL-Shop 5:

  1. Rufe den JTL-Extension Store auf.
  2. Suche nach dem gewünschten Plugin.
  3. Wähle das Plugin aus und klicke auf „Jetzt auschecken“.
  4. Klicke im folgenden Fenster auf „Anmelden“ und melde Dich mit Deinem zentralen JTL-Login an.
  5. Klicke im JTL-Checkout auf „Jetzt bestellen“, um die Bestellung abzuschließen.
  6. Rufe Dein JTL-Shop-Backend auf. Unter „PLUGINS“ > „Meine Käufe“ befindet sich jetzt im Bereich „Ungebundene Lizenzen“ Deine eben erworbene Lizenz.
  7. Nun ordnest Du das Plugin Deinem Shop zu. Klicke dafür auf „An diesen Onlineshop“ anbinden.
  8. Anschließend findest Du die Lizenz im Bereich „Gebundene Lizenzen“ und die Schaltfläche „Installieren“ steht zur Verfügung. Nach der Installation kannst Du das Plugin im Menü unter „PLUGINS“ > „Plugin-Manager“ in der Registerkarte „Aktiviert“ konfigurieren.

5. Plugin "Custom CSS & JavaScript (CSS & JS Code einfach in deinen Shop einfügen)" einrichten

Rufe das Konfigurationsmenü entweder unter „Plugin-Manager“ > „Aktiviert“ über das entsprechende Zahnrad-Icon auf der rechten Seite oder direkt über „Installierte Plugins“ > „Custom CSS & JavaScript“ auf.

Du siehst nun die Plugin-Benutzeroberfläche (siehe Abbildung 3).

Abbildung 3: Benutzeroberfläche vom Plugin „Custom CSS & JavaScript“

Oben rechts befindet sich ein Switch, mit welchem Du zwischen dunklem und hellem Design wechselst.

Triff nun die gewünschten Einstellungen für das Plugin „Custom CSS & JavaScript“.

Der Reiter „Einstellungen“ beinhaltet folgende Optionen (siehe Abbildung 4):

Abbildung 4: Reiter „Einstellungen“

  • Plugin-Status: Anzeige im Shop-Frontend aktivieren/deaktivieren

Der Reiter „CSS“ beinhaltet folgende Optionen (siehe Abbildung 5):

Abbildung 5: Reiter „CSS“

In diesem Reiter ist es möglich, den CSS-Code individuell zu bearbeiten.

Abbildung 6: Reiter „Datenschutz“

  • Neuer Datenschutz-Abschnitt: Neuen Datenschutz-Abschnitt hinzufügen

Abbildung 7: Reiter „Datenschutz“ – Neuen Datenschutz-Abschnitt hinzufügen

  • Aktiv (aus/an): Wenn aktiv, wird die Zustimmung zu diesem Block erbeten.
  • Verarbeitende Firma: Name der Firma, die die Daten verarbeitet
  • Einstellungen für die Sprache : Deutsch: Dieser Bereich wird automatisch um jede im JTL-Shop angelegte Sprache erweitert.
  • Datenschutzlink: URL zur Datenschutzerklärung der verarbeitenden Firma
  • Titel: Kurzbezeichnung für die Datenschutzeinstellung (griffige Namen wie z. B. „YouTube“, „duden.de“, „Post“ o. Ä. empfehlenswert)
  • Beschreibung: Beschreibungstext über die Datennutzung
  • Zweck der Datenspeicherung: Text zur Notwendigkeit der Datenspeicherung

Der Reiter „Javascript“ beinhaltet folgende Optionen (siehe Abbildung 8):

Abbildung 8: Reiter „Javascript“

  • Javascript Block hinzufügen: Neuen JavaScript-Block hinzufügen

Abbildung 9: Reiter „Javascript“ – JavaScript-Block hinzufügen

  • Aktiv (aus/an): Wenn aktiv, wird der Code Block ausgewertet.
  • Interne Bezeichnung: Unter diesem Namen findest Du den Code Block wieder.

Abbildung 9-1: Reiter „Javascript“ – Mein JavaScript-Block

  • Rot hinterlegtes Papierkorb-Icon: Über dieses Icon löschst Du den Code Block
  • Button Template Selektor hinzufügen: Über diesen Button bindest du deinen Code an ein oder mehrere Elemente unter Berücksichtigung einiger Parameter

Abbildung 9-2: Reiter „Template Selektor hinzufügen“

  • Rot hinterlegtes Papierkorb-Icon: Über dieses Icon löschst Du den Template Selektor
  • JTL-Seitentyp: Wenn die Einbindung auf bestimmte Seiten beschränkt werden soll, kannst Du hier den entsprechenden Seitentyp wählen.
  • Datenschutz-Einwilligung: Hier wählst Du eine vorher angelegte oder bereits bestehende Datenschutzeinwilligung für Dein Script.
  • Einbindungspunkt: Hier wählst Du aus, an welcher Stelle im Code der Webseite Dein Javascript-code eingbunden werden soll. ACHTUNG: Wenn der Einbindungspunkt/Selektor im Kopfbereich(„head“) liegt, wird die Datenschutzeinwilligung nicht funktionieren.
  • Selektortyp: Wähle aus, auf welche Weise der Code hinzugefügt wird.

Abbildung 9-3: Reiter „Javascript“ – CSS-Selektor

  • Button weiteren Javascript-Code hinzufügen: öffnet ein Popup, in dem sprachabhängig Javascript-Code geschrieben werden kann.
  • Sprache auswählen: Wenn Dein Code nur bei einer bestimmten Sprache ausgeführt werden soll, kannst Du das hier einstellen.

Abbildung 9-3-1: Reiter „Javascript“ – Sprache auswählen

Nach dem Anlegen eines JavaScript-Blocks hast Du die Möglichkeit, diesem weiteres JavaScript mittels eines anderen/desselben Selektors hinzuzufügen (Button + JavaScript hinzufügen).

Anwendungsbeispiel: Zur Einbindung einer API muss ein Script eingebunden werden (erstes JavaScript auf allen Seiten einbinden). Auf der Artikelseite wird JavaScript-Code für ein bestimmtes Element eingebunden (zweites JavaScript). Beide Script-Teile können unterschiedliche oder denselben Consent benötigen.

Auch wäre es möglich, bestimmte Zustimmungsstufen zu definieren und in Abhängigkeit davon nur bestimmte Teile von Code zu platzieren.

Der Reiter „Lizenz“ beinhaltet folgende Optionen (siehe Abbildungen 10 & 11):

Abbildung 10: Reiter „Lizenz“ – keine gültige Lizenz vorhanden

  • Lizenz abfragen: Beim Kauf wird für die angegebene Domain eine Lizenz auf dem Lizenz-Server angelegt. Über den Button wird auf diesem geprüft, ob für Deine Domain eine Lizenz des Plugins vorliegt, und welche Art von Lizenz es ist.
  • Plugin für 14 Tage testen: Fordere eine Testphase von 14 Tagen an. Nach diesen 14 Tagen läuft die Test-Lizenz ab.
  • Lizenz kaufen: Eine vollwertige Lizenz über 12 Monate ist im JTL-Extension Store zu erwerben. Hier kannst Du Deine Lizenz auch um 12 oder 24 Monate verlängern.

Abbildung 11: Reiter „Lizenz“ – gültige Lizenz vorhanden

  • Lizenz abfragen: Beim Kauf wird für die angegebene Domain eine Lizenz auf dem Lizenz-Server angelegt. Über den Button wird auf diesem geprüft, ob für Deine Domain eine Lizenz
    des Plugins vorliegt, und welche Art von Lizenz es ist.
  • Lizenz verlängern: Eine vollwertige Lizenz über 12 Monate ist im JTL-Extension Store zu erwerben. Hier kannst Du Deine Lizenz auch um 12 oder 24 Monate verlängern.

Der Reiter „Über“ beinhaltet folgende Informationen (siehe Abbildung 12):

Abbildung 12: Reiter „Über“ (Versionsnummer exemplarisch)

Im Reiter „Über“ findest Du Informationen zur Plugin-Version, PHP-Version, IonCube-Version, zum Plugin-Autor sowie die (Shop)-Webseite des Autors als auch zwei Buttons, über den Du das Plugin Log leerst bzw. öffnest.