Imagehover Plus [OPC Portlet] (Bildaustausch bei hover)

Inhalt

1. Wozu dient das Portlet "Imagehover Plus [OPC Portlet] (Bildaustausch bei hover)"

Mit dem Portlet „Image Hover Plus“ hast Du die Möglichkeit, Dein Online-Shop-Erlebnis auf ein neues Level zu bringen. Das Portlet sorgt für eine animierte Bildveränderung, sobald der Nutzer mit seiner Maus darüberfährt. Diese Bewegung erweckt nicht nur das Interesse des Nutzers, sondern regt auch zum Klicken auf die Animation an.

Indem Du bewegte Elemente in Deinem JTL-Shop einsetzt, schaffst Du ein attraktives Einkaufserlebnis für Deine Kunden. Mit Dynamikeffekten kannst Du ihre Aufmerksamkeit gewinnen und sie auf die gewünschten internen und externen Zielseiten leiten. Durch diese Interaktion wird das Einkaufen zu einem interaktiven Erlebnis, das den Nutzer begeistert und dazu verleitet, länger auf Deinem Onlineshop zu verweilen.

Dank der Verwendung des Portlets „Image Hover Plus“ kannst Du das Design Deines Online-Shops verbessern und eine einzigartige Nutzererfahrung schaffen. Es ist eine einfache Möglichkeit, Dein Angebot zu präsentieren und gleichzeitig das Interesse Deiner Kunden zu wecken.

2. Was kann das Portlet "Imagehover Plus [OPC Portlet] (Bildaustausch bei hover)"

Das knowmates-Portlet „Image Hover Plus“ ist exklusiv für das Shopsystem JTL-Shop entwickelt. Es ermöglicht die Erstellung von ansprechenden Mouseover-Effekten, die Deine Inhalte auf allen Endgeräten in einem einzigartigen Licht präsentieren (siehe Abbildung 1).

Mit Hilfe des Onpage Composers kannst Du spielend leicht Deine CMS-Einzelseiten sowie alle anderen Seiten bearbeiten und mit Portlets ausstatten, die Du per Drag & Drop an jede beliebige Stelle verschieben kannst. Das „Image Hover“ kannst Du dabei ganz nach Deinen Vorstellungen positionieren, sei es als eine komplette Zeile oder innerhalb eines mehrspaltigen Grids. Dabei kannst Du auch mehrere Bilder verlinken, um eine noch interaktivere Nutzererfahrung zu schaffen.

Eine weitere nützliche Funktion des „Image Hover Plus“ ist die Möglichkeit, verschiedene Dateiformate wie svg, png und jpg sowohl in transparenter als auch nicht-transparenter Form zu hinterlegen. Dadurch hast Du maximale Freiheit in der Gestaltung Deiner Inhalte und kannst sicherstellen, dass sie genau Deinen Anforderungen entsprechen.

Abbildung 1: Darstellung „Image Hover Plus“ auf dem Desktop im Frontend eines JTL-Shops

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. Portlet "Imagehover Plus [OPC Portlet] (Bildaustausch bei hover)" 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“ > „Image Hover Plus“ auf.

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

Abbildung 2: Benutzeroberfläche vom Portlet-Backend „Image Hover Plus“

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

5.2 Konfigurationsmenü im OnPage Composer (OPC)

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 „Bild:hover“ über „Portlets“ im Bereich „knowmates“ via Drag & Drop an der gewünschten Stelle hinzu und triffst alle weiteren Einstellungen (siehe Abbildung 6).

Abbildung 6: Portlet „Image Hover Plus“ im OnPage Composer hinzufügen

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

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

Abbildung 7: Reiter „Allgemein“

  • Bildunterschrift: Definieren der Anzeige unter dem Image Hover
  • Link: Eingabe des Ziellinks, auf den der Nutzer beim Klicken weitergeleitet werden soll
  • Link öffnen im: Auswahl, ob der Link in einem neuen oder im selben Fenster geöffnet werden soll
  • Textfarbe: Auswahl der Textfarbe für die Bildunterschrift (ohne Mausover)
  • Textfarbe bei Mausover: Auswahl der Textfarbe für die Bildunterschrift beim Mausover

Bei Reiter „Bilder“ beinhaltet folgende Einstellungen (siehe Abbildung 8 & 9).

Abbildung 8: Reiter „Bilder“

Abbildung 9: Reiter „Bilder“ nach Einfügen des ersten Bildes

  • Click to upload: Einfügen von Bildern durch Klick auf das Feld
  • Richtungspfeile-Icon: Bewegen bzw. Tauschen der Bilder per Drag and Drop
  • Kopieren-Icon: Duplizieren eines Bildes
  • Löschen-Icon: Löschen eines Bildes
  • Hintergrund-Farbe: Auswahl der Hintergrund-Farbe (nur für das Bild)
  • Plus-Icon: Hinzufügen des zweiten Bildes

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