evoSLIDER

Modulbeschreibung

Mit dem evoSLIDER Modul ist es endlich möglich, schnell und einfach Slider für Ihren OXID eShop zu erstellen und zu verwalten.

Sie können beliebig viele individuelle Slider erstellen und diese auf der Startseite oder auf jeder anderen Unterseite einbinden.

Das Anlegen eines Sliders erfolgt in wenigen Minuten: Sie wählen einfach die Bilder aus, die angezeigt werden sollen und verlinken gegebenenfalls noch auf einen bestimmten Artikel, eine Kategorie oder eine URL. Mit dem eingebauten WYSIWYG-Editor können Sie jedem Slide noch einen Text beifügen. Jetzt müssen Sie nur noch eine Animation wählen und schon ist es geschafft!

Bei der Entwicklung haben wir besonderen Wert auf eine intuitive und einfache Bedienung gelegt. Sie können beispielsweise die Reihenfolge der Bilder einfach per Drag & Drop festlegen. Standardmäßig wird ein von uns voreingestellter Slider mitgeliefert, an den Sie sich beim Anlegen orientieren können.

Das Einbinden des Sliders auf der Startseite erfolgt mit nur einem Klick in den Slider-Einstellungen. Falls Sie beispielsweise auf einer Kategorieseite einen Slider einbauen möchten, müssen Sie den entsprechenden Code im Template einbauen oder bei Verwendung von OXID PE/EE mit Hilfe des evoEDIT Moduls über das VisualCMS.

Das Modul ist erhältlich auf https://www.digidesk.de/produkte/evoslider/

Systemvoraussetzungen

PHP-Version OXID 4 & 5

  • PHP 5.6

PHP-Version OXID 6

  • PHP 7.0 (OXID 6.0.x)

  • PHP 7.1 (OXID 6.1.x)

  • PHP 7.2 - 7.4 (OXID 6.2.x - 6.3.x)

  • PHP 8.0 (OXID 6.3.x - 6.4.x)

  • PHP 8.1 (OXID 6.5.x)

Webserver-Konfiguration

Kompatibel mit den Themes

  • Flow

  • Wave

  • RoxIVE

Kompatibel mit den OXID Versionen

  • OXID CE/PE 4.9.x bis 4.10.x

  • OXID EE 5.2.x bis 5.3.x

  • OXID CE/PE/EE 6.0.x bis 6.5.x

Installation

Ab OXID 6

  1. Falls noch nicht geschehen, laden Sie bitte zunächst das digidesk Basis-Modul herunter und installieren Sie es gemäß der enthaltenen Installationsanleitung.

    1. Sie erhalten dieses unter: https://www.digidesk.de/produkte/basis-modul

  2. Für dieses Modul erstellen Sie nun einen weiteren Unterordner "evoslider" im Ordner "packages/digidesk", in den die heruntergeladene Zip-Datei entpackt wird.

  3. Führen Sie anschließend folgenden Befehl aus dem Hauptverzeichnis des Shopsystems aus: composer require digidesk/evoslider

  4. Nun kann das Modul im OXID eShop Admin aktiviert werden

  5. Ggf. Tmp-Verzeichnis leeren und Views neu generieren

Bis OXID 5.3.x/4.10.x

  1. Falls noch nicht geschehen, laden Sie bitte zunächst das digidesk Basis-Modul herunter und installieren Sie es gemäß der enthaltenen Installationsanleitung. Sie erhalten dieses unter:https://www.digidesk.de/produkte/basis-modul

  2. Fügen Sie den Inhalt des Ordnerverzeichnisses des Moduls "modules/digidesk/" via FTP/SFTP unter dem gleichnamigen Pfad in Ihren Shop ein

  3. Aktivieren Sie das Modul im OXID eShop Admin

  4. Ggf. Tmp-Verzeichnis leeren und Views neu generieren

  5. Bitte fahren Sie nun mit der Einrichtung des Moduls fort

Update

Ab OXID 6

  1. Entpacken Sie die neue Modulversion in den Ordner "packages/digidesk/evoslider"

  2. Deaktivieren Sie das Modul im OXID eShop Admin

  3. Führen Sie anschließend folgenden Befehl aus dem Hauptverzeichnis des Shopsystems aus: composer update digidesk/evoslider Die Frage, ob die Dateien des Pakets überschrieben werden sollen, bestätigen Sie bitte mit "Y".

  4. Aktivieren Sie das Modul im OXID eShop Admin

  5. Ggf. Tmp-Verzeichnis leeren und Views neu generieren

Bis OXID 5.3.x/4.10.x

  1. Bitte aktualisieren Sie das Basis-Modul gemäß der darin enthaltenen Installationsanleitung.

  2. Deaktivieren Sie dieses Modul im OXID eShop Admin.

  3. Fügen Sie den Inhalt des Ordners "modules/digidesk/" via FTP/SFTP unter dem gleichnamigen Pfad in Ihren Shop ein und überschreiben Sie dabei die vorhandenen Dateien des Moduls.

  4. Aktivieren Sie dieses Modul im OXID eShop Admin.

  5. Ggf. Tmp-Verzeichnis leeren und Views neu generieren.

Funktionsbeschreibung

Slider erstellen

  1. Auf die graue Schaltfläche "Slider hinzufügen" klicken

  2. Es öffnet sich ein Fenster mit geöffneten Reiter "Allgemeine Einstellungen"

  3. Hier können Sie Informationen in das Formular eintragen (Name, Animation usw.)

  4. Mit der Einstellung "Promoslider überschreiben" legen Sie fest, ob der neue Slider den Standard Promoslider überschreiben soll (meist der Slider auf der Startseite)

  6. Wechseln Sie zu "Designeinstellungen" um noch kleinere Änderungen vorzunehmen

  7. Zum Beispiel können Sie einstellen, ob der Slider auf bestimmten Bildschirmgrößen deaktiviert wird

  8. Anschließend auf "Speichern" klicken

Slides erstellen

  1. Mit der Maus über einen Slider fahren und das Bearbeitungs-Symbol (Stift-Symbol) klicken

  2. Auf die graue Schaltfläche "Slide hinzufügen" klicken

  3. Je nachdem welchen Slider-Typ Sie gewählt haben, können weitere Informationen zum Slide in das Formular eintragen werden. (siehe: Bild-Slider oder Artikel-Slider)

  4. Nachdem Sie die Einstellungen für einen Slide gemacht haben, klicken Sie auf den Button "Speichern".

Bild-Slider

Wenn Sie als Slide-Typ "Bild-Slider" ausgewählt haben, haben Sie im Reiter "Allgemeine Einstellungen" die folgenden Möglichkeiten um den Slide zu Konfigurieren:

  • Immer Aktiv / Aktiv von .. bis: Hiermit können Sie steuern, ob der Slide im Frontend ausgegeben wird oder nicht bzw. in welchem Zeitraum der Slide autom. ausgegeben und wieder ausgeblendet wird

  • Name: Dient lediglich zur Unterscheidung der Slides für das Backend

  • Hintergrundbild: Wählen Sie das Bild für den Slider aus der Mediathek oder laden Sie ein neues Bild hoch

  • Anzeigeart: Definiert, wie das hochgeladene Bild angezeigt werden soll.

    • Bei "Volle Breite" wird die volle Breite des Bildes im Slide ausgegeben und das Bild ggf. unten abgeschnitten und hoch- oder runterskaliert um die volle Breite des Sliders auszufüllen.

    • Bei "Volle Höhe" wird die volle Höhe des hochgeladenen Bildes im Slider ausgegeben und das Bild dazu ggf. hoch- oder runterskaliert um die volle Höhe des Bildes im Slider anzeigen zu können.

  • Alt-Attribut / Titel-Attribut: Alt-/Titel-Attribut für die Verlinkung bzw. das Bild

  • Hintergrundfarbe: Definiert eine Hintergrundfarbe hinter dem Bild. Sofern das hochgeladene Bild den vollen Slider-Bereich ausfüllt, ist diese Hintergrundfarbe nicht sichtbar.

  • Verlinkung: Wählen Sie wie das Bild verlinkt werden soll:

    • Artikel: Nach der Auswahl dieses Punktes erscheint ein Suchfeld unter dem Auswahlfeld in dem Sie nach einem Artikel auf Ihrem Shop suchen können. Bei einem Klick auf den Slide wird dann auf die Detailseite des ausgewählten Artikels verlinkt

    • Kategorie: Ähnlich wie "Artikel", nur mit Kategorien und Verlinkung auf die jeweilige Kategorieseite

    • Hersteller: Ähnlich wie "Kategorie", nur mit Herstellern

    • URL: Nach der Auswahl dieses Punktes erscheint ein Textfeld unter dem Auswahlfeld in dem Sie die interne oder externe URL auf die verlinkt werden soll eintragen können. Außerdem erscheint eine Checkbox, mit der Sie die URL in einem neuen Fenster öffnen können, z.B. bei externen Verlinkungen.

Im Reiter "Videoeinstellungen" finden Sie die EInstellungsmöglichkeiten, wenn Sie statt einem Bild ein Video in dem Slide anzeigen wollen. Es können sowohl Bild- als auch Video-Slides kombiniert in einem Bild-Slider ausgegeben werden.

  • Video: Wählen Sie hier, ob sie ein Youtube, Vimeo oder lokales MP4 Video ausgeben wollen, oder kein Video.

  • Video URL: Wenn Sie ein Video ausgeben lassen wollen, geben Sie hier die jeweilige URL zu dem Video ein:

    • Youtube: Video URL https://www.youtube.com/watch?v=XXXXXXXXXXX oder nur die Video ID XXXXXXXXXXX

    • Vimeo: Video URL https://vimeo.com/XXXXXXXXX oder nur die Video ID XXXXXXXXX

    • Lokales MP4 Video: URL https://video.meinshop.de/video.mp4 oder Pfad ausgehend vom out-Ordner /videos/video.mp4

  • Video am Ende von Vorn beginnen lassen: Wenn aktiviert, startet das Video autom. von Vorn, wenn es durchgelaufen ist

  • Video in einer Lightbox öffnen: Wenn aktiviert, startet das Video erst bei einem Klick auf den Slide und wird in einer Lightbox geöffnet. Vor allem Nützlich bei Video-Slidern die auf Landingpages eingebunden werden.

  • Lightboxbreite, -höhe und Lightbox Hintergrund: Geben Sie hier die Breite, Höhe und die Durchsichtigkeit des Lightbox Hintergrundes an

Im Reiter "Inhalt" haben Sie die Möglichkeit Ihrem Bild-Slide einen Caption-Text mittels WYSIWYG-Editor oder eine Call-To-Action mit Button hinzuzufügen. Dazu haben Sie die folgenden Einstellungsmöglichkeiten:

  • Position: Geben Sie an, wie der Inhalt auf dem Bild positioniert werden soll, relativ zur Größe des Sliders

  • Typ: Wählen Sie hier den Inhaltstyp aus. Je nach gewähltem Inhaltstyp haben Sie unterschiedliche Einstellungsmöglichkeiten

    • Text: Caption-Text mittels WYSIWYG-Editor

    • Aktion: Call-To-Action mit Überschrift, WYSIWYG-Editor Text und CTA-Button

  • Abstand: Geben Sie hier bei bedarf einen zusätzlichen Innenabstand Ihres Inhalts relativ zur Größe des Sliders an

Artikel-Slider

Wenn Sie als Slide-Typ "Artikel-Slider" ausgewählt haben, haben Sie im Reiter "Allgemeine Einstellungen" die folgenden Möglichkeiten um den Slide zu Konfigurieren:

  • Immer Aktiv / Aktiv von .. bis: Hiermit können Sie steuern, ob der Slide im Frontend ausgegeben wird oder nicht bzw. in welchem Zeitraum der Slide autom. ausgegeben und wieder ausgeblendet wird

  • Verlinkung: Wählen Sie ob sie einen bestimmten Shop-Artikel oder einen zufälligen Artikel aus einer Aktion ausgeben wollen

  • Artikel/Aktion: Suchen Sie hier nach dem Artikel über den Titel oder die Artikelnummer oder nach einer Aktion anhand des Titels

Slides sortieren

Integration

Als Promoslider

Mit der Einstellung "Promoslider überschreiben" legen sie fest, ob der neue Slider den Standard Promoslider überschreiben soll (meist der Slider auf der Startseite)

Im Visual Editor / Visual CMS

Das Modul beinhaltet ein Widget für den Visual Editor bzw. Visual CMS, damit Sie die erstellten Slider mit wenig Klicks an der gewünschten Stelle platzieren können.

Drücken Sie zunächst auf das "Plus-Symbol". Es öffnet sich das Fenster "Widget", wo Sie unterschiedliche Kategorien aussuchen können. Klicken Sie auf "Slider" und dort können Sie weitere Einstellungen vornehmen.

Selbstverständlich ist es auch möglich, dieses VisualCMS Widget mit Hilfe des evoEDIT Moduls in Kategorie- oder Artikelbeschreibungen zu verwenden.

Theme-Integration

Slider können auch direkt im Theme per Smarty-Tag eingebunden werden:

[{ddslider ident="myslider"}]

Alternativ kann auch der als Promoslider markierte Slider eingebunden werden:

[{ddslider promoslider=1}]

Import der alten Slider-Daten beim Umstieg auf die Version 3.x.x

Ab der Version 3.0.0 des Moduls ist keine Kompatibilität mehr zu der vorherigen Versionen gegeben. Beim Update wird ein Backup der alten Tabelle ddsliderslides mit dem Namen ddsliderslides_backup angelegt. Falls Sie die Daten der Backup-Tabelle ddsliderslides weiter nutzen möchten, können Sie versuchen diese mit unserem Import-Skript import.php im Verzeichnis bin zu importieren. Wechseln Sie bitte in der console in das Verzeichnis modules/digidesk/dd_slider/bin und führen das Skript mit dem Befehl php import.php aus. Führen Sie bitte das Skript mit der php-Version aus, die Sie auch im Shop im Einsatz haben.

Die Bedienung des Skripts ist selbsterklärend. Sie haben die Möglichkeit die alten Daten von der Backup-Tabelle ddsliderslides_backup in die neue Tabelle ddsliderslides zu importieren oder bei Bedarf die neue Tabelle ddsliderslides zu leeren.

Es werden eventuell mehr Slider-Slides für die einzelnen Sprachen importiert als Sie angelegt haben. Dies könnte dadurch verursacht worden sein, dass das Sprachhandling in den vorherigen Versionen nicht ganz korrekt funktionierte. Sie können die überflüssigen Slider-Slides im Backend löschen. Mit der 3.0er Version werden in einer ausgewählten Sprache nur die Slider-Slides geladen, die auch in dieser Sprache angelegt wurden.

Die Nutzung des Import-Skripts geschieht auf eigene Gefahr, wir können hier leider keinen kostenlosen Support anbieten.

Hilfe & Support

Haben Sie Fragen oder benötigen Sie Hilfe bei der Installation? Gerne bieten wir Ihnen auch einen Installationsservice an. Kontaktieren Sie uns einfach über eine der unten stehenden Adressen.

PreviousevoMENUNextCache Modul

Last updated