So erstellst du ein Child-Theme für den JTL-Shop 4
In diesem Artikel zeigen wir, wie du ein eigenes Child-Theme für deine
Anpassungen erstellst und eine saubere Grundstruktur definierst. Du
erfährst, welche Dateien du brauchst und wie du sie richtig einbindest.
Eine Grundstruktur definieren
Das Child-Theme ist seit der JTL-Shop Version 4.06 kein Bestandteil des
JTL-Shops mehr, d.h. ab dieser Version wird standardmäßig kein Beispiel
(Evo-Child-Example) mitgeliefert.
Die Verzeichnisstruktur anlegen
Ich arbeite in dem Fall direkt auf dem Webserver im Hauptverzeichnis des Shops. Als FTP-Client nutze ich Yummy FTP Pro unter Mac, für Windows nimmt man am Besten FileZilla.
- Erstelle ein neues Verzeichnis für dein neues Theme. Als Name kannst du einen Phantasienamen verwenden, achte aber darauf, dass du keine Leerzeichen einfügst. Am besten geeignet sind Namen aus einem Wort oder mehrere Wörter direkt aneinander, wie z.B. <MeinTheme>.
- Erstelle nun unter <MeinTheme> ein Unterverzeichnis namens <themes>.
- Im Verzeichnis <themes> erstellst du zwei weitere Verzeichnisse, <base> und <theme>.
Konfigurationsdatei anlegen
Die Konfigurationdatei hilft dir alle Ressourcen, wie CSS- und JavaScript-Dateien dem Shop bekannt zu machen und dein neues Theme im Shop-Backend mit Namen und Abhändigkeiten anzuzeigen.
- Erstelle im Verzeichnis <Mein Theme> eine neue Datei namens <template.xml>.
- Füge folgenden Inhalt ein:
- <?xml version="1.0" encoding="utf-8" standalone="yes"?>
- <Template>
- <Name>MeinTheme</Name>
- <Author>Max Mustermann</Author>
- <URL>https://www.meinshop.tld</URL>
- <Version>1.0</Version>
- <ShopVersion>406</ShopVersion>
- <Parent>Evo</Parent>
- <Description>Dieses Template dient für eigene Anpassungen, wie das genau geht, findest du in unserem <![CDATA[<a href="https://support.themeart.de/so-erstellst-du-dein-eigenes-child-theme-fuer-den-jtl-shop/">Tutorial</a>]]>.</Description>
- <Settings>
- <Section Name="Themes" Key="theme">
- <Setting Description="Theme" Key="theme_default" Type="select" Value="theme">
- <Option Value="theme">Eigenes Theme</Option>
- </Setting>
- </Section>
- </Settings>
- <Minify>
- <CSS Name="theme.css">
- <File Path="themes/theme/theme.css"/>
- </CSS>
- </Minify>
- </Template>
Das Theme, was du erstellt hast, wird bereits im Shop-Backend unter <Template> angezeigt und erbt alle Einstellungen des Evo-Templates. Kontrollieren kannst du diese, indem du beim Theme auf den Button <Aktivieren> klickst.
Wenn du das Theme jetzt aktivierst, bekommst du den Shop als
Textversion, da noch keine Core CSS-Dateien eingebunden wurden, die für
das Aussehen des Templates verantwortlich sind. Core CSS-Dateien einbinden
Bevor du nun die Core-Dateien einbinden kannst, muss du dich für ein Standard-Theme entscheiden, auf dem du aufbauen möchtest. Das Standard-Evo-Template bringt einige Themes mit, die du als Grundlage nehmen kannst.
Ich nehme als Grundlage das Evo – Theme und binde alle Core-CSS-Dateien in die Konfigurationsdatei ein.
Eine Auflistung aller vorhandenen Themes findest du in der Konfigurationsdatei des Evo-Templates unter /templates/Evo/template.xml. Ab Zeile 175 unter dem Knoten <Minify>.
Öffne bitte die Konfigurationsdatei < template.xml> im MeinTheme-Verzeichnis mit einem Editor und ergänze sie wie folgt:
- <Minify>
- <CSS Name="theme.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="themes/theme/bootstrap.css"/>
- <File Path="themes/theme/theme.css"/>
- </CSS>
- </Minify>
Wenn du jetzt das Template aktivierst, bekommst du eine ansprechende
Darstellung des Shops. Allerdings wirst du feststellen, dass einige
Bilder und Icons noch fehlen. Das liegt daran, dass die Core-CSS-Datei
namens < bootstrap.css> nur auf Bilder im Verzeichnis /base/images und auf Icons im Verzeichnis /fonts/ zugreifen kann. - Kopiere das Bilder-Verzeichnis /templates/Evo/themes/base/images/ in dein neues Theme /templates/MeinTheme/themes/base/images/.
- Kopiere das komplette Fonts-Verzeichnis /templates/Evo/fonts/und füge es unter /templates/MeinTheme ein.
Wenn du das gemacht hast und du deinen Shop erneut aufrufst, werden alle Icons und Bilder angezeigt.
Tipps
- Stelle den Shop-Cache deines Shops komplett ab, bevor du ein eigenes Theme erstellst.
- Nach Änderungen der Konfigurationsdatei muss das Theme im Shop-Backend nochmal gespeichert werden, damit neue Änderungen vom System beachtet werden.
- Lege in deinem Theme ein Bild namens <preview.png> an, um ein eigenes Bild in der Template-Auflistung anzuzeigen.
Related Articles
So installierst du das Child-Template im JTL-Shop 5
Das Child-Template ist das Template für Abweichungen gegenüber dem Parent-Template. Es können z.B. Änderungen an der Navigation, Listing, Header, Footer etc. sein oder Änderungen an der Farbgebung des Templates. All das wird im Child-Template ...Child-Template für Anpassungen
Das Child-Template ist das Template, welches wir zusammen mit jedem Template mitliefern und welches du im Shop aktivierst. Es greift auf das Parent-Template zu und ermöglicht dir alle Farbeinstellungen dauerhaft zu speichern. Warum brauchst du ein ...Angepasstes Child-Template aktualisieren
In der 4er JTL-Shopversion arbeitet man mit Child-Templates, um eigene Anpassungen vom Original bzw. Vater-Template zu trennen, damit diese später besser gewartet werden können. Doch wie geht man am besten vor, wenn das Vater-Template aktualisiert ...Allgemeine Fragen zu den JTL-Shop Templates
Es fehlt mir eine wichtige Funktion, können Sie diese programmieren? Ja, bitte nimm mit uns Kontakt auf und beschreibe die Funktionsweise möglichst genau. Wir unterbreiten dir gerne ein Angebot und machen alternative Vorschläge. Wie kann ich die ...So installierst du das Template im JTL-Shop
In diesem Video zeigen wir die grundlegende Schritte einer Template-Installation. So kannst du dein Template innerhalb wenigen Minuten installieren. Zusätzliche Sprachbausteine importieren Das Template beinhaltet zusätzliche Sprachbausteine die im ...