Content Slider

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.

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.

Modulkonfiguration

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

In der Content-Slider Modulverwaltung gibt es folgende Einstellungsmöglichkeiten:

• Aktivierung Soll das Modul aktiv sein?

Neue Slider

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

• Slider: 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.
• Link: Soll eine Kategorie oder ein Artikel verlinkt werden?

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?

Ebenfalls kann ein Titel, Button und Text eingegeben werden. Die Farbe des Textes kann definiert werden, sowie die Farbe des Hintergrundes.

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. Der Titel, Button und Text, welchen wir zuvor definiert haben, werden nun ebenfalls angezeigt.

Installation

Systemanforderungen

Um das Content-Slider Modul einsetzen zu können, ist mindestens ein PepperShop v.3.0 Standard oder Professional 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 FTP¹ 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

Weitere Hilfe

Benötigen Sie weitere Unterstützung? PepperShop stellt Ihnen unterschiedliche Möglichkeiten zur Verfügung.

• Oft hilft ein Klick in der Administration oben rechts auf das Fragezeichen Icon. Hier erhalten Sie direkt Hilfe zum betroffenen Thema.
• Diverse Antworten finden Sie in den FAQ. Diese sind ebenfalls in der Shopadministration über Hilfe&News -> Hilfearchiv aufrufbar. Oder über unsere Homepage https://www.peppershop.com/de/services/support/faq/
• In der PepperShop Academy https://www.peppershop.com/de/services/academy/ können Sie ganz einfach und bequem diverse kostenlose Video-Anleitungen finden.
• Gerne stehen wir Ihnen auch per Mail oder Telefon zur Verfügung (CHF 185./h) support@glarotech.ch oder +41 71 923 08 58