Content Slider

Benötigte Lesezeit: 3 Minuten


Einleitung

Präsentieren Sie ganz einfach Artikel, verlinkte Bilder (z.B. Aktionen) oder direkt HTML-Code in einem modernen Slider.

Mit diesem externen PepperShop Modul, kann man auf der Startseite mit einem dynamischen Slider verschiedene Inhalte prominent platzieren. Dabei wird automatisch über alle anzuzeigenden Inhalte durch gescrollt. Kundenseitig wird JavaScript benötigt.

Modulinstallation

Nach dem Kopieren der Dateien kann man in die Shop-Administration gehen und dort ins Menü ‘externe PepperShop Module’ wechseln. Auf der linken Seite, bei den noch nicht installierten Modulen, sieht man nun das Content-Slider Modul aufgelistet. (siehe Grafik auf der folgenden Seite).

Nun muss das Content-Slider Modul angewählt werden und auf den ‘Installieren’ Button geklickt werden. Wenn die Installationsroutine ohne Probleme durchläuft, wird dies auf der darauf folgenden Seite kommuniziert. Das Modul ist nun fertig installiert. Wir klicken nun auf den Button ‘Zurück zur Modulverwaltung’ und dort ‘Zurück zur Moduladministration’. Wir sehen jetzt den Button für die Verwaltung des Content-Slider Moduls.

Abbildung 1: Das Content-Slider Modul wird aufgelistet (angezeigte Module können variieren)

Die Installation des Content-Slider Moduls ist nun abgeschlossen. Damit das Modul eingesetzt werden kann, muss das Modul nun noch an die spezifische Konfiguration des Shopbetreibers angepasst werden, siehe dazu das nächste Kapitel ‘Modulkonfiguration’, weiter unten.

Abbildung 2: Installierte Module

Modulkonfiguration

Zuerst geht man in die Content-Slider Modulverwaltung: Hauptmenü der Shop-Administration ‘Module’ > ‘Content-Slider’ (siehe Screenshot Ausschnitt weiter rechts).

Abbildung 3: Content-Slider Modul Konfigurationsdialog
In der Content-Slider Modulverwaltung gibt es folgende Einstellungsmöglichkeiten:

  • Aktivierung Soll das Modul aktiv sein?

Content-Slider Positionen

Hier definiert man die einzelnen Positionen (Bilder, Artikel oder HTML-Code).

  • Position: An welcher Stelle soll die Position erscheinen? (Zahl z.B.: 1)
  • Typ: Welche Art oder von welchem Typ ist die Position? Beim Ändern werden die Spalten Inhalt und Link entsprechend angepasst.

Inhalt:

  • Beim Typ Bild wird ein Uploader für die Bilddatei angezeigt. (Bildbreite: 945px)
  • Beim Typ HTML hat man hier ein grosses Feld für den HTML-Code zur Verfügung.
  • Beim Typ Artikel kann man im Feld nach mit Artikelnamen, oder Artikel-Nummer nach einem Artikel suchen. Im Feld steht nach der Auswahl die Artikel-ID.
  • Link: Dieses Feld wird nur bei Bildern sichtbar. Der Link wird beim Klicken aufs Bild aufgerufen.
  • Sprache: In welcher Sprache soll die Position sichtbar sein?
  • Aktiv von: Ab wann soll die Position sichtbar sein?
  • Aktiv bis: Wann soll die Position nicht mehr sichtbar sein?

Fortgeschrittene Konfiguration in CSS und Javascript (z.B. Geschwindigkeit):

Siehe Datei: {shop_verzeichnis}/shop/language/html_templates/content_slider.tpl.html

Wenn man des Javascripts mächtig ist, dann kann man mit den Optionen pause (Angabe in ms) und speed (Angabe in ms) für die Geschwindigkeiten des Slidens bestimmen.

Kundenseitige Darstellung im Webshop

Auf der Startseite unterhalb des Headers wird der Content-Slider bei aktiviertem Modul dargestellt. Es sollte darauf geachtet werden, dass die Bilder im richtigen Format hochgeladen werden.

Abbildung 4: Beispiel anhand eines neu instalierten Standardshops (Design kann variieren).

Als Beispiel sehen Sie hier den Artikel “Pfefferschote” als Inhalt des Content-Sliders definiert.Installation

Installation

Systemanforderungen

Um das Content-Slider Modul einsetzen zu können, ist mindestens ein PepperShop v.3.0 Professional oder Enterprise erforderlich.

Dateien kopieren und hochladen

Das Content-Slider Modul besteht aus einigen Dateien und zwei Verzeichnissen, die man in seinen installierten PepperShop kopieren muss. Dazu entpackt man zuerst das mitgelieferte ZIP oder TAR.GZ Archiv. Es sind folgende Dateien enthalten, hier mit ihren Zielverzeichnissen:

{shopdir}/shop/Admin/module/content_slider
{shopdir}/shop/module/content_slider/
{shopdir}/shop/resources/content_slider
{shopdir}/shop/language/html_templates/content_slider.tpl.html

Die Dateien lassen sich einfach via FTP1 oder SCP zum Webserver hochladen. Der Platzhalter {shopdir} steht dabei für das Shopverzeichnis auf dem Webserver, wo unter anderem die Datei index.php zusammen mit README.txt zu finden ist.

Dateiberechtigungen anpassen

Der folgende Abschnitt ist sehr wichtig. Das Modul wird nicht wie gewünscht funktionieren, wenn dieser Arbeitsschritt aufgrund der Server Konfiguration benötigt aber nicht (korrekt) ausgeführt wird.

Bei Verwendung von PHP auf UNIX/Linux als Server-Modul muss der Datei content_slider.tpl.html noch das Dateizugriffsrecht 666 zugewiesen werden, damit der Webserver darauf schreibenden Zugriff hat. Der Ordner resources/content_slider sollte vorhanden sein und die Rechte 777 aufweisen, falls dies nicht der Fall sein sollte bitte anpassen.

Anhang: Beispiele



  1. z.B. mit dem kostenlosen Programm FileZilla Client: http://filezilla-project.org/
🌶️
🔥
🌶️