Guide- Wie erstelle ich ein eigenes Template/Theme mit JTL 4.0+

  • Wenn Ihr uns das erste Mal besucht, lest euch bitte zuerst die Foren-Regeln durch.

holzpuppe

Sehr aktives Mitglied
14. Oktober 2011
1.294
105
Leipzig
#1
Ich möchte euch eine kleine Anleitung (relativ einfach) zur eigenen Erstellung eures Templates anbieten.
Leider ist derzeit die offizielle Anleitung für die meisten nicht wirklich nachvollziehbar bzw. verwirrend. (Stand: 10.12.2015)

Das Hauptaugenmerk bei dieser Anleitung liegt bei: Updatesicherheit!
JTL soll Updates machen können ohne das man danach stundenlang Dateien vergleichen, ändern und suchen muss. (Der Händler ist faul und hat andere Sachen zu tun! ;))

Als Grundlage nehmen wir hier das neue EVO-Template und verlinken einfach auf die entsprechenden Dateien, ohne diese selbst anzufassen.
Bevor hier wild auf das JTL4 geupdated wird macht euch bitte einen Testshop. Es ist dank JTL ja eine Community-Edition möglich (max. 500 Artikel).

Man braucht 2 Programme um alles einzustellen. Diese sollten aber schon bekannt sein. (Filezilla für den upload FTP und Notepad++ für Bearbeitung der css, xml, hmtl, php und co)

Wenn ihr alles frisch eingerichtet habt geht via FTP in eurem Testshop in den Ordner "templates". Da erstellt ihr einen neuen Ordner mit dem Namen "Templatename".
In diesen Ordner einen weiteren erstellen mit dem Namen "css".
Damit auch das Favicon und euer Background funktioniert, in den Ordner "Templatename" einen Ordner "themes" mit den Unterordnern "base", "smoerebroed" und "knaeckebrot" erstellen.
In "smoerebroed" und "knaeckebrot" jeweils euer background.jpg hochladen.
In "base" den Ordner "images" anlegen und da die favicon.ico und favicon.png ablegen. Man kann auch den ganzen Ordner "base" aus dem Evo/themes/ kopieren.

Es sollte dann so aussehen:
testshop.JPG

Für eine bessere Übersicht erstellt diese Ordnerstruktur auch auf eurem PC. Das ist dann auch einfacher mit dem Upload.
Da erstellt ihr eine neue Datei namens "template.xml" im Ordner "Templatename". Öffnet Diese mit dem Notepad++ und kopiert folgenden Text rein:

HTML:
<?xml version="1.0" encoding="utf-8" standalone="yes"?>
<Template>
    <Name>Templatename</Name>
    <Author>der Autor</Author>
    <URL>http://www.deineseite.de</URL>
    <Version>4.01</Version>
    <ShopVersion>401</ShopVersion>
    <Parent>Evo</Parent>
    <Preview>preview.png</Preview>
    <Description>Beschreibung deines Templates!</Description>
    <Settings>
        <Section Name="Allgemein" Key="general">
            <Setting Description="test" Key="test" Type="select" Value="N">
                <Option Value="Y">Ja</Option>
                <Option Value="N">Nein</Option>
            </Setting>
        </Section>
        <Section Name="Theme" Key="theme">
            <Setting Description="Knusperbrot" Key="knusperbrot" Type="select" Value="smoerebroed">
                <Option Value="smoerebroed">smoerebroed</Option>
            </Setting>
            <Setting Description="Theme" Key="theme_default" Type="select" Value="knaeckebrot">
                <Option Value="smoerebroed">smoere</Option>
                <Option Value="knaeckebrot">knaecke</Option>
            </Setting>
        </Section>
    </Settings>
        <Minify>
        <CSS Name="smoerebroed.css">
            <File Path="../Evo/themes/evo/bootstrap.css"/>
            <File Path="../Evo/themes/base/offcanvas-menu.css"/>
            <File Path="../Evo/themes/base/pnotify.custom.css"/>
            <File Path="../Evo/themes/base/jquery-slider.css"/>
            <File Path="../Evo/themes/evo/custom.css"/>
            <File Path="css/kross.css"/>
        </CSS>
        <CSS Name="knaeckebrot.css">
            <File Path="../Evo/themes/evo/bootstrap.css"/>
            <File Path="../Evo/themes/base/offcanvas-menu.css"/>
            <File Path="../Evo/themes/base/pnotify.custom.css"/>
            <File Path="../Evo/themes/base/jquery-slider.css"/>
            <File Path="../Evo/themes/evo/custom.css"/>
            <File Path="css/knackig.css"/>
        </CSS>
    </Minify>
    <Boxes>
        <Container Position="left" Available="0"></Container>
        <Container Position="right" Available="1"></Container>
        <Container Position="top" Available="0"></Container>
        <Container Position="bottom" Available="0"></Container>
    </Boxes>
</Template>
Speichern und in den Ordner "Templatename" hochladen.
Jetzt erstellt ihr noch 2 Dateien:
1. knackig.css
2. kross.css

In diese Dateien könnt ihr eure css-Anpassungen des Evo-Themes speichern.

Eigentlich war es das schon an der Stelle.

Ab ins Backend eures Testshops dort kurz nochmal den Cache löschen und dann unter Template eure Template aktivieren.
Entsprechend alles einstellen, wie gewünscht und alles schick!


Die Namen können/sollten von euch nach Wunsch geändert werden.
In dieser xml habe ich 2 eigene Themes eingetragen, für die die vlt. Ostern, Weihnachten etc. unterschiedliches Aussehen haben möchten. Da reicht dann ein einfacher switch im Backend.
Wer das nicht möchte, sollte im Minify-Block und im "2." Theme Block entsprechend löschen.


Nochmal eine Erklärung welcher Ausdruck was bedeutet:

HTML:
<?xml version="1.0" encoding="utf-8" standalone="yes"?>
<Template>
    <Name>Templatename</Name>               //Der Name des Ornder wo sich euer Template befindet
    <Author>der Autor</Author>                     // Auf wessen Mist ist das ganze gewachsen?
    <URL>http://www.deineseite.de</URL>              //Link zu eurem Shop
    <Version>4.01</Version>                      //so lassen, ansonsten nach einem Update hier die entsprechende Version nachtragen
    <ShopVersion>401</ShopVersion>              //so lassen, ansonsten nach einem Update hier die entsprechende Version nachtragen
    <Parent>Evo</Parent>                  //Welches Theme wird verwendet. Man kann hier jedes vordefinierte Theme nehmen, also bootstrap, cerulean, cosmo, etc.
    <Preview>preview.png</Preview>                   //Man kann ein Vorschaubild des Themes oder was auch immer hinterlegen. Sieht man nur im Backend unter Template
    <Description>Beschreibung deines Templates!</Description>         //Eine Beschreibung deines Themes
    <Settings>
        <Section Name="Allgemein" Key="general">                                      
            <Setting Description="test" Key="test" Type="select" Value="N">       //FINGER WEG!
                <Option Value="Y">Ja</Option>                                              //FINGER WEG!
                <Option Value="N">Nein</Option>                                          //FINGER WEG!
            </Setting>                                                                          
        </Section>                                                                            
        <Section Name="Theme" Key="theme">                                      
            <Setting Description="Knusperbrot" Key="knusperbrot" Type="select" Value="smoerebroed">   //Der Name wie euer Theme heissen soll
                <Option Value="smoerebroed">smoerebroed</Option>
            </Setting>
            <Setting Description="Theme" Key="theme_default" Type="select" Value="knaeckebrot">       //unter Value tragt ihr euer vorausgewähltes Theme ein
                <Option Value="smoerebroed">smoere</Option>                                   //Der Name wie euer Theme1 heissen soll dahinter ist der Name wie er im Backend angezeigt wird
                <Option Value="knaeckebrot">knaecke</Option>                                  //Der Name wie euer Theme2 heissen soll dahinter ist der Name wie er im Backend angezeigt wird
            </Setting>
        </Section>
    </Settings>
        <Minify>
        <CSS Name="smoerebroed.css">                                    //Der Name eueres Theme1 mit den Links auf welches "Grundtheme" es sich bezieht und wo eure angepasste css liegt
            <File Path="../Evo/themes/evo/bootstrap.css"/>
            <File Path="../Evo/themes/base/offcanvas-menu.css"/>
            <File Path="../Evo/themes/base/pnotify.custom.css"/>
            <File Path="../Evo/themes/base/jquery-slider.css"/>
            <File Path="../Evo/themes/evo/custom.css"/>
            <File Path="css/kross.css"/>
        </CSS>
        <CSS Name="knaeckebrot.css">                                     //Der  Name eueres Theme2 mit den Links auf welches "Grundtheme" es sich  bezieht und wo eure angepasste css liegt
            <File Path="../Evo/themes/evo/bootstrap.css"/>
            <File Path="../Evo/themes/base/offcanvas-menu.css"/>
            <File Path="../Evo/themes/base/pnotify.custom.css"/>
            <File Path="../Evo/themes/base/jquery-slider.css"/>
            <File Path="../Evo/themes/evo/custom.css"/>
            <File Path="css/knackig.css"/>
        </CSS>
    </Minify>
    <Boxes>                                                               //Welche Boxen sollen angezeigt werden?
        <Container Position="left" Available="0"></Container>
        <Container Position="right" Available="1"></Container>
        <Container Position="top" Available="0"></Container>
        <Container Position="bottom" Available="0"></Container>
    </Boxes>
</Template>
Nachtrag1: Nichts neues für Shopversion 4.05.3

Nachtrag2: Wenn man auf eine neue Shopversion updatet, empfiehlt es sich die eigenen geänderten Dateien mit http://winmerge.org/?lang=de zuvergleichen. Das ist einfach, übersichtlich und schnell. Als Beispiel:
templates/Templatename/productdetails/attributes.tpl
vergleichen mit:
templates/Evo/productdetails/attributes.tpl
und dann die Eigene speichern und wieder hochladen.
Es setzt natürlich vorraus, dass man erkennt, was man "damals" vor Jahren geändert hat.
 
Zuletzt bearbeitet:

holzpuppe

Sehr aktives Mitglied
14. Oktober 2011
1.294
105
Leipzig
#3
AW: Guide- Wie erstelle ich ein eigenes Template/Theme mit JTL 4.0+

Nachtrag: Wer jetzt noch andere Dinge im eigenen Template ändern will, zBs.: Eigene Felder aus der Wawi anzeigen, sollte sich folgenden Beitrag ansehen:

http://forum.jtl-software.de/shopbe...212-eigene-felder-im-shop-4-0-und-hoeher.html

Wichtig ist: Der Pfad muss genauso aussehen wie im EVO. Also Templatename/productdetails/attributes.tpl
Das _custom muss nicht mehr angefügt werden!
 

holzpuppe

Sehr aktives Mitglied
14. Oktober 2011
1.294
105
Leipzig
#7
AW: Guide- Wie erstelle ich ein eigenes Template/Theme mit JTL 4.0+

Gern geschehen. :)

Das kann gerne "sticky" werden. Vlt. gibt es dann (vorerst) weniger Zusatzbeiträge.
 

graz

Gut bekanntes Mitglied
6. Oktober 2013
134
0
#8
AW: Guide- Wie erstelle ich ein eigenes Template/Theme mit JTL 4.0+

Hallo Holzpuppe,

vielen Dank für die tolle Beschreibung. Konnte alles gut nachstellen.
Nur über das Evo Theme Editor Plugin kommt immer: Theme Ordner nicht gefunden. Kann es sein, dass der nur für die Sachen funktioniert die unter Evo liegen?

Beste Grüße
 

holzpuppe

Sehr aktives Mitglied
14. Oktober 2011
1.294
105
Leipzig
#9
AW: Guide- Wie erstelle ich ein eigenes Template/Theme mit JTL 4.0+

Ich bin mir nicht 100%ig sicher, denke das es nur für die "Original Themes" geht. Man braucht bei einem eigenen Theme nicht kompilieren. Hier empfiehlt sich der Inspector von Firefox oder Firebug mit Notepad++. Hat auch den Vorteil, man sieht die Veränderung in Echtzeit.
 

graz

Gut bekanntes Mitglied
6. Oktober 2013
134
0
#10
AW: Guide- Wie erstelle ich ein eigenes Template/Theme mit JTL 4.0+

Danke für die Info. So arbeiten wir auch aktuell mit Shop3 und werden dann bei 4 wohl auch beim alt bewährten bleiben :)
Den Lifestyler betrifft es ja leider scheinbar dann auch, wobei die Features davon recht übersichtlich sind im Vergleich z.B. zum Styleedit der schon seit Jahren läuft.
 

Bart70

Gut bekanntes Mitglied
18. Februar 2015
380
1
Filderstadt
#11
AW: Guide- Wie erstelle ich ein eigenes Template/Theme mit JTL 4.0+

peichern und in den Ordner "Templatename" hochladen.
Jetzt erstellt ihr noch 2 Dateien:
1. knackig.css
2. kross.css

In diese Dateien könnt ihr eure css-Anpassungen des Evo-Themes speichern.

Eigentlich war es das schon an der Stelle.

Ab ins Backend eures Testshops dort kurz nochmal den Cache löschen und dann unter Template eure Template aktivieren.
Entsprechend alles einstellen, wie gewünscht und alles schick!
Hallo,

wenn ich bis da hin alles so kopiere und mache wie beschrieben dann erhalte ich nur eine weiße Seite?

Mfg
 

muenster

Sehr aktives Mitglied
25. September 2012
1.824
33
#12
AW: Guide- Wie erstelle ich ein eigenes Template/Theme mit JTL 4.0+

Bei Verwendung des livestylers bekomme auf der Shop-Seite folgende Meldung:
Code:
[h=3]/templates/Evo/themes/standard/less/theme.less' wasn't found (404)[/h]
 

holzpuppe

Sehr aktives Mitglied
14. Oktober 2011
1.294
105
Leipzig
#13
AW: Guide- Wie erstelle ich ein eigenes Template/Theme mit JTL 4.0+

Hallo,

wenn ich bis da hin alles so kopiere und mache wie beschrieben dann erhalte ich nur eine weiße Seite?

Mfg
Ich schieß mal ins Blaue:
Hast du Java und Css Komprimierung an?
Falls Ja, bitte mal ausschalten und dann testen.
Wenn es geht, dann bitte in im Rootverzeichnis in der htaccess folgendes ändern:
Code:
RewriteRule ^assert/(.*)$ includes/libs/minify-2.1.7/g=$1 [L]
mit
Code:
   RewriteRule ^asset/(.*)$ includes/libs/minify/g=$1 [L]
ersetzen.

Es kann sein, dass vlt. noch mehr erstetzt werden muss. Guggst du hier.
:)
 

holzpuppe

Sehr aktives Mitglied
14. Oktober 2011
1.294
105
Leipzig
#14
AW: Guide- Wie erstelle ich ein eigenes Template/Theme mit JTL 4.0+

Bei Verwendung des livestylers bekomme auf der Shop-Seite folgende Meldung:
Code:
[B]/templates/Evo/themes/standard/less/theme.less' wasn't found (404)[/B]
Bitte nicht den Livestyler verwenden. Arbeite am besten mit Inspector/Firebug und trage dann die Änderungen direkt in deine CSS.
Ich hab es zwar noch nicht probiert, aber schau mal ob es geht wenn du in deinem templates/templatename/themes/standard/less/ die "theme.less" und alle anderen Dateien aus /templates/Evo/themes/standard/less/ kopierst.
 

Bart70

Gut bekanntes Mitglied
18. Februar 2015
380
1
Filderstadt
#15
AW: Guide- Wie erstelle ich ein eigenes Template/Theme mit JTL 4.0+

Bitte nicht den Livestyler verwenden. Arbeite am besten mit Inspector/Firebug und trage dann die Änderungen direkt in deine CSS.
Ich hab es zwar noch nicht probiert, aber schau mal ob es geht wenn du in deinem templates/templatename/themes/standard/less/ die "theme.less" und alle anderen Dateien aus /templates/Evo/themes/standard/less/ kopierst.
Hallo Holzpuppe,
im Backend sieht es bei mir so aus Template.jpg da kann ich nichts ausschalten irgendwo hab ich noch ein Fehler drin :(
 

holzpuppe

Sehr aktives Mitglied
14. Oktober 2011
1.294
105
Leipzig
#16
AW: Guide- Wie erstelle ich ein eigenes Template/Theme mit JTL 4.0+

Cache löschen und die xml nochmal genau anschauen. Da fehlt was oder ist falsch verlinkt. Am besten dann nochmal das Template wechseln und wieder Deins aktivieren. :)
 

Bart70

Gut bekanntes Mitglied
18. Februar 2015
380
1
Filderstadt
#17
AW: Guide- Wie erstelle ich ein eigenes Template/Theme mit JTL 4.0+

Cache löschen und die xml nochmal genau anschauen. Da fehlt was oder ist falsch verlinkt. Am besten dann nochmal das Template wechseln und wieder Deins aktivieren. :)
Hallo ich hab die hatccess geändert
RewriteCond %{HTTP_HOST} ^test.calabria-shop.com [NC] RewriteRule ^(.*)$ http://www.calabria-shop.com/$1 [R=301,L]
da Shop Version 4.02 und soweit alles Ok aber im Backend Info Achtung:
Parent-Template fehlt.


<?xml version="1.0" encoding="utf-8" standalone="yes"?>
<Template>
<Name>Templatename</Name>
<Author>der Autor</Author>
<URL>http://www.test.calabria-shop.com</URL>
<Version>4.02</Version>
<ShopVersion>402</ShopVersion>
<Parent>lumen</Parent>
<Preview>preview.png</Preview>
<Description>KOMMT NOCH</Description>
<Settings>
<Section Name="Allgemein" Key="general">
<Setting Description="test" Key="test" Type="select" Value="N">
<Option Value="Y">Ja</Option>
<Option Value="N">Nein</Option>
</Setting>
</Section>
<Section Name="Theme" Key="theme">
<Setting Description="Knusperbrot" Key="knusperbrot" Type="select" Value="smoerebroed">
<Option Value="smoerebroed">smoerebroed</Option>
</Setting>
<Setting Description="Theme" Key="theme_default" Type="select" Value="knaeckebrot">
<Option Value="smoerebroed">smoere</Option>
<Option Value="knaeckebrot">knaecke</Option>
</Setting>
</Section>
</Settings>
<Minify>
<CSS Name="smoerebroed.css">
<File Path="../Evo/themes/evo/bootstrap.css"/>
<File Path="../Evo/themes/base/offcanvas-menu.css"/>
<File Path="../Evo/themes/base/pnotify.custom.css"/>
<File Path="../Evo/themes/base/jquery-slider.css"/>
<File Path="../Evo/themes/evo/custom.css"/>
<File Path="css/kross.css"/>
</CSS>
<CSS Name="knaeckebrot.css">
<File Path="../Evo/themes/evo/bootstrap.css"/>
<File Path="../Evo/themes/base/offcanvas-menu.css"/>
<File Path="../Evo/themes/base/pnotify.custom.css"/>
<File Path="../Evo/themes/base/jquery-slider.css"/>
<File Path="../Evo/themes/evo/custom.css"/>
<File Path="css/knackig.css"/>
</CSS>
</Minify>
<Boxes>
<Container Position="left" Available="0"></Container>
<Container Position="right" Available="1"></Container>
<Container Position="top" Available="0"></Container>
<Container Position="bottom" Available="0"></Container>
</Boxes>
</Template>
 

muenster

Sehr aktives Mitglied
25. September 2012
1.824
33
#18
AW: Guide- Wie erstelle ich ein eigenes Template/Theme mit JTL 4.0+

Bitte nicht den Livestyler verwenden. Arbeite am besten mit Inspector/Firebug und trage dann die Änderungen direkt in deine CSS.
Ich hab es zwar noch nicht probiert, aber schau mal ob es geht wenn du in deinem templates/templatename/themes/standard/less/ die "theme.less" und alle anderen Dateien aus /templates/Evo/themes/standard/less/ kopierst.
Das würde gehen, aber dann wird die xxx.css übergangen

Also mit Inspector arbeiten ;)
 

muenster

Sehr aktives Mitglied
25. September 2012
1.824
33
#19
AW: Guide- Wie erstelle ich ein eigenes Template/Theme mit JTL 4.0+

Ich habe leider noch ein Problem :(

ich möchte teilweise die *.tpl anpassen

dazu habe ich versucht zu einem im Ordner ../Templatname/theme den Ordner Layout angelegt hier nach der Anleitung von Child-Templates &mdash; JTL-Shop Dokumentation

ein paar Test-Änderungen gemacht.

Leider war keine dieser Änderungen im Layout zu sehen es wurden alle ignoriert.

Hat da einer eine Idee?

Grüße aus Münster

uwe