xt Commerce 4 Veyton Plugins

xt:Commerce 4 & 5 Plugins

Plugin Entwicklung & Programmierung

Jetzt Anfragen

Slideshow, Diashow, Bilderfolge

Slideshow, Diashow, Bilderfolge

Bilder als Slideshows an beliebigen Orten Ihres Shops anzeigen.

99

EUR 99,00 *

zzgl. 19 % USt Versandkostenfrei

Sie können das Plugin kostenfrei für 21 Tage testen!

  • Lizenz:
  • Installationsservice:

Bitte treffen Sie eine Auswahl für alle benötigten Felder!

Testlizenz anfordern

Slideshow, Diashow, Bilderfolge

Bilder als Slideshows an beliebigen Orten Ihres Shops anzeigen.

Kurz und knapp — Fakten:

  • Slideshows „per Click“ Produkten zuordnen
  • Slideshows über das Template an beliebigen Orten
  • Beliebig viele Slideshows
  • Viele wählbare Effekte für Bildübergänge
  • Bilderverwaltung über den internen Bildermanager
  • Name und Link pro Bild vergeben
  • Slideshow Design einfach per CSS anpassen
Slideshow, Diashow, Bilderfolge
 

Die Slideshow im Detail

Das Slideshow Plugin für xt:Commerce Veyton 4 ist eine Erweiterung für den Shop, mit dem beliebig viele Slideshows sehr flexibel in den Shop integriert werden können.

Das Plugin unterscheidet grundsätzlich zwischen zwei Arten von Slideshows:

  • Produkt-Slideshow
    Jedem Produkt kann eine beliebige Slideshow zugeordnet werden.
    Die Zuordnung geschieht unkompliziert im Shop-Backend in der Artikelkonfiguration.
  • Content-Slideshow
    Jede Slideshow kann an beliebiger Stelle im Shop über das Template mit einem individuellen Hookpoint eingefügt werden, z.B.
    {hook key=ad_slideshow_id1}

Das Slideshow Plugin bietet vielfältige Konfigurationsmöglichkeiten und viele wählbare Effekte (siehe unten) und kann individuell an jeden Shop angepasst und in diesen eingebunden werden.

Das Plugin ist nahtlos in das Shopsystem integriert. Bilder für die Slideshow lassen sich komfortabel über den shopinternen Mediamanager verwalten. Somit ist es auch ohne weiteres möglich, über die shopinterne Importfunktion, beliebige Dateien (Bilder) zu importieren. Weitere Informationen dazu finden sich im Benutzerhandbuch von xt:Commerce 4 Veyton.

Das Design der Slideshow ist bewusst neutral gehalten und kann bei Bedarf über die CSS-Datei im Pluginordner /css/simpleSlider.css angepasst werden. Ebenso können viele Einstellungen über das Administrationsinterface von xt:Commerce 4 Veyton konfiguriert werden.


Konfigurationsmöglichkeiten

  • Beliebig viele Slideshows erstellen
  • Beliebig viele Bilder pro Slideshow
  • Slideshows in Produkten anzeigen, für jedes Produkt separat konfigurierbar
  • Slideshows an beliebigen Orten über das Template anzeigen
  • Breite und Höhe definieren (pro Slideshow)
  • Anzeigezeit der Einzelbilder einer Slideshow angeben (pro Slideshow)
  • Effekt-Geschwindigkeit festlegen (pro Slideshow)
  • Anzeige / Ausblendung von anwählbaren Navigationspunkten in den Bildern einer Slideshow, die die Gesamtanzahl der Bilder der Slideshow angeben und das momentan gewählte Bild markieren (pro Slideshow)

 

Effekte

  • fade
  • horizontal
  • vertical
  • random
  • overlay horizontal
  • overlay vertical
  • fadeslide horizontal
  • fadeslide vertical
  • blind horizontal
  • blind vertical
  • rain
  • rain random
  • slice up
  • slice down
  • swirl

 


Systemvoraussetzungen

Das Plugin ist für das Shopsystem xt:Commerce 4 & 5 entwickelt und getestet, für die Versionen 4.0.13, 4.0.14, 4.0.15, 4.0.16, 4.1.0, 4.1.1, 4.2.0 und 5. Die Aufwärtskompatibilität ist in der Regel gegeben, kann jedoch nicht garantiert werden.

 

Alle unsere Plugins können für 21-Tage kostenfrei getestet werden! Testlizenz anfordern

Installation & Anleitung

Installation:

Wichtig: Vor der Installation eines Plugins sollten stets alle Daten (Datenbank und Daten) des Shopsystems gesichert werden um Datenverlust zu vermeiden!
Sie können die Installation des Plugins gegen eine geringe Gebühr auch schnell und sicher durch uns erledigen lassen:
-> ador design kontaktieren

Ablauf der Installation:

  1. Backup des Shopsystems.
  2. Das Plugin entpacken und die entpackten Daten (Pluginordner) per FTP auf den Server in den Ordner: /plugins des Shops hochladen.
  3. Die zu dem Plugin gehörende Lizenz-Datei (ad_slideshow.txt) per FTP in den Ordner /lic des Shops hochladen. Die Lizenz erhalten Sie nach dem Kauf und Bezahlung des Plugins per E-Mail zugesandt. Ohne Lizenz-Datei ist das Plugin nicht funktionsfähig!
  4. Im Adminbereich des Shops das Plugin über den Menüpunkt: Inhalte -> Plugin -> deinstallierte Plugins installieren.
  5. Im Adminbereich des Shops das Plugin über den Menüpunkt: Inhalte -> Plugins -> installierte Plugins aktivieren (ggf. auch für den jeweiligen Mandanten).
  6. Zuletzt muss noch der komplette Adminbereich neu geladen werden. Dies geht über den "neu laden" -Button Ihres Browsers oder z.B. die F5-Taste.

Template Anpassungen & Beispiel:

1. Produkt-Slideshow
2. Content-Slideshow

1. Produkt-Slideshow

Jedem Produkt kann eine beliebige Slideshow zugeordnet werden.
Dafür gibt es zwei Varianten:

  • Über den bereits in das Standard Template von Veyton 4.1 integrierten Hookpoint: (Achtung: Dieser Hookpoint ist in den Versionen vor 4.1 nicht enthalten!)
    {hook key=products_images_tpl}
    Merke: Diese Variante ist speziell für den Veyton Shop in der Version 4.1, da hier der entsprechende Hookpoint bereits vorhanden ist.
  • Über einen eigenen Hookpoint vom Slideshow Plugin:
    Für die Versionen: 4.0.13, 4.0.14, 4.0.15, 4.0.16 und bei Bedarf auch 4.1
    Fügen Sie dazu an beliebiger Stelle im Produkt-Template, wo die Slideshow erscheinen soll:
    /templates/IHR_TEMPLATE/xtCore/pages/product/product.html
    folgenden Code ein:
    {hook key=ad_slideshow_product_img}
    Praktisches Beispiel: Fügen Sie den Hookpoint z.B. an folgender Stelle in der product.html ein (ca. Zeile 68), damit die Produkt-Slideshow über der Artikelbeschreibung angezeigt wird:
    ...
    <div style="clear:both;"></div>
    <br />
    {hook key=ad_slideshow_product_img}
    <div id="productinfodetail">
    ...


2. Content-Slideshow

Jede Slideshow kann an beliebiger Stelle im Shop über das Template mit einem individuellen Hookpoint eingefügt werden.

  • Slideshow in das Template integrieren:
    Fügen Sie in eine beliebige Datei Ihres Template, z.B. in die index.html den Hookpoint für die Slideshow, die Sie dort anzeigen möchten ein.
    Beispiel: {hook key=ad_slideshow_id1} zeigt die Slideshow mit der "Slideshow Nummer" 1 an. 
  • Praktisches Beispiel: Eine bestimmte Slideshow nur auf der Startseite des Shops anzeigen.
    Öffnen Sie die Datei: /templates/IHR_TEMPLATE/index.html
    und fügen Sie direkt oberhalb von der Zeile (ca. 73):
    {$content}
    den folgenden Code ein:
    {if $page == "index"}{hook key=ad_slideshow_id1}{/if}
    Wobei "id1" für die Nummer Ihrer Slideshow, die Sie anzeigen möchten steht.
    Ihr Code sieht dann, wie folgt aus:
    ...
    {if $page == "index"}{hook key=ad_slideshow_id1}{/if}
    {$content}
    ...
  • Analog zu dem oben stehenden Beispiel, können Sie auch auf die gleiche Weises z.B. mit {if $page == "content"} oder {if $page == "categorie"}, eine Slideshow auf anderen Shop-Seiten einbinden.
  • Ebenso geht das Beispiel auch etwas abgewandelt zum Anzeigen von Slideshows auf beliebigen Einzelseiten:
    {if $smarty.get.coID == 8}{hook key=ad_slideshow_id1}{/if}
    Wobei "coID" der "Content-ID" im Shop entspricht. Zu finden unter:
    Inhalte -> Contentmanager -> Content -> Content-ID

Sie sehen also, die Slideshow lässt sich sehr individuell und genau im Template und Shop platzieren. Natürlich können Sie die Slideshows auch mit allen anderen Funktionen kombinieren, um z.B. eine bestimmte Slideshow nur einer bestimmten Kundengruppe oder sogar einzelnen Kunden anzuzeigen.
Hier stehen alle vom Shop gelieferten Möglichkeiten bereit, um die Slideshow direkt an Ihre Bedürfnisse anzupassen.


Wenn Sie weitere Hilfe oder individuelle Anpassungen benötigen, können Sie uns gerne kontaktieren:
-> ador design kontaktieren

Plugin-Konfigurationen (global):

Inhalte -> Plugin -> installierte Plugins -> ad Slideshow
Alle Felder, die mit "Pflichtfeld" gekennzeichnet sind, müssen ausgefüllt werden!

Bei Schritt 5 (Ablauf der Installation) kann das Plugin ggf. konfiguriert werden. Nachfolgend werden die relevanten Konfigurations-Möglichkeiten erklärt:
ad Slideshow Veyton Slideshow Plugin - Plugin-Konfiguration (Global)
Ansicht: Globale Einstellungsmöglichkeiten direkt im Plugin.

  • Plugin-Status: Aktiviert das Plugin für den Shop.
  • Bei Mouseover Pause: Wird die Einstellung aktiv gesetzt, pausiert die Slideshow bei Mouseover.
  • Standard-Effekt: Hier kann der Effekt festgelegt werden, der standardmäßig für alle Slideshows gelten soll. Wird direkt in der Slideshow ein anderer Effekt gewählt, gilt der Standard-Effekt nicht mehr für diese Slideshow.
  • Status: Slideshow pro Mandant aktivieren oder deaktivieren.
  • Titel Deckkraft: Transparenz des Titels. (mögliche Werte: 0.0 bis 1.0)
  • Effekt-Geschwindigkeit in Millisekunden: Die Dauer, wie lange der gewählte Effekt dauert.
  • Anzeigezeit in Millisekunden: Die Zeit, nach welcher das nächste Bild erscheint. Der Standardwert "3000" steht für 3 Sekunden.

Slideshow-Konfigurationen (pro Slideshow):

Shop -> ad Slideshow -> ad Slideshow

Zusätzlich zu den globalen Plugin-Konfigurationen, kann jede Slideshow bei Bedarf individuell konfiguriert werden. Wobei zu beachten ist, dass die Felder: "Breite" und "Höhe" Pflichtfelder sind und ausgefüllt werden müssen!
ad Slideshow Veyton Slideshow Plugin - Slideshow-Konfigurationen
Ansicht: Konfiguration einer Slideshow.

  • Hookpoint: Individueller Hookpoint für diese Slideshow. Kann überall im Template eingesetzt werden (praktisches Beispiel dazu siehe Seite: 5).
    Format des Hookpoints: {hook key=ad_slideshow_idx} x = Slideshow Nummer.
  • Effekt: Effekt für diese Slideshow. Überschreibt den globalen Effekt!
  • Status: Slideshow aktivieren oder deaktivieren.
  • Bilderanzahl: Zeigt in Form von kleinen "Kugeln" an, aus wie vielen Bildern die Slideshow besteht und welches das aktuell angezeigte Bild ist.
  • Titel: Zeigt am unteren Rand des aktuellen Bildes den Bildnamen an.
    Merke: Der Bildname kann über Shop -> ad Slideshow -> ad Bild: Name vergeben werden (siehe Seite 8).
  • Breite (Pflichtfeld): Breite der Slideshow in Pixel. (z.B. "500").
  • Höhe (Pflichtfeld): Höhe der Slideshow in Pixel. (z.B. "200").

Bilder-Konfigurationen (pro Bild):

Shop -> ad Slideshow -> ad Bilder

Nachfolgend werden die Einstellungsmöglichkeiten jedes einzelnen Bildes für die Slideshow aufgezeigt und erklärt.
ad Slideshow Veyton Slideshow Plugin - Bilder-Konfiguration
Ansicht: Einstellungsmöglichkeiten direkt bei einem Bild für die Slideshow.

  • Slideshow Nummer (Pflichtfeld): Hier wird die Nummer der Slideshow ausgewählt, in der das Bild angezeigt werden soll.
    Merke: Es werden nur eingerichtete Slideshows angeboten!
  • Bild (Pflichtfeld): Über das Dropdown-Menü kann das gewünschte Bild gewählt werden.
    Merke: Es werden nur über den Mediamanager geladenen Bilder angeboten!
  • Name: Der Bildname der angezeigt wird.
    Merke: Diese Option ist standardmäßig nicht aktiviert und muss pro Slideshow aktiviert werden (siehe. Slideshow-Konfigurationen: "Titel" auf Seite 7.
  • Link: Hier kann dem Bild ein beliebiger Link zugeordnet werden.
    z.B. "http://www.domain.de"
    Merke: Lassen Sie das Feld einfach leer, wenn kein Link erzeugt werden soll.

Plugin-Bedienung & Anwendung:

Nachfolgend werden die Bedienung und die Anwendung des Plugins erklärt.

1. Bilder-Upload für die Slideshow
2. Anlegen von Slideshows
3. Bild einer Slideshow zuordnen
4. Slideshow einem Artikel zuordnen
5. Slideshow in das Template integrieren

1. Bilder-Upload für die Slideshow

Der interne Mediamanager, worüber auch die Bilder für das Slideshow-Plugin verwaltet werden, kann wie folgt aufgerufen werden:
Inhalte -> Media -> Media Gallery -> ad_slideshow

ad Slideshow Veyton Slideshow Plugin - Mediamanager
Ansicht: Shopinterner Mediamanager

  • Datei Upload: Hier können die Bilder für die Slideshow(s) in den Shop geladen werden.
  • Datei Import: Hier können beliebig viele Bilder über den shopinternen Importer geladen werden. Weitere Informationen dazu befinden sich im Benutzerhandbuch von xt:Commerce Veyton.
  • Image Processing: Über diesen Button kann das Image Processing nachträglich durchgeführt werden. Dies kann hilfreich sein, falls z.B. im Adminbereich (Inhalte -> Media -> Media Gallery -> ad_slideshow) nicht alle Vorschaubilder korrekt angezeigt werden.


Praktisches Vorgehen: Laden Sie zuerst über den "Datei Upload" oder "Datei Import" alle Bilder, die Sie für Ihre Slideshows nutzen möchten, in den Shop. Später können Sie die Bilder dann beliebig den Slideshows zuordnen.

2. Anlegen von Slideshows

Das Menü zum Anlegen von Slideshows kann wie folgt aufgerufen werden:
Shop -> ad Slideshow -> ad Slideshow -> "Neu"
Den "Neu-Button" neu Button finden Sie oben links.
Jetzt wird das Fenster zum Konfigurieren der Slideshow angezeigt:

ad Slideshow Veyton Slideshow Plugin - Anlegen von Slideshows
Ansicht: Konfiguration einer Slideshow.

  • Geben Sie mindestens die gewünschte Breite und Höhe für die Slideshow an und achten Sie darauf, dass das Feld "Staus" aktiv ist.
  • Wählen Sie im Feld "Effekt" "Standard" aus, damit der in den globalen Plugin-Einstellungen gewählte Effekt genommen wird. Oder wählen Sie einen beliebigen anderen Effekt aus.
    Die weiteren Angaben sind optional und müssen nicht genutzt werden.
    Weitere Informationen zu den Globalen-Konfigurationsmöglichkeiten finden Sie auf Seite 6 dieser Anleitung.
  • Klicken Sie nun auf den Button "Speichern" am unteren Rand.
  • Nachdem Sie gespeichert haben, können Sie die gerade erstellte Slideshow erneut aufrufen und nun auch den dazu gehörenden Hookpoint einsehen:

Hookpoint ad Slideshow
Ansicht: Hookpoint für die erste Slideshow

Der oben gezeigte Hookpoint ist einmalig und gehört nur zu dieser Slideshow! Damit kann die Slideshow überall im Template individuell platziert werden.

Merke: Auf diesem Wege können beliebig viele Slideshows erstellt und die bereits bestehenden verwaltet werden.

3. Bild einer Slideshow zuordnen

Als nächstes müssen die gewünschten Bilder der Slideshow zugeordnet werden.
Das Menü zum Verwalten der Bilder für eine Slideshow, kann wie folgt aufgerufen werden:
Shop -> ad Slideshow -> ad Bilder -> "Neu"
Den "Neu-Button" neu Button finden Sie oben links.
Jetzt wird das Fenster zum Verwalten eines Bildes angezeigt:

ad Slideshow Veyton Slideshow Plugin - Bild
Ansicht: Einstellungsmöglichkeiten direkt bei einem Bild für die Slideshow.

  • Wählen über das Dropdown "Slideshow Nummer", die Nummer der Slideshow aus, in der das Bild angezeigt werden soll.
  • Wählen Sie über das Dropdown "Bild", das Bild aus, dass angezeigt werden soll.
  • Vergeben Sie optional einen Bildnamen und Link in dem Feld "Name", "Link" für das Bild.
    Merke: Damit der Name des Bildes angezeigt werden kann, muss das Feld "Titel" in der jeweiligen Slideshow auf aktiv gesetzt sein.


4. Slideshow einem Artikel zuordnen

Nun haben Sie erfolgreich in Schritt 1 bis 3 die Bilder für eine Slideshow hochgeladen, eine Slideshow erstellt und dieser Bilder zugeordnet.

Das Menü zum Anlegen von Slideshows kann wie folgt aufgerufen werden:
Shop -> Artikel -> ad Slideshow Icon

ad Slideshow Veyton Slideshow Plugin - Artikel zuordnen
Ansicht: Slideshow einem Produkt zuordnen.

Alternativ dazu, befindet sich der Button auch direkt am Ende jeder Produktseite.

Jetzt wird das Fenster zum Konfigurieren der Slideshow angezeigt:
ad Slideshow Veyton Slideshow Plugin - Artikel zuordnen
Ansicht: Einstellungen für die Slideshow direkt bei einem Artikel.

  • Bei "Slideshow Nummer" wählen Sie die Slideshow aus, die für den aktuellen Artikel angezeigt werden soll.
  • Aktivieren Sie "Standard Hookpoint", wenn die Slideshow an dem Standard Hookpoint für Bilder auf der Produktseite angezeigt werden soll.
  • Aktivieren Sie "Eigener Hookpoint", wenn Sie die Slideshow auf dem eigens eingefügten Hookpoint
    {hook key=ad_slideshow_product_img} in Ihrem Template anzeigen möchten.
    Merke: Dieser Hookpoint muss eigenständig in das aktive Template eingefügt werden!
    Mehr dazu siehe Seite: 4.


5. Slideshow in das Template integrieren

Es ist möglich, jede Slideshow an beliebiger Stelle in das Template zu integrieren.

Suchen Sie sich den Hookpoint der Slideshow heraus, die Sie in Ihr Template einbinden möchten. Gehen Sie dafür wie folgt vor:
Shop -> ad Slideshow -> ad Slideshow
Nun wählen Sie die gewünschte Slideshow mit einem Doppelklick oder dem "Bearbeiten"-Button aus:
ad Slideshow Veyton Slideshow Plugin - Hookpoint ad Slideshow
Ansicht: Konfiguration einer Slideshow.

und kopieren den Teil aus dem mit dem roten Pfeil markierten Feld:
{hook key=ad_slideshow_id1}
Diesen Hookpoint fügen Sie nun an beliebiger Stelle in Ihrem Template ein, um die Slideshow dort anzuzeigen.


Hookpoints der Slideshow:

Das Pluginsystem von xt:Commerce Veyton nutzt diverse Hookpoints, die überall im Code des Shops verteilt wurden. So lassen sich Änderungen direkt in den Shop implementieren, ohne auch nur eine Zeile Code direkt ändern zu müssen.
Stattdessen wird der Hookpoint z.B.: {hook key=ad_slideshow_product_img} für die Produkt-Slideshows an beliebiger Stelle in das Template (product.html) des Shopsystems integriert, um die Slideshow dort anzuzeigen. Das Slideshow-Plugin "ad Slideshow" nutzt die selbe Technik und so können alle Slideshows, die erstellt wurden, an beliebiger Stelle im Template angezeigt werden. Die Produkt-Slideshows, die direkt einem Produkt zugeordnet werden, lassen sich wahlweise über den bereits existierenden Standard Hookpoint vom Shop für Bilder {hook key=products_images_tpl} anzeigen, oder aber auch über einen eigenen Hookpoint vom Plugin "ad Slideshow": {hook key=ad_slideshow_product_img}
ad Slideshow Veyton Slideshow Plugin - Slideshow Artikel zuordnen
Ansicht: Einstellungen für die Slideshow direkt bei einem Artikel.

  • Standard Hookpoint: {hook key=ad_slideshow_product_img}
    Dieser Hookpoint befindet sich im Standard Template von xt:Commerce Veyton und ist bereits integriert: /templates/xt_grid/xtCore/pages/product/product.html
    Wird der Standard Hookpoint verwendet und aktiviert, wird die Slideshow automatisch dort angezeigt.
  • Eigener Hookpoint: Dieser Hookpoint befindet sich nicht im Template und kann bei Bedarf selbst in das Template integriert werden. Der Vorteil dabei ist, dass der eigene Hookpoint ganz individuell an jeder Stelle in das product.html Template integriert werden kann und sich die Slideshow somit perfekt in das eigene Template integrieren lässt.

Achtung: Mindestens ein Hookpoint der beiden muss aktiviert werden, sonst wird im Shop keine Produktslideshow angezeigt!

Downloads

Hinweis: Um das Plugin in Ihrem Shop nutzen zu können, benötigen Sie eine gültige Lizenz oder Testlizenz.

Datei Dateigröße
ad_slideshow_v1.0.4.zip

ad_slideshow_v1.0.4.zip

0.64 MB
Plugin-Anleitung-ad_slideshow.pdf

Plugin-Anleitung-ad_slideshow.pdf

0.67 MB

Dazu passende Artikel

Warenkorb teilen - Produktliste weitergeben

Warenkorb teilen - Produktliste weitergeben

Mit einem Klick den Warenkorb veröffentlichen und als Link verfügbar machen.

EUR 149,00 *

zzgl. 19 % UStVersandkostenfrei

zum Plugin

Kategorien präsentieren

Kategorien präsentieren

Das Plugin zeigt die gewählten Kategorien als Karussell Effekt an.

EUR 99,00 *

zzgl. 19 % UStVersandkostenfrei

zum Plugin

Produkte präsentieren

Produkte präsentieren

Das Plugin zeigt die gewählten Produkte in einem Karussell Effekt.

EUR 99,00 *

zzgl. 19 % UStVersandkostenfrei

zum Plugin

Weiter einkaufen Button

Weiter einkaufen Button

Weiter einkaufen Button, damit Ihre Kunden direkt aus dem Warenkorb weitere Produkte kaufen können.

EUR 49,00 *

zzgl. 19 % UStVersandkostenfrei

zum Plugin