Grid Layout Plus [OPC Portlet]

Inhalt

1. Wozu dient das Portlet "Grid Layout Plus [OPC Portlet]"

JTL bietet mit seinem OnPage Composer ein Baukastensystem für die Bearbeitung einzelner Unterseiten in Deinem JTL-Shop. Die Bausteine für dieses Baukastensystem heißen Portlets.

Mit dem Portlet „Grid Layout Plus [OPC Portlet]“ sorgst Du für eine ansprechende kompakte Darstellung auf mobilen Endgeräten mit einem kleinen, bei Bedarf animierten, swipeMe-Icon. Dieses weist den Nutzer darauf hin, dass es an dieser Stelle noch weitere Inhalte zu sehen gibt, wenn er mit dem Finger zur Seite wischt. Darüber hinaus ist es nicht notwendig, die Bildgröße des Hauptbildes in den exakten Abmessungen hochzuladen, was im Normalfall Layoutverschiebungen nach sich ziehen würde.

2. Was kann das Portlet "Grid Layout Plus [OPC Portlet]"

Das knowmates-Portlet „Grid Layout Plus [OPC Portlet]“ ist exklusiv für das Shopsystem JTL-Shop entwickelt. Es dient der Erstellung eines individuellen Grid-Layouts (mit Spalten & Zeilen), das Deine Inhalte Deinen Nutzern über alle Endgeräte hinweg ansprechend präsentiert (siehe Abbildung 1).

Abbildung 1: Darstellung „Grid Layout Plus [OPC Portlet]“ auf dem Desktop & auf dem Smartphone im Modus „flex“ sowie „swipeMe“ im Frontend eines JTL-Shops

Hinweis: Aktuell ist das Portlet nur für Bilder optimiert, daher auch der Hinweis „Dieses Portlet ist zur Zeit nur für das Bild Portlet optimiert, bei anderen Portlets kann es zu Darstellungsproblemen kommen“.

3. Systemvoraussetzungen

  • JTL-Shop 5.2.1 (PHP 8.1)
  • Template NOVA
  • ionCube Loader

4. Installation im JTL-Shop

Für Deinen JTL-Shop 5 beziehst Du Portlets ü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 in Deinem 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 Portlet.
  3. Wähle es 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 Portlet Deinem Shop zu. Klicke dafür auf „An diesen Onlineshop“ anbinden.
  8. Anschließend findest Du die Lizenz im Bereich „Gebundene Lizenzen“ und es steht die Schaltfläche „Installieren“ zur Verfügung. Nach der Installation kannst Du das Portlet im Menü unter „PLUGINS“ > „Plugin-Manager“ in der Registerkarte „Aktiviert“ konfigurieren.

5. Portlet "Grid Layout Plus [OPC Portlet]" einrichten

5.1 Konfigurationsmenü im Shop-Backend

Rufe das Konfigurationsmenü entweder unter „Plugin-Manager“ > „Aktiviert“ über das entsprechende Zahnrad-Icon auf der rechten Seite oder direkt über „Installierte Plugins“ > „Grid Layout Plus [OPC Portlet]“ auf.

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

Abbildung 2: Benutzeroberfläche vom Portlet-Backend „Grid Layout Plus [OPC Portlet]“

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

Hinweis: Manche Portlets haben an dieser Stelle erweiterte Einstellungen, das Portlet „Grid Layout Plus [OPC Portlet]“ jedoch nicht.

Der Reiter „Lizenz“ beinhaltet folgende Optionen (siehe Abbildungen 3 & 4):

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

Abbildung 5: 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.

6. Sonstiges / Bemerkungen

Rufe die Unterseite in Deinem JTL-Shop auf, auf der du das Portlet platzieren möchtest und öffne den OnPage Composer. Wechsle danach in den Bearbeitungsmodus. Nun fügst du das Portlet „Grid+“ über „Portlets“ im Bereich „Layout“ via Drag & Drop an der gewünschten Stelle hinzu und triffst alle weiteren Einstellungen (siehe Abbildung 6 auf Folgeseite).

Abbildung 6: Portlet „Grid Layout Plus [OPC Portlet]“ im OnPage Composer hinzufügen

Das Portlet kommt im Standardlayout mit einer zweispaltigen und einer dreispaltigen Zeile daher (siehe Abbildung 7).

Abbildung 7: Standard-Layout vom Portlet „Grid Layout Plus [OPC Portlet]“

Hinweis: Aktuell ist das Portlet nur für Bilder optimiert, daher auch der Hinweis „Dieses Portlet ist zur Zeit nur für das Bild Portlet optimiert, bei anderen Portlets kann es zu Darstellungsproblemen kommen“.

Nach einem Klick auf das Portlet und das Stift-Icon gelangst du ins Konfigurationsmenü.

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

Abbildung 8: Reiter „Allgemein“

  • Previewmodus: Wenn aktiviert, wird nur ein Droppoint pro Grid-Area angezeigt.: Üblicherweise wird vor und nach jedem abgelegten Portlet ein neuer Droppoint eingefügt, was jedoch unübersichtlich werden kann. Durch diese Option werden die Droppoints vor und nach dem eingefügten Element ausgeblendet und lediglich der nächste Droppoint wird grün umrandet angezeigt.
  • Hauptlayout: Es stehen drei verschiedene Layouts für den Hauptbereich zur Verfügung (ein Bild, ein Bild in Spalte 1 und zwei Bilder untereinander in Spalte 2, zwei Bilder untereinander in Spalte 1 und ein Bild in Spalte 2).
  • Areas pro Zeile Desktop: Wähle die Anzahl der Spalten, die in der Desktop-Ansicht in den Zeilen über bzw. unter dem Hauptbereich angezeigt werden sollen.
  • Areas pro Zeile Tablet: Wähle die Anzahl der Spalten, die in der Tablet-Ansicht in den Zeilen über bzw. unter dem Hauptbereich angezeigt werden sollen.
  • Areas pro Zeile mobil: Wähle die Anzahl der Spalten, die in der Smartphone-Ansicht in den Zeilen über bzw. unter dem Hauptbereich angezeigt werden sollen.
  • Zeilen über dem Hauptlayout: Lege die Anzahl der Zeilen über dem Hauptbereich fest.
  • Zeilen unter dem Hauptlayout: Lege die Anzahl der Zeilen unter dem Hauptbereich fest.
  • Spaltenabstand: Definiere den Abstand zwischen allen Spalten.
  • Spaltenabstand Einheit: Lege die dazugehörige Einheit fest.
  • Zeilenabstand: Definiere den Abstand zwischen allen Zeilen.
  • Zeilenabstand Einheit:  Lege die dazugehörige Einheit fest.
  • Mobile Anzeige:

    • flex: Bei dieser Methode wird das Hauptbild zuerst angezeigt. Alle anderen Bilder werden in einem fixen Layout untereinander angezeigt.
    • wischen [swipeMe]: Bei dieser Methode wird das Hauptbild nur auf „echten“ mobilen Geräten zuerst angezeigt. Alle anderen Bilder werden darunter in Form von Slides (nebeneinander liegende Bilder) angezeigt. Bei dieser Option triffst Du weitere Einstellungen (siehe Abbildung 9 auf Folgeseite).

Abbildung 9: Einstellungen bei der mobilen Anzeige „wischen [swipeMe]“

  • Swipe Animation anzeigen: Wenn aktiviert, wird die unten dargestellte Grafik animiert (nur auf mobilen Endgeräten) angezeigt. Wenn deaktiviert, wird die Grafik nicht angezeigt.
  • Hintergrundfarbe: Diese Option legt die Hintergrundfarbe der Swipe-Grafik fest, bei Bedarf auch transparent.
  • Icon Farbe: Diese Option legt die Farbe der Icons (Pfeile & Hand) fest.
  • Position:  Diese Option legt die Position der Grafik fest (zentriert, links oder rechts)

Der Reiter „Layout“ beinhaltet die üblichen Optionen eines Portlets.