Auf meine 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.

image001

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.

image003

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.

image005

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

image007

Fürs erste sind keine Änderungen zu sehen.

image009

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.

image011

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}

image013

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.

image014

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;
}

image015

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:

image016

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.

image017

Viel Spaß beim Nachbauen

Michael Schäfer

  • 0/5
  • 0 ratings
0 ratingsX
Very bad!BadHmmmOkeGood!
0%0%0%0%0%
Related Posts

Leave a Comment

eBakery

Pin It on Pinterest

Share This
Diese Website nutzt Cookies für Analyse- und Sharing-Funktionen.
Weitere Informationen über cookies