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.

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

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.

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.

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 NameStartseite
StatusAktiviert
Zufälliger StartNein
Pause bei HoverJa
Darstellung 
NavigationAnzeigen
Thumbnail NavigationAktiviert
Navigation RichtungAnzeigen
EffekteZufällige Effekte deaktiviert und fade ausgewählt
ThemeLight
Animation Geschwindigkeit (in ms)500
Pause Zeit (in ms)3000
Anzeigeoptionen 
SpracheAlle
KundengruppeAlle
SeitentypStartseite

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

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.

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

Haben Sie Fragen oder brauchen ein individuelles Angebot? Zögern Sie nicht, uns zu kontaktieren.


    eBakery benötigt die Kontaktinformationen, die Sie uns zur Verfügung stellen, um Sie bezüglich unserer Produkte und Dienstleistungen zu kontaktieren. Sie können sich jederzeit von diesen Benachrichtigungen abmelden. Informationen zum Abbestellen sowie unsere Datenschutzpraktiken und unsere Verpflichtung zum Schutz Ihrer Privatsphäre finden Sie in unseren Datenschutzbestimmungen.*.

    • 0/5
    • 0 ratings
    0 ratingsX
    Very bad! Bad Hmmm Oke Good!
    0% 0% 0% 0% 0%

    Haben Sie Fragen oder brauchen ein individuelles Angebot? Zögern Sie nicht, uns zu kontaktieren.


      eBakery benötigt die Kontaktinformationen, die Sie uns zur Verfügung stellen, um Sie bezüglich unserer Produkte und Dienstleistungen zu kontaktieren. Sie können sich jederzeit von diesen Benachrichtigungen abmelden. Informationen zum Abbestellen sowie unsere Datenschutzpraktiken und unsere Verpflichtung zum Schutz Ihrer Privatsphäre finden Sie in unseren Datenschutzbestimmungen.*.

      Related Posts
      Comments
      • Nico Martella

        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

      Leave a Comment

      Hat dir der Artikel gefallen?

      Dann melde dich doch zu unserem Newsletter an!

      Neben unseren Blog Themen informieren wir dich darin regelmäßig zu neuen Features und Tutorials