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

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

      Leave a Comment

      JTL-WMS

      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