Floating Sidebar / Jumpin Sidebar (JTL-Shop 5)

Owned by Kristian Stantschew (Unlicensed)
Last updated: Nov 21, 2022 by Sebastian Meyer
3 min read

Einleitung

Das Plugin integriert in Ihren JTL-Shop eine anpassbare Seitenleiste für bis zu 5 Menüpunkte.

Features

  • Bis zu 5 Menüpunkte

  • Stufenlose Einstellungen der Anzeigeposition und Breite

  • Wählbare Farben für die Seitenleiste und den Hover-Effekt

  • Anpassbare Icons, -Texte und -Links

  • Anpassbare Hintergründe, Icons, Rahmen und Borderradius für jedes Tab einzeln möglich

Installation / Update

Systemvoraussetzungen

JTL-Shop 5.00rc-3 und dessen Voraussetzungen

Plugin-Installation

Die Installation des Plugins erfolgt nach JTL-Standard, wie es hier beschrieben ist oder sie können Ihre vorhandene ZIP-Datei des Plugins auch über den Reiter “Upload“ in der Pluginverwaltung bereitstellen und anschliessend im Reiter “Vorhanden“ die Installation starten.

Plugin-Update

Bei einem Update auf eine neuere Version können Sie der allgemeinen Installation folgen mit dem Unterschied, dass Sie direkt in der Pluginverwaltung den Update-Button zur Aktualisierung betätigen müssen.

Konfiguration

Shop

Um das Plugin für den Einsatz zu konfigurieren, klicken Sie in der Pluginverwaltung auf das Zahnrad-Symbol und passen die voreingestellten Werte für Anzeige und Tab-Menüpunkte an:

Anzeigeposition: Geben Sie hier die Position in Prozent vom oberen Seitenrand ein. (z.B. 35 für 35%)

Anzeigebreite: Geben Sie die gewünschte Breite der Tabs ein, wie weit diese in die Seite hineinspringen sollen. Eine Mindestbreite von ca. 60px setzt das Plugin automatisch, allerdings ist eine deutlich höhere Breite empfohlen. Richten Sie sich an dem längsten darzustellenden Text. (z.B. 220 für 220px)

Individuelles Styling: Aktivieren Sie das individuelle Styling oder die Standards. Wenn aktiv, werden fehlende Farben/Hover/Radien für jedes Tab separat mit den Standards aufgefüllt. Wenn nicht, werden für alle Tabs die Standards benutzt und etwaige individuelle Farben/Hover/Radien verworfen.

Farbe/Hintergrund/Rahmen: Geben Sie eine Farbe als validen CSS-Wert ein, z.B. in hexadezimaler Schreibweise (z.B. #b512c8).

Farbe/Hintergrund/Rahmen für Hover: Geben Sie eine Hover-Effekt-Farbe als validen CSS-Wert ein, z.B. in hexadezimaler Schreibweise (z.B. #b512c8).

Für jeden der 5 Menüpunkte sind weiterhin folgende Elemente anpassbar:

Aktiv: Aktivieren Sie hier das Tab mit “Ja“. Bei “Nein“ wird das Tab nicht angezeigt.

Icon: Sie können aus einem Dropdown das gewünschte Icon auswählen. Es werden alle vom JTL-Shop unterstützen Font Awesome Icons angezeigt.

Text: Geben Sie hier den Linktext an, der angezeigt werden soll.

Anzeigeziel: Wählen Sie hier “neues Fenster“ aus, damit der Link in einem neuen Tab geöffnet wird.

URL: Geben Sie hier eine voll qualifizierte externe Webadresse an oder eine lokale Unterseite zu Ihrem Shop.
(z.B. “https://de-de.facebook.com/”, “/Mein-Konto” oder “warenkorb.php“)

Betrieb

Shop

Die Sidebar ist “responsive“ und verändert ihr Verhalten bei kleineren Bildschirmen. Auf Mobiltelefonen ist diese inaktiv. Im laufenden Betrieb sind sonst keine weiteren Aktionen notwendig.

Individualisierung

Templates

Das Template der Sidebar kann geändert werden, indem Sie die Datei “frontend/templates/jumpin-sidebar.tpl“ an Ihre Bedüfnisse anpassen.

Troubleshooting

Logs prüfen

Um herauszufinden, wo ein Problem liegt, helfen Ihnen und uns die Logs. Je nach Fehlerbild ist eines der folgenden 3 Logs dafür mehr oder weniger relevant.

Browser-Log

Das Browser-Log ist meist relevant, wenn irgendwas im Frontend des Shops sich merkwürdig verhält oder nicht reagiert. (Beispiel: Sie klicken einen Button und augenscheinlich passiert gar nichts.)

Das Browser-Log sehen Sie, wenn Sie im Browser F12 drücken und dort dann auf Konsole (oder Console) wechseln.

Shop-Log

Das Shop-Log ist immer dann interessant, wenn im Frontend unerwartete Fehlermeldungen ausgegeben werden oder das Plugin zwar auf Eingaben im Frontend reagiert, aber nicht das Ergebnis liefert, was erwartet wurde. Manchmal ergibt sich auch durch das Browser-Log, dass die Informationen eher im Shop-Log zu suchen sind.

Das Shop-Log finden Sie im JTL-Adminbereich unter System → Wartung → Log.

Das JTL-Log arbeitet mit Log-Levels, um nicht die Datenbank unbegrenzt mit Logdaten zu befüllen. Im Umkehrschluss heißt das, dass Sie Logmeldungen aber auch erst dann sehen, wenn diese nach der Änderung des Loglevels erzeugt worden sind.
Das Plugin loggt außer kritischer Fehler fast ausschließlich im Debug-Log-Level. Wenn also etwas nicht klappt, sollten Sie zunächst das Debug-Loglevel aktivieren, dann eine Testbestellung durchführen, dann das Debug-Loglevel wieder deaktivieren und die zwischenzeitlich geloggten Meldungen zurate ziehen.

Das Plugin verwendet diese Log-Funktion nicht.

Webserver-Log

Das Webserver-Log wird dann relevant, wenn Sie irgendwo auf einen Error 500 (= weiße Seite) stoßen.

Das Webserver-Log kann Ihnen Ihr Hoster zur Verfügung stellen.

In der Standardkonfiguration loggt der JTL-Shop überhaupt nichts in das Webserverlog, nicht mal kritische Fehler wie einen Error 500.

Damit der Shop diese Fehler loggt, müssen in der /includes/config.JTL-Shop.ini.php die einzelnen *_LOG_LEVEL Werte von 0 auf E_ERROR geändert werden.

Achtung: Editieren Sie die Config-Datei des Shops nur, wenn Sie wissen, was Sie tun! Fehlerhafte Anpassungen hier können Ihren Shop unerreichbar oder (verschlüsselte) Daten unbrauchbar machen. Im Zweifelsfall sollten Sie Ihren Hoster oder Servicepartner um Hilfe fragen.

Changelog

v1.0.4 (November 2022)

  • Bugfix: Debugmeldung entfernt

v1.0.3 (September 2022)

  • Code-Refactoring

  • Verbesserung: Leeren des Shop-Caches bei Installation (JTL-Shop leert den Cache ggf. nicht automatisch bei Installationen aus dem Extension Store)

  • Bugfix: PHP-Warnung wird bei individuell gestylten Tabs erzeugt

v1.0.2 (März 2021)

  • Stufenlose Positionierung der Sidebar über Anzeigeposition in %. 

  • Präzise einstellbare Anzeigebreite in px. (Versatz wird automatisch berechnet)

  • Standard Farben/Hover/Radien oder Individuelles Styling für jedes Tab separat.

  • Aktivierung, Font Awesome Icon, Text Anzeigeziel, URL

  • Hintergrund, Icon, Rahmen Normal sowie für Hover und Borderradius

v1.0.1 (März 2021)

  • Dropdown zur Auswahl aus einer Liste vom JTL-Shop unterstützter Font Awesome-Icons

  • Icons sind mit "(regular/solid/brand)" gekennzeichnet

  • Feste Icon Breite in Frontend Anzeige

v1.0.0 (Dezember 2020)

  • Initiales Release

Support und Kontakt

siehe Support und Kontakt