Einrichten eines eigenen Themes auf Evo /Evo-Child

[holzpuppe]

Hallo ihr Lieben,

ich gebe zu ich steige da noch nicht ganz dahinter bzw. bin mir unsicher, wie lege ich den nun ein eigenes Theme an, dass updatessicher ist.
Aber Änderungen durch Updates von JTL bei *tpl's in den Ursprungstheme mit berücksichtig. Also ohne dass ich meine Änderungen irgendwo wieder einfügen muss, oder verloren gehen.

Thema JTL Evo-Child:
Was ist die Foobar im Childtheme?
Da gibt es die Auswahl Foo oder bar.
Wird da der Zugriff auf die foo.css bzw. bar.css im css-Ordner geregelt? Trage ich also in eines der beiden .css meine Styleänderungen ein?
Im Ordner layout ist ein header.tpl, kommen da alle von mir geänderten tpl's rein? Genauso? Also nix mehr mit footer_custom.tpl im Originalordner?
Im Themesordner unter dem Evo-Child kopiere ich das "Basistheme" rein? ZBsp.: Evo, wenn ich im Childtheme "Evo- handgemacht mit ..." ausgewählt habe?
(Obwohl der Inspector von Firefox im Headbereich mir den Base-Ordner anzeigt aus dem Evo-Ordner und aus dem Evo-Child-Ordner.
(Ich habe es in das Evo-Child ebenfalls mit hinein kopiert. (Evo-Child/themes/base) aber auch (Evo-Child/themes/evo).

Die template.xml im Evo-Child, was trägt man da ein?

Thema JTL Shop Evo:

In die template.xml im Evo-Ordner trage ich mein selbst erstelltes Theme ein und "Verlinke" auf die entsprechenen "Basisthemes"?
Oder, falls ich das wirklich alles selbst kontrollieren will, baue ich die Ordnerstrukur von sagen wir mal bootstrap in mein Theme und
bei Updates/Änderungen von JTL muss ich entsprechend die Datein manuell überprüfen/ändern?
Das selbst erstelle Theme kommt dann auch in den templates/Evo/themes/ rein?

Also Fragen über Fragen. xD

 

[stefan43-berlin]

AW: Einrichten eines eigenen Themes auf Evo /Evo-Child

Genau das frage ich mich auch. Wer ist den der Verantwortliche für den Shop4?

 

[ag-websolutions.de]

AW: Einrichten eines eigenen Themes auf Evo /Evo-Child

Wer ist den der Verantwortliche für den Shop4?

Sollte so sein wie auch in deiner Firma - die beiden Geschäftsführer J+T L

 

[david]

AW: Einrichten eines eigenen Themes auf Evo /Evo-Child

ich gebe zu ich steige da noch nicht ganz dahinter bzw. bin mir unsicher, wie lege ich den nun ein eigenes Theme an, dass updatessicher ist.

Hey, die meisten deiner Fragen werden in der Template-Doku beantwortet: JTL-Shop Dokumentation — JTL-Shop Dokumentation

Foobar sowie die header.tpl im Child, das sind nur Beispiele, wie man Templateanpassungen updatesicher vornehmen kann.

 

[stefan43-berlin]

AW: Einrichten eines eigenen Themes auf Evo /Evo-Child

Natürlich Kevin... Das war aber nicht meine Frage. Hast Du nun die Frage oder das Problem von "Holzpuppe" beantwortet?

 

[ag-websolutions.de]

AW: Einrichten eines eigenen Themes auf Evo /Evo-Child

Doch natürlich Stefan war das deine zweite Frage in Beitrag #2. Sollte allerdings deine zweite Frage bereits am Grundthema des TO vorbei gegangen sein, so kann meine Antwort hierauf im Zweifel auch nicht zielgerichtet erfolgen.

Die Beantwortung der Frage aus Beitrag #1 hat ja David bereits erledigt.

VG

Kevin, ag-websolutions.de

 

[stefan43-berlin]

AW: Einrichten eines eigenen Themes auf Evo /Evo-Child

Ich möchte keinen Stress, Kevin. Die Frage ist trotzdem aus #1 nicht beantwortet.
Kann man das nicht einfach für Anfänger / Dumme erklären.
Löscht dies, kopiert das und dann dies und jenes?
Ich finde das super, daß Du neben Deinen Plugins auch Hilfestellungen gibst.
Die meisten sind nicht so Fit.

LG Stefan

 

[XYZ]

AW: Einrichten eines eigenen Themes auf Evo /Evo-Child

Hey, die meisten deiner Fragen werden in der Template-Doku beantwortet: JTL-Shop Dokumentation — JTL-Shop Dokumentation

Foobar sowie die header.tpl im Child, das sind nur Beispiele, wie man Templateanpassungen updatesicher vornehmen kann.

Ganz ehrlich, ich bin jetzt kein Profi, aber auch kein absoluter Laie, aus der Anleitung werde auch ich nicht schlau. Ich habe auch ewig gerätselt, was es mit dem FooBar auf sich hat, bis ich dahinter kam, dass es sich um ein reines Beispiel handelt, eben weil das Child-Template nur ein Beispieltemplate ist, allerdings widerspricht das völlig dem Satz aus der Wiki "Wenn Sie Ihr eigenes Template entwickeln möchten, sollten Sie das mitgelieferte Evo-Child-Template verwenden.", da im Child, wie gesagt, unnötige Beispiele vorhanden sind, bei welchen es sich scheinbar um Programmiererhumor handelt.

Ich musste auch ewig rätseln, bis ich einigermaßen hinter die Materie gestiegen bin:

1. Im Ordner "templates" einen eigenen, komplett leeren Unterodner erstellen, hier als Beispiel "mein-template"
2. In diesen Ordner die "entschärfte" template.xml des Evo-Child mit folgendem Inhalt kopieren:

<?xml version="1.0" encoding="utf-8" standalone="yes"?>
<Template>
    <Name>Mein Template</Name>
    <Author>JTL-Software-GmbH</Author>
    <URL>https://www.jtl-software.de</URL>
    <Version>4.01</Version>
    <ShopVersion>401</ShopVersion>
    <Parent>Evo</Parent>
    <Preview>preview.jpg</Preview>
    <Description>Mein Template</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>
    </Settings>
    <Boxes>
        <Container Position="left" Available="0"></Container>
        <Container Position="right" Available="0"></Container>
        <Container Position="top" Available="0"></Container>
        <Container Position="bottom" Available="0"></Container>
    </Boxes>
</Template>

Entsprechende Stellen mit "Mein Template" können nach eigenen Bedürfnissen benannt werden.

Diese template.xml bezieht sich auf die template.xml des originalen EVO, festgelegt und erkennbar durch

<Parent>Evo</Parent>

Somit bietet das eigene Template jetzt erstmal alle Funktionen, welche das EVO bietet. Diese template.xml ist nach eigenen Bedürfnissen erweiterbar, zur Veranschaulichung diente ursprünglich das Foobar-Beispiel, welches, wenn aktiviert, auf die foo.css oder die bar.css im jeweiligen Unterordner des EVO-Child verwiesen, diese CSS-Dateien sind jedoch leer, deshalb gab es nach Aktivierung von Foo oder Bar auch keinerlei optische Veränderungen, was zur Veranschaulichung der Funktion jedoch mehr als hilfreich gewesen wäre.


Jetzt haben wir erstmal unser Grundgerüst fürs eigene Template stehen.

Wenn wir jetzt Anpassungen an den originalen EVO-Dateien vornehmen, müssen wir die anzupassende Datei in den entsprechenden Ordner in mein-template kopieren. Ändern wir also etwas an der details.tpl (ehemals artikel_inc.tpl), müssen wir zuerst in mein-template den Ordner "productdetails" erstellen und die details.tpl dort hineinkopieren, dann die Änderungen vornehmen. Genauso verfahren wir mit allen anderen anzupassenden Dateien, jede muss in mein-template in den gleichen Ordner, in welchem sie auch im im EVO zu finden ist.

Das Ganze entspricht dem Verfahren der _custom Dateien bis Shop 3.20, nur dass diese jetzt nicht mehr den Zusatz _custom haben und sich komplett in der Ordnerstruktur des eigenen Templates befinden. Bei Updates werden als EVO und EVO-Child komplett überschrieben, mein-template jedoch nicht, somit bleiben die Änderungen erhalten. Nach Updates kann man die eigenen, angepassten Dateien dann also wieder per WinMerge mit den neuen Originaldateien auf Änderungen überprüfen und Neuerungen in die eigenen Dateien übernehmen.

Wie jetzt allerdings CSS-Änderungen updatesicher durchgeführt werden, da bin ich noch nicht hintergestiegen.

 

[ag-websolutions.de]

AW: Einrichten eines eigenen Themes auf Evo /Evo-Child

Wie jetzt allerdings CSS-Änderungen updatesicher durchgeführt werden,

Wie im Beispiel mit der foo.css dargestellt.

 

[david]

AW: Einrichten eines eigenen Themes auf Evo /Evo-Child

OK, verstehe. Wir müssen deutlicher hervorheben, dass das mitgelieferte Evo-Child nur ein Beispiel ist und keine verpflichtende Grundlage für Child-Templates.
Es enthält einfache Beispiel-Lösungsansätze zum Erweitern von tpl-Dateien (am Beispiel der header.tpl), der template.xml und CSS-Dateien (am Beispiel foo.css).
Machen wir, kommt in die Doku.

 

[XYZ]

AW: Einrichten eines eigenen Themes auf Evo /Evo-Child

OK, verstehe. Wir müssen deutlicher hervorheben, dass das mitgelieferte Evo-Child nur ein Beispiel ist und keine verpflichtende Grundlage für Child-Templates.
Es enthält einfache Beispiel-Lösungsansätze zum Erweitern von tpl-Dateien (am Beispiel der header.tpl), der template.xml und CSS-Dateien (am Beispiel foo.css).
Machen wir, kommt in die Doku.

Wo ich am meisten festgehangen habe, ist die template.xml, hier muss dringend die Grundvariante mit in die Anleitung aufgenommen werden und dass diese sich im eigenen Templateordner befinden muss. Sowas steht nämlich alles nicht in der Anleitung.

Allerdings verstehe ich diesen Block nicht:

    <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>
    </Settings>

Dieser gibt in den Templateeinstellungen die (nutzlose?) Option "Test" aus, wenn ich den Block jedoch komplett entferne, verschwindet im Shopbackend unter Template der Button "Einstellungen" beim eigenen Template.

 

[david]

AW: Einrichten eines eigenen Themes auf Evo /Evo-Child

Dieser gibt in den Templateeinstellungen die (nutzlose?) Option "Test" aus, wenn ich den Block jedoch komplett entferne, verschwindet im Shopbackend unter Template der Button "Einstellungen" beim eigenen Template.

Hehe, auch das nur ein Beispiel für eigene Template-Einstellungen, die man ggf. im Child ergänzen möchte.
Wenn du den Block entfernst, gibt es keine Custom-Einstellungen mehr, d.h. es werden alle Einstellungen/Defaults vom Master-Template Evo übernommen.

 

[martinwolf]

AW: Einrichten eines eigenen Themes auf Evo /Evo-Child

Wenn du den Block entfernst, gibt es keine Custom-Einstellungen mehr, d.h. es werden alle Einstellungen/Defaults vom Master-Template Evo übernommen.

Das scheint aber so nicht ganz zu stimmen. Wenn ich nur eine einzige eigene Section im Child Template habe, habe ich dennoch alle Einstellungen die auch im Parent Template zugänglich sind zur Auswahl zur Verfügung, erweitert um meine eigene Section. Hier kann ich im Übrigen alle Parent Sectionen unabhängig vom Parent setzen, es wird keine Einstellung vorbelegt vererbt. Beispiel:

EVO: JS komprimierung aktiv
EVO Child: JS Komprimierung ist beim Klick auf Einstellungen auf Nein gesetzt.

Wenn aber nun gar keine Section im Child vorhanden ist, habe ich auch keinen Button für Einstellungen sondern aktiviere das Template direkt. Und nur dann werden die Einstellungen vom Parent vorbelegt vererbt.

 

[XYZ]

AW: Einrichten eines eigenen Themes auf Evo /Evo-Child

Hehe, auch das nur ein Beispiel für eigene Template-Einstellungen, die man ggf. im Child ergänzen möchte.
Wenn du den Block entfernst, gibt es keine Custom-Einstellungen mehr, d.h. es werden alle Einstellungen/Defaults vom Master-Template Evo übernommen.

Verstehe ich nicht ganz. Entferne ich den Block, kann ich mein Template zwar aktivieren, sofort Einstellungen vornehmen, speichern, danach steht der Button "Einstellungen" jedoch nicht mehr zur Verfügung.




Lasse ich den Block wie er ist, habe ich zwar den Button "Einstellungen" wieder, jedoch die (unnötige?) Option "test" in den Templateeinstellungen?

 

[holzpuppe]

AW: Einrichten eines eigenen Themes auf Evo /Evo-Child

Danke XYZ. Ich schaue mir das ganze später genauer an.

 

[holzpuppe]

AW: Einrichten eines eigenen Themes auf Evo /Evo-Child

So! Jetzt hab ich mir das mal angesehen und musste selbst noch rumfriemeln.

Meine XML sieht jetzt so aus:

<?xml version="1.0" encoding="utf-8" standalone="yes"?>
<Template>
    <Name>EdlerTropf</Name>
    <Author>Edler-Tropfen-GmbH</Author>
    <URL>http://www.blabla.com</URL>
    <Version>4.01</Version>
    <ShopVersion>401</ShopVersion>
    <Parent>Evo</Parent>
    <Preview>preview.png</Preview>
    <Description>EdlerTropfen Unser eigenes Template!</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="Miss CSS-Wahl" Key="miss-css-wahl" Type="select" Value="normal-edtr">
                <Option Value="normal-edtr">normal</Option>
                <Option Value="ostern-edtr">ostern</Option>
            </Setting>
            <Setting Description="Theme" Key="theme_default" Type="select" Value="miss-css-wahl">
                <Option Value="miss-css-wahl">EdlerTropf!</Option>
            </Setting>
        </Section>
    </Settings>
    <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>

In meinem Altesleichtsinn denke ich dass man mit:

        <Section Name="Theme" Key="theme">
            <Setting Description="Miss CSS-Wahl" Key="miss-css-wahl" Type="select" Value="normal-edtr">
                <Option Value="normal-edtr">normal</Option>
                <Option Value="ostern-edtr">ostern</Option>
            </Setting>

dass Aussehen der Homepage schnell ändern kann. Vlt. für Ostern,Weihnachten, etc.
Richtig?

In der Evo- Child-template.xml steht im Minify:

    <Minify>
        <CSS Name="print.css">
            <File Path="css/bar.css"/>
        </CSS>
        <CSS Name="evo.css">
            <File Path="css/foo.css"/>
        </CSS>
        <JS Name="jtl3.js">
            <File Path="js/foobar.js"/>
        </JS>
        <CSS Name="foobar.css">
            <File Path="themes/foobar/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"/>
        </CSS>
    </Minify>

Ist da ein Fehler? Den im Ordner Themes gibt es keinen Unterordner foobar. Weder im Evo noch im Evo-Child. Das würde eventuell auch erklären, dass es keine Formatierungen nach css gibt.
Wenn ich das entsprechend anpasse, lasse, oder wegnehme zerschießt es meine Seite komplett. Entweder sie ist komplett weiß oder ohne styles.
Was mich auch irritiert ist:

    <Minify>
        <CSS Name="print.css">
            <File Path="css/bar.css"/>
        </CSS>
        <CSS Name="evo.css">
            <File Path="css/foo.css"/>
        </CSS>
        <JS Name="jtl3.js">
            <File Path="js/foobar.js"/>
        </JS>

was/wie/wo ist evo.css?
ist die JS Angabe zwingend?
Was mache ich mit print.css?

Hm, was will ich jetzt eigentlich? Ich möchte das mein css-Schnulli, also nur das was ich geändert haben will, angezeigt wird.
Wie/wo/was muss ich da in meine template.xml eintragen?

Die Übernahme der Minifyangaben in die eigene Template.xml führen dazu, dass man im Backend am Template keine Einstellungen machen kann. (Das kann aber auch an mir mit fehlerhaften Änderungen liegen.)

 

[holzpuppe]

AW: Einrichten eines eigenen Themes auf Evo /Evo-Child

...

[video]https://en.wikipedia.org/wiki/File:Tumbleweed_in_motion.webm[/video]

 

[david]

AW: Einrichten eines eigenen Themes auf Evo /Evo-Child

@holzpuppe:
Warum erstellst du dir nicht ein normales Theme und ein Ostern-Theme und switched dann zwischen diesen - je nach Saison. Du kannst das Ostern-Theme auch durchaus so definieren, dass es den gleichen Source + eine zusätzliche Ostern-less/css-Datei nutzt.
Du brauchst dafür sonst keine Custom-Einstellungen definieren und auch keine eigenen JavaScripts.
Hier steht, wie es funktioniert: Individuelle Theme Anpassung — JTL-Shop Dokumentation

@xyz: Ja, man sollte im Child auch die Standard-Evo-Settings ändern können, wenn keine Custom-Einstellungen definiert sind.Hab es gerade im aktuellen Entwickler- Shop getestet, funktioniert dort (klappt dann also spätestens auch mit dem nächsten Update 4.02).

 

[holzpuppe]

AW: Einrichten eines eigenen Themes auf Evo /Evo-Child

@David:
öhm....darum geht es doch. Ein eigenes Theme erstellen. Die offizielle Anleitung ist verwirrend und nicht so deutlich wie man es als Normalnutzer erwartet.
Daher hab ich auch diesen Thread erstellt.
Hier ist noch das Problem mit der eigenen CSS. Selbst in der "Child-Evo", wenn man das foobar-theme nimmt, ist alles futsch. Keine Styles, kein CSS.
Da denke ich, dass sich im Beispiel Foobar ein Fehler eingeschlichen hat.

 

[holzpuppe]

AW: Einrichten eines eigenen Themes auf Evo /Evo-Child

Schade das von Seiten JTL keine Resonanz mehr kommt.

Ich hab wenigstens die CSS soweit doch noch zum laufen bekommen. War ein Akt und ewiges rumgefriemel.

Das Noneplusultra ist es noch nicht. Mir ist nicht (mehr) ganz klar welche Rolle im Evo-Child nun foo.css und bar.css spielen.
Was bedeutet im einzelnen:

        <CSS Name="print.css">
            <File Path="css/bar.css"/>
        </CSS>
        <CSS Name="evo.css">
            <File Path="css/foo.css"/>
        </CSS>

Und was wäre alternativ denkbar?

Meine XML sieht jetzt so aus:

<?xml version="1.0" encoding="utf-8" standalone="yes"?>
<Template>
    <Name>Ed-Base</Name>
    <Author>Edler-Tropfen-GmbH</Author>
    <URL>http://www.edlertropfen.com</URL>
    <Version>4.01</Version>
    <ShopVersion>401</ShopVersion>
    <Parent>Evo</Parent>
    <Preview>preview.png</Preview>
    <Description>Ed-Base Unser Template!</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="Miss CSS-Wahl" Key="miss-css-wahl" Type="select" Value="normal-edtr">
                <Option Value="normal-edtr">normal</Option>
                <Option Value="ostern-edtr">ostern</Option>
            </Setting>
            <Setting Description="Theme" Key="theme_default" Type="select" Value="miss-css-wahl">
                <Option Value="miss-css-wahl">Ed-Theme</Option>
            </Setting>
        </Section>
    </Settings>
        <Minify>
        <CSS Name="print.css">
            <File Path="css/ostern-edtr.css"/>
        </CSS>
        <CSS Name="miss-css-wahl.css">
            <File Path="css/normal-edtr.css"/>
        </CSS>
        <CSS Name="miss-css-wahl.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"/>
        </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>

Die:

        <CSS Name="miss-css-wahl.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"/>
        </CSS>

Hab ich auf die "Original"-CSS verlinkt. Ich möchte bei Updates seitens JTL nicht endlos mit Winmerge rumsitzen und Änderungen an einer eigenen bootstrap.css rumdoktorn.
Den meine Änderungen wie auch von JTL werden mir dann angezeigt.

Doof an der ganzen Sache ist jetzt, meine "normal-edtr.css" wird zwar geladen aber durch die bootstrap.css zum Teil überschrieben. (Das Problem hab ich bei "Evo-Child" nicht.) Wo ist da der Fehler?