Offcanvas Plus (Seitlicher Warenkorb, Login, Wunschzettel, Vergleichsliste)

Inhalt

1. Wozu dient das Plugin "Offcanvas Plus (Seitlicher Warenkorb, Login, Wunschzettel, Vergleichsliste)"

Offcan-was? „Offcanvas“ beschreibt eine Technik, bei der Elemente in einer Website bzw. einem Webshop außerhalb des sichtbaren Bereiches liegen und erst z. B. durch einen Klick seitlich eingeblendet werden. Durch diese Funktionalität hebst Du Dich als Webshop-Betreiber von der Konkurrenz ab. Außerdem steht Dir v. a. auf kleinen Endgeräten wesentlich mehr Platz zur Verfügung.

2. Was kann das Plugin "Offcanvas Plus (Seitlicher Warenkorb, Login, Wunschzettel, Vergleichsliste)"

Das knowmates-Plugin „Offcanvas Plus” ist exklusiv für das Shopsystem JTL-Shop entwickelt. Das Plugin bietet Dir die Möglichkeit, den Warenkorb sowie die Menüpunkte „Mein Konto“, „Wunschliste“ und „Vergleichsliste“ mittels Offcanvas-Funktionalität einzubinden.

Der Fokus des Plugins liegt ganz klar auf dem Warenkorb, Hier triffst Du feingranulare Entscheidungen (z. B. Warenkorbsumme im Header ausblenden, Mengenfeld im Warenkorb einblenden, Stückzahl und/oder Stückpreis anzeigen, Reihenfolge der im Warenkorb befindlichen Artikel, Produktbilder oder auch die Couponeingabe) und überlässt damit Deinen Kunden mehr Optionen, Damit sich auch weitere wichtige Menüpunkte wie „Mein Konto“, „Wunschliste“ und „Vergleichsliste“ perfekt ins Gesamtlayout Deines Onlineshops einfügen, besteht auch hierfür eine Offcanvas-Option.

Sowohl in der Desktop-Ansicht als auch auf mobilen Endgeräten sorgst Du somit für eine bessere Nutzerführung und steigerst das Nutzungserlebnis in Deinem Shop (siehe Abbildung 1).

Abbildung 1: Darstellungen des „Offcanvas Plus“-Plugins im Frontend eines JTL-Shops (links Desktop, rechts mobile)

 

3. Systemvoraussetzungen

  • JTL-Shop 5.2.1 (PHP 8.1)
  • 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 "Offcanvas Plus (Seitlicher Warenkorb, Login, Wunschzettel, Vergleichsliste)" einrichten

Rufe das Konfigurationsmenü entweder unter „Plugin-Manager“ > „Aktiviert“ über das entsprechende Zahnrad-Icon auf der rechten Seite oder direkt über „Installierte Plugins“ > „Offcanvas Plus” auf.

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

Abbildung 2: Benutzeroberfläche vom Plugin „Offcanvas Plus“

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 „Offcanvas Plus“.

Der Reiter „Allgemeine Einstellungen” beinhaltet folgende Optionen (siehe Abbildung 3):

Abbildung 3: Reiter „Allgemeine Einstellungen“

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

Optionen für Warenkorb:

  • Offcanvas Warenkorb anzeigen: Einblendung vom Warenkorb am Bildschirmrand
  • Warenkorb öffnen nachdem ein Produkt in den Warenkorb gelegt wurde: Die Standardmeldung des NOVA-Templates wird ausgeblendet. Der Warenkorb öffnet sich automatisch, nachdem ein Produkt hineingelegt wurde.
  • Warenkorbsumme im Header ausblenden: Die Summe der im Warenkorb befindlichen Artikel wird im Warenkorb-Icon im Header nicht angezeigt.
  • Mengenfeld im Warenkorb einblenden: Die Anzahl der Position ist direkt im Warenkorb am Bildschirmrand über „+“- bzw. „-“-Icons steuerbar.
  • Stückzahl anzeigen: Zeigt die Stückzahl als Icon oben links über dem Produktbild an
  • Stückpreis anzeigen: Zeigt den Stückpreis im Warenkorb am Bildschirmrand unter dem Artikelnamen an
  • Sortierung umkehren: Das zuletzt zum Warenkorb hinzugefügte Produkt befindet sich oben.
  • Produktbilder anzeigen: Zeigt das Hauptbild der Artikel im Warenkorb an
  • Couponeingabe anzeigen: Durch diese Einstellung ist bereits im Warenkorb am Bildschirmrand eine Couponeingabe möglich. Voraussetzung dafür ist, dass Coupons in den JTL-Shop-Einstellungen aktiviert sind.

Optionen für Mein Konto, Wunschliste und Vergleichsliste:

  • Mein Konto als Offcanvas anzeigen: Der Menüpunkt „Mein Konto“ (Personen-Icon) ist bei Aktivierung an der gewünschten Bildschirmseite einblendbar.
  • Wunschliste als Offcanvas anzeigen: Der Menüpunkt „Wunschzettel“ (Herz-Icon) ist bei Aktivierung an der gewünschten Bildschirmseite einblendbar.
  • Vergleichsliste als Offcanvas anzeigen: Der Menüpunkt „Vergleichsliste“ (Listen-Icon) ist bei Aktivierung an der gewünschten Bildschirmseite einblendbar.

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

Abbildung 4: Reiter „Erscheinungsbild“

Buttons:

  • Stil des Buttons „Zur Kasse“: Anpassung der Optik des „Zur Kasse”-Buttons im Warenkorb, Die Farben (Primärfarbe, Sekundärfarbe etc.) sind in den Template-Einstellungen oder im CSS festgelegt.
  • Stil des Buttons „Zum Warenkorb“: Anpassung der Optik des „Zum Warenkorb“-, Voraussetzung ist, dass die Einstellung „Button „Zum Warenkorb“ ausblenden“ deaktiviert ist.
  • Stil des Registrierungsbuttons: Anpassung der Optik des „Jetzt registrieren“-Buttons, Voraussetzung ist, dass in „Al/lgemeine Einstellungen“ die Option „Mein Konto als Offcanvas anzeigen“ aktiviert ist.
  • Button „Zum Warenkorb” ausblenden: Anpassung der Optik des „Zum Warenkorb“-Buttons,

Positionen:

  • Positionierung des Warenkorbs: Bestimmt die Position am linken oder rechten Bildschirmrand. Voraussetzung ist, dass in „Allgemeine Einstellungen“ die Option „Offcanvas Warenkorb anzeigen“ aktiviert ist.
  • Positionierung der Vergleichsliste: Bestimmt die Position am linken oder rechten Bildschirmrand. Voraussetzung ist, dass in „Allgemeine Einstellungen“ die Option „Vergleichsliste als Offcanvas anzeigen“ aktiviert ist.
  • Positionierung der Wunschliste: Bestimmt die Position am linken oder rechten Bildschirmrand. Voraussetzung ist, dass in „Allgemeine Einstellungen“ die Option „Wunschliste als Offcanvas anzeigen“ aktiviert ist.
  • Positionierung von „Mein Konto“: Bestimmt die Position am linken oder rechten Bildschirmrand. Voraussetzung ist, dass in „Allgemeine Einstellungen“ die Option „Mein Konto als Offcanvas anzeigen“ aktiviert ist.

Farben:

  • Selbst definierte Farben verwenden: Muss aktiviert sein, damit sich die nachfolgenden Einstellungen auf das Frontend auswirken.
  • Offcanvas Titelleiste Hintergrundfarbe: Anpassung der Hintergrundfarbe des Titels in den Offcanvas-Elementen.
  • Offcanvas Titelleiste Textfarbe: Anpassung der Textfarbe des Titels in den Offcanvas-Elementen (ganz oben).
  • Offcanvas Hintergrundfarbe: Anpassung der Hintergrundfarbe des übrigen Bereiches in den Offcanvas-Elementen.
  • Offcanvas Textfarbe: Anpassung der Textfarbe des übrigen Bereiches in den Offcanvas-Elementen.

Der Reiter „Lizenz“ beinhaltet folgende Optionen (siehe Abbildungen 5 & 6):

Abbildung 5: 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 6: 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 7):

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

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