Mein Test Shop soll schöner werden

Schritt für Schritt Anleitung für deinen JTL Shop

Auf meiner Sub-Domain jtlshop3.schaefer-it-consultant.de habe ich einen Muster Shop mit JTL-Shop 3 für Testzwecke hoch gezogen. Voll funktionsfähig und mit Musterartikeln bestimmt kann ich hier die Prozesse des Online-Versandhandels nachspielen. Jetzt soll dieser Shop etwas hübscher werden. Wie das Design später aussieht, weiß ich noch nicht. Hier die Vorbereitungen für die Designanpassungen.

Bis jetzt verwende ich das Standard-Template von JTL-Shop 3 wie im Screenshot unten dargestellt. Als Theme verwende ich Green Fields, da es am besten zum Grünen Logo von contoso der Microsoft Musterfirma passt. Dieses Template soll nun an meine Bedürfnisse angepasst werden.

Im ersten Schritt sichere ich mir die Dateien vom Webspace auf den lokale Festplatte. Dazu verwende ich FileZilla. Die entsprechenden Dateien finde ich im Ordner /templates/JTL-Shop3-Tiny/themes. Hier lade ich den gesamten Ordner /green_fields herunter.

Nachdem der Ordner gesichert ist, kopiere ich den gesamten Inhalt in den Ordner templates/JTL-Shop3-Tiny/themes/custom. Die Datei theme.sample.css kann ich danach löschen.

Jetzt kann ich im Backend von JTL Shop 3 im Menüpunkt Darstellung Template von Green Field auf Benutzerdefiniert umstellen. Dazu Wähle ich den entsprechenden Eintrag im Auswahlfeld Standard-Theme und klicke anschließen auf den Button „Einstellungen speichern“.

Fürs erste sind keine Änderungen zu sehen.

Im nächsten Schritt will ich diverse Kategorien auf der Startseite angezeigt bekommen. Dazu muss die Datei /templates/JTL-Shop3-Tiny/tpl_inc/seite_startseite.tpl nach /templates/JTL-Shop3-Tiny/tpl_inc/seite_startseite_custom.tpl kopiert werden.

An der richtigen Stelle muss ich jetzt den Code für die Anzeige der Kategorien einfügen. Dazu öffne ich die lokale Kopie mit einem Editor wie Notepad++ aus dem Downloadverzeichnis. Ab Zeile 14 füge ich folgenden Text ein:

{get_category_list cKatAttrib='frontpage' cAssign='oCategory_arr'}
{if $oCategory_arr}
<div class="custom_content">
{foreach name=Kategorieliste from=$oCategory_arr item=oCategory nLimit=2}
<div id="category_c">
<a id="category_image" href="{$oCategory->cURL}">
<img src="{$oCategory->cBildURL}" alt="" /><br />
<p id="category_text">{$oCategory->cName}</p>
</a>
</div>
{/foreach}
</div>
{/if}

Damit die Kategorien nebeneinander erscheinen muss ich die entsprechende css-Datei noch um die IDs category_c, category_image und category_text erweitern. Hierbei handelt es sich um die theme.css die sich im Ordner custom befindet.

Die css-Anpassungen habe ich sehr rudimentär gehalten.

#category_c {
float: left;
width: 25%;
}

#category_image {
text-align: center;
}

#category_text {
text-align: center;
}

Das war es schon. Beide Dateien müssen jetzt nur noch hochgeladen werden. Die angepasste Datei seite_startseite_custom.tpl kommt in den Ordner /templates/JTL-Shop3-Tiny/tpl_inc/ und die theme.css wird wieder nach/templates/JTL-Shop3-Tiny/themes/custom kopiert. Das Endergebnis sollte dann so aussehen:

Damit die Kategorien auf der Startseite auch angezeigt werden muss für jede Kategorie das Kategorieattribut mit dem Namen frontpage (Groß- und Kleinschreibung beachten) mit irgendeinem Wert z.B. 1 hinterlegt werden.

Viel Spaß beim Nachbauen

Michael Schäfer