So erstellst du ein Child-Theme für den JTL-Shop 4

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.

  1. 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>.
  2. Erstelle nun unter <MeinTheme> ein Unterverzeichnis namens <themes>.
  3. 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.

  1. Erstelle im Verzeichnis <Mein Theme> eine neue Datei namens <template.xml>.
  2. Füge folgenden Inhalt ein:
  1. <?xml version="1.0" encoding="utf-8" standalone="yes"?>
  2. <Template>
  3.   <Name>MeinTheme</Name>
  4.   <Author>Max Mustermann</Author>
  5.   <URL>https://www.meinshop.tld</URL>
  6.   <Version>1.0</Version>
  7.   <ShopVersion>406</ShopVersion>
  8.   <Parent>Evo</Parent>
  9.   <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>
  10.  <Settings>
  11.    <Section Name="Themes" Key="theme">
  12.        <Setting Description="Theme" Key="theme_default" Type="select" Value="theme">
  13.            <Option Value="theme">Eigenes Theme</Option>
  14.        </Setting>
  15.    </Section>
  16.  </Settings>
  17.   <Minify>
  18.     <CSS Name="theme.css">
  19.        <File Path="themes/theme/theme.css"/>
  20.     </CSS>
  21.   </Minify>
  22. </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:
  1. <Minify>
  2.  <CSS Name="theme.css">
  3.    <File Path="../Evo/themes/base/offcanvas-menu.css"/>
  4.    <File Path="../Evo/themes/base/pnotify.custom.css"/>
  5.    <File Path="../Evo/themes/base/jquery-slider.css"/>
  6.    <File Path="themes/theme/bootstrap.css"/>
  7.    <File Path="themes/theme/theme.css"/>
  8.  </CSS>
  9. </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. 
  1. Kopiere das Bilder-Verzeichnis /templates/Evo/themes/base/images/ in dein neues Theme /templates/MeinTheme/themes/base/images/.
  2. 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

  1. Stelle den Shop-Cache deines Shops komplett ab, bevor du ein eigenes Theme erstellst.
  2. Nach Änderungen der Konfigurationsdatei muss das Theme im Shop-Backend nochmal gespeichert werden, damit neue Änderungen vom System beachtet werden.
  3. Lege in deinem Theme ein Bild namens <preview.png> an, um ein eigenes Bild in der Template-Auflistung anzuzeigen.