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….

Schritt 1 – Erstellen der Bilder

Quasi als Warm-up bringe ich die Bilder, welche ich mir vorher über https://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.

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.

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.

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…“

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

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

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.

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.

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

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.

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“.

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

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“.

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.

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

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

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.

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.

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.

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