Mein Testshop soll schöner werden – Teil 2

In Teil 1 meiner Designanpassungen an der JTL-Shop 3 Test und Simulationsumgebung habe ich beschrieben wie die Kategorien auf die Startseite gelangen. In diesem Teil zeige ich Ihnen, wie ich die Slide-Show auf der Startseite eingerichtet habe.

Trotz der wenigen Anpassungen sieht das Template schon viel freundlicher aus, wie man im Screenshot unten erkennen kann. Für das Ganze habe ich an Programmen Gimp 2.8.10, Inkscape 0.48 und Notepad++ v6.6.7 verwendet. Für den Up- und Download der Dateien verwende ich natürlich FileZilla. Also mache ich mich ans Werk….

image001

Schritt 1 – Erstellen der Bilder

Quasi als Warm-up bringe ich die Bilder, welche ich mir vorher über http://www.pixelio.de besorgt habe in Form. Also die zu bearbeitende Bilddatei im Explorer mit der rechten Maustaste anklicken und im Kontext Menü einfach auf „Mit GIMP öffnen“ klicken.

image003

Das Bild ist mit 1280 x 960 Pixel etwas zu groß und muss auf eine Breite von 980 Pixel gebracht werden. Dazu klicke ich in Gimp auf den Menüpunkt „Bild“ und wähle den Befehl „Bild skalieren“ aus.

image005

Im Fenster Bild skalieren trage ich unter Bildgröße Breite 980 ein. Die Höhe wird dann automatisch angepasst. Stimmt alles kann ich den Vorgang mit „Skalieren“ abschließen.

image007

Als nächstes muss ich das Bild in Form bringen. Die Höhe der einzelnen Slider soll maximal 400 Pixel betragen. Also muss ich von dem Bild etwas abschneiden. Bei diesem Bild habe ich beschlossen nur den oberen Teil zu verwenden. Ich lege mir also vier Hilfslinien an horizontal bei 0 und 400 Pixel. Vertikal bei 0 und 980 Pixel. Zum Anlegen der Hilfslinien klicke ich im Menü auf „Bild -> Hilfslinien -> Neue Hilfslinie…“

image008

Das Fenster „Neue Hilfslinie“ ist ziemlich selbsterklärend. Mit einem Klick auf OK, schließe ich den Vorgang ab.

image010

Habe ich meine Hilfslinien angelegt, kann ich mit dem rechteckigen Auswahl Werkzeug den oberen Bereich markieren.

image011

Anschließend muss ich nur noch im Menü unter Bild den Befehl „Auf Auswahl zuschneiden“ auswählen und ich habe mein Bild auf die Richtige Größe gebracht.

image012

Jetzt muss ich nur noch das überarbeitete Bild über den Befehl „Exportieren als…“ im Menüpunkt Datei abspeichern. Bitte in Gimp aufpassen, mit Speichern bzw. Speichern unter wird eine Datei im *.xcf Format angelegt. Ich benötige hier aber das JPG oder PNG Format.

image014

Im Fenster Bild exportieren einen Dateinamen vergeben und anschließend den Vorgang mit einem Klick auf den Button „Exportieren“ abschließen.

image016

Schritt 2 – Einrichten der Slide-Show

Jetzt habe ich die Bilder auf meiner Festplatte, aber immer noch keine Slide-Show im Mustershop. Also melde ich mich jetzt im Backend von JTL-Shop 3 an. Im Backend finde ich unter dem Menüpunkt Darstellung den Eintrag Slider. Und diesen klicke ich jetzt an.

image018

Natürlich ist bei mir jetzt schon ein Eintrag unter Slider mit dem Titel Startseite vorhanden. Um einen neuen Eintrag hinzuzufügen klicke ich auf den Button „Slider hinzufügen“.

image020

Als Name für die Slide-Show habe ich Startseite vergeben und folgende Einstellungen vorgenommen:

Allgemein
Interner Name Startseite
Status Aktiviert
Zufälliger Start Nein
Pause bei Hover Ja
Darstellung
Navigation Anzeigen
Thumbnail Navigation Aktiviert
Navigation Richtung Anzeigen
Effekte Zufällige Effekte deaktiviert und fade ausgewählt
Theme Light
Animation Geschwindigkeit (in ms) 500
Pause Zeit (in ms) 3000
Anzeigeoptionen
Sprache Alle
Kundengruppe Alle
Seitentyp Startseite

image022

An den Einstellungen des Sliders kann man ruhig etwas rumspielen, bis man die für sich beste Konfiguration gefunden hat. Mit einem Klick auf den Button „Speichern“ wird der neue Slider angelegt.

Ab hier kann ich meine vorbereiteten Bilder für die Slide-Show hinzufügen. Dazu klicke ich einfach auf rechts auf den Button „Slides“.

image025

Im Fenster Slider sieht man schon die beiden Slides, während des Ausprobierens hinzugefügt habe. Mit einem Klick auf den Button „Bild auswählen“ kann ich ein weiteres Bild meiner Slide-Show hinzufügen.

image027

Über den Button „Hochladen“ kann ich jetzt ein neue Bild auf den Webserver laden.

image029

Mit einem Doppelklick auf die neue Datei füge ich das neue Bild der Slide-Show hinzu.

image031

Leider erscheint nur sehr kurz ein grün hinterlegter Hinweis, dass ein Bild ausgewählt wurde. Ich vergebe nun noch einen Titel, trage hinter Text eine Beschreibung ein und hinterlege den Link zur entsprechenden Kategorie. Mit einem Klick auf den Button „Hinzufügen“ wird das neue Slider-Bild angelegt.

image033

Schritt 3 – Anpassen der inc_extention.tpl

Leider gibt es in JTL-Shop 3 hier einen kleinen Bug. Klicke ich auf eines der drei Slider-Bilder wird der hier hinterlegte Link in einem neuen Fenster geöffnet. Das will ich aber so nicht haben. Darum muss ich mir die dafür verantwortliche inc_extension.tpl aus dem Ordner templates/JTL-Shop3-Tiny/tpl_inc auf die lokale Festplatte laden. Ich öffne die Datei in Notepad++ und finde in der Zeile 76 die Ursache dafür. Der Eintrag target=“_blank“ am Ende der Zeile muss hier einfach gelöscht werden.

image035

Die überarbeitete Datei speichere ich als inc_extension_custom.tpl ab und lade diese dann hoch in das Verzeichnis templates/JTL-Shop3-Tiny/tpl_inc. Das war es schon.

image037

Fazit:

Mit etwas technischem Geschick und der gezielten Suche im JTL-Software Forum hatte ich sehr schnell alles beisammen, was ich für die Anpassungen an meinem JTL Mustershop benötigte. Viel Spaß beim Nachbauen wünscht euch

Michael Schäfer

Ein Gedanke zu „Mein Testshop soll schöner werden – Teil 2“

  1. Hallo Herr Schäfer,
    ich habe JTL-Shop 4.04
    und möchte gerne meinen slider verändern so das die Bilder in der Mitte stehen und die schwarze balken weiter unten schieben so das das Bild nicht stört
    wo in welcher Zeile verändere ich das ?
    Ich arbeite mit Filezilla

    ich bedanke mich im Vorraus.

    mfg Nick

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.