Payment & Shipping Icons Plus (Zahlart und Versand-Icons anzeigen)

Inhalt

1. Wozu dient das Plugin "Payment & Shipping Icons Plus (Zahlart und Versand-Icons anzeigen)"

Viele Kunden von Online-Shops möchten gerne wissen, welche Zahlungs- und/oder Versandarten ihnen zur Verfügung stehen. Oft haben sie bereits Favoriten, weil sie z. B. besonderen Wert auf Schnelligkeit, Sicherheit und/oder Bequemlichkeit legen.

Nicht nur das Angebot verschiedener Zahlungs- und/oder Versandarten trägt zur Steigerung der Kaufabschlüsse bei, sondern auch deren Präsentation.

An dieser Stelle kommt das Plugin „Payment & Shipping Icons Plus“ ins Spiel. Durch den Einsatz dieses Plugins müssen Ihre Kunden nicht mehr lange nach den Zahlungs- und/oder Versandarten suchen. Vielmehr bieten Sie Ihren Kunden diese (individuell konfigurierbaren) Informationen an genau den Positionen, an denen sie nötig sind.

Die Vorteile vom Plugin „Payment & Shipping Icons Plus“ im Überblick:

  • trägt durch direkte Visualisierung zur Conversion-Steigerung bei
  • klare Informationen über Zahlungs- und/oder Versandarten an geeigneten Stellen im JTL- Shop (Artikeldetailseite + Warenkorb + Footer // jeweils einzeln oder kombiniert)
  • einfaches Einbinden der Zahlungsart-Icons
  • Anzeige der Zahlungsarten nach Beliebtheit (Auswertungen der Bestellungen)
  • intuitive Bedienung (via Plugin-Backend)

 

2. Was kann das Plugin "Payment & Shipping Icons Plus (Zahlart und Versand-Icons anzeigen)"

Das knowmates-Plugin „Payment & Shipping Icons Plus“ ist exklusiv für das Shopsystem JTL-Shop entwickelt. Durch dieses Plugin zeigen Sie die Zahlungs- und/oder Versandarten sowohl auf der Produktdetailseite, im Footer und/oder im Warenkorb ganz nach Ihren Wünschen an (siehe Abbildung 1 sowie Abbildungen 2 & 3).

Abbildung 1: „Payment & Shipping Icons Plus“ im Frontend eines JTL -Shops (Produktdetailseite)

Abbildung 2: „Payment & Shipping Icons Plus“ im Frontend eines JTL -Shops (Footer)

Abbildung 3: „Payment & Shipping Icons Plus“ im Frontend eines JTL -Shops (Warenkorb)

 

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 "Payment & Shipping Icons Plus (Zahlart und Versand-Icons anzeigen)" einrichten

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

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

Abbildung 4: Benutzeroberfläche vom Plugin „Payment & Shipping Icons 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 „Payment & Shipping Icons Plus“.

Der Reiter „Einstellungen“ beinhaltet folgende Option(en) (siehe Abbildung 5):

Abbildung 5: Reiter „Zahlart-Icons“

  • Icons hochladen: Der Upload wird durch das Ziehen eines Bildes vom PC auf die türkisfarbene Upload-Fläche gestartet (Drag & Drop). Wurde ein Icon akzeptiert, öffnet sich der Dialog „Icons für Zahlarten anlegen“ (siehe Abbildung 6):

Abbildung 6: Dialog „Icons für Zahlarten anlegen“

  • Bezeichnung: Hier legen Sie eine allgemeine Bezeichnung fest, welche zur Ordnung im Plugin-Backend dient und im Frontend beim Überfahren mit der Maus angezeigt wird.
  • Alt-Tag: Hier hinterlegen Sie eine kurze Beschreibung des Zahlart-Icons. Diese dient v. a. der Barrierefreiheit und kann von Screenreadern vorgelesen werden.
  • zugewiesene Zahlart: Zahlart, die dem Icon zugewiesen werden soll
  • Das im Shop hinterlegte Icon für diese Zahlart überschreiben (nein/ja): Wenn ausgewählt, wird das im Shop eingestellte Standard-Icon ersetzt. Wenn später nein gewählt oder dieser Eintrag gelöscht wird, wird auf das Standard-Icon zurückgesetzt.

Wurde ein Icon nicht akzeptiert, erscheint eine der folgenden Meldungen:
„Erlaubte Dateitypen sind: image/png, image/jpeg, image/svg+xml, image/webp“
„Der Upload von kompletten Verzeichnissen wird nicht unterstützt. Man kann jedoch mehrere Dateien auf einmal hochladen“
„Die maximale Dateigröße für ein Bild beträgt: 1 MB“

Darüber hinaus sind weitere Hinweise (rot hinterlegt) möglich (siehe Abbildung 7):

Abbildung 7: (Potenzielle) Hinweise beim Upload von Zahlart -Icons

  • Die Datei existiert bereits. Soll sie überschrieben werden? (nein/ja): Eine Datei mit demselben Namen liegt bereits auf dem Server und ist in Verwendung. Wenn das Überschreiben aktiviert wird, dann wird der Datensatz, der mit diesem Icon verbunden ist, editiert.
  • Neuer Dateiname zum speichern: Alternativ hinterlegen Sie hier einen anderen Dateinamen.
  • Wird eine bereits verknüpfte Zahlart ausgewählt, erscheint der Hinweis (3), dass diese Verknüpfung editiert wird. Möchte man das Icon zu einer Zahlart ändern, ist man hier an der richtigen Stelle.

Bereits gespeicherte Datensätze können in der Übersicht unterhalb des Upload-Feldes direkt bearbeitet werden. Jeder Eintrag wird durch separate Knöpfe gespeichert oder gelöscht.

Der Reiter „Einstellungen“ beinhaltet folgende Optionen (siehe Abbildungen 8 sowie 9, & 10):

Abbildung 8: Reiter „Einstellungen“ – Produktdetail

Abbildung 9: Reiter „Einstellungen“ – Warenkorb

Abbildung 10: Reiter „Einstellungen“ – Footer

  • Bereichsauswahl: Hier wählen Sie den gewünschten der derzeit drei verschiedenen Bereiche des Webshops: Produktdetail, Warenkorb oder Footer.
  • Im Webshop verwenden (nein/ja): Hier aktivieren Sie die Anzeige im definierten Bereich. Im Bereich „Produktdetail“ gibt es zusätzlich noch die Möglichkeit, einen Button zum Umschalten der Ansicht zu verwenden. Die Zahlart-Icons werden in diesem Fall erst nach einem Klick auf den Button angezeigt.
  • Hintergrundfarbe Button & Schriftfarbe Button (nur im Bereich „Produktdetail“): Die Schrift- und Hintergrundfarbe des Buttons können individuell gestaltet werden (siehe Abbildung 11). Den Button-Text steuern Sie über „Erweiterte Einstellungen“ > „Sprachvariablen

Abbildung 11: Button zur Anzeige der Icons (nur auf Produktdetailseite)

  • Über die Sprachvariablen kann außerdem eine Überschrift angezeigt werden (siehe Abbildung 12).

Abbildung 12: Überschrift für Icons

Anmerkung zur Produktdetailseite: hier wird der Text entweder als Überschrift oder im Button angezeigt – je nachdem, ob ein Button verwendet wird oder nicht. Wird kein Text angegeben, dann wird als Überschrift nichts angezeigt. Ist der Button aktiv, wird ein Standardtext angezeigt.

  • Sortierreihenfolge: Die zu zeigenden Icons können auf drei verschiedene Arten sortiert werden:
    a. sortiere alle im Shop verfügbaren Icons nach Popularität
    b. sortiere die oben ausgewählten Icons nach Popularität
    c. So anzeigen, wie in der oberen definiert

Was bedeutet: „nach Popularität sortieren“?

Die im Webshop vorhandenen Bestellungen werden nach Zahlart ausgewertet und anhand der Häufigkeit ihrer Verwendung durch den Kunden sortiert. Für nach Popularität sortierte Zahlarten sollte auch ein Icon hinterlegt sein. Ansonsten wird ein Schriftzug angezeigt. Im oberen Bereich abgelegte Icons sind per Drag & Drop beliebig sortierbar (siehe Abbildung 13). Sollte versehentlich einmal das falsche Icon oben gelandet sein, kann es durch einen Klick auf das Kreuz wieder entfernt werden.

Abbildung 13: Icons individuell sortieren

  • Einfügemethode: zum Einfügen der Icons in die Website gibt es drei Möglichkeiten in Abhängigkeit von einem zu definierenden Element:
    a. nach dem ausgewählten Element
    b. vor dem ausgewählten Element
    c. ausgewähltes Element ersetzen
  • Höhe der Icons: Hier wird angegeben, welche Höhe die Icons haben sollen. Akzeptiert werden alle Eingaben. Es kann sowohl mit relativen Angaben wie „%“ oder „rem“, als auch mit absoluten Angaben wie „px“ gearbeitet werden. Die Eingabe wird nicht validiert.
  • CSS-Selektor (z.b.: “#add-to-cart“): Auf das/die hier zu definierte(n) Element(e) bezieht sich die o. g. Einfügemethode. Es wird ein CSS-Selektor erwartet.

In den „Einstellungen“ gibt es außerdem einen Bereich „Erweiterte Einstellungen“ (siehe Abbildung 14).

Abbildung 14: Reiter „Einstellungen“ – Erweiterte Einstellungen

  • Sprachvariablen editieren: Über diesen Button lassen sich die Überschriften sowie die Button-Beschriftung entsprechend in den aktivierten Sprachen hinterlegen.
  • Aktualisierungsmethode – bei jedem Seitenaufruf: Die Reihenfolge der Zahlart-Icons berechnet sich bei jedem Seitenaufruf neu (kann u. U. zu einer erhöhten Serverlast führen).
  • Aktualisierungsmethode – bei jeder Bestellung: Die Reihenfolge der Zahlart-Icons berechnet sich nach jeder Bestellung neu.
  • Aktualisierungsmethode – manuell: Die Reihenfolge der Zahlart-Icons wird erst nach manuellem Auslösen, z. B. über das Shop-Dashboard, neu berechnet.

Weitere Einstellungen öffnen sich:

  • Benachrichtigungs-Widget anzeigen: Das Widget wird auf dem JTL-Dashboard aus- bzw. eingeschaltet (siehe Abbildung 15).
  • Zeitspanne für die Benachrichtigung: Hier legen Sie das Intervall für die Häufigkeit der Erinnerung auf dem JTL-Shop-Dashboard fest (täglich, wöchentlich, nach 2 Wochen, monatlich).

Abbildung 15: Plugin-Widget im JTL-Shop-Dashboard

  • Reihenfolge anhand aller Verkäufe ab dem XX.XX.XXXX ermitteln: Nach der Installation wird das Datum der ersten Bestellung aus der Datenbank als Startwert festgelegt.
    • Wähle ein anderes Datum: Hier wählen Sie bei Bedarf ein späteres Datum, z. B. um ein aktuelles Abbild der vom Kunden bei der Bestellung genutzten Zahlungsart zu erstellen.
    • jetzt aktualisieren: Startet den Vorgang und speichert die ermittelten Werte.

Zusätzlich ist es möglich, eigenes CSS für die optimierte Darstellung auf der Website zu schreiben. Der Reiter „eigenes CSS“ beinhaltet folgende Optionen (siehe Abbildung 16).

Abbildung 16: Reiter „eigenes CSS“

Hiermit können über das Plugin getätigte CSS-Eigenschaften individuell verändert werden.

Der Reiter „Lizenz“ beinhaltet folgende Optionen (siehe Abbildungen 17 & 18):

Abbildung 17: 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 18: 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 19):

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