Template und Theme
Das Template gibt die Anordnung aller Elemente auf den Seiten deines Shops vor. Das Theme ist laut JTL kein eigenes Template, sondern nur die Design-Komponente eines Templates: Es legt per CSS fest, wie diese Elemente aussehen. Farben, Schriften und Abstände änderst du also im Theme, Aufbau und Inhalte einzelner Seiten im Template.
Vieles lässt sich ohne Code über die Einstellungen von NOVA lösen, etwa Header-Layout, Suchfeld, Megamenü und Filterposition.
Child-Template statt NOVA direkt ändern
JTL nennt das Child-Template den bevorzugten Weg zum eigenen Template. Es erweitert oder überschreibt einzelne Dateien von NOVA, alle übrigen lädt der Shop weiter aus NOVA. Bei einem Shop-Update werden die Dateien des Child-Templates nicht überschrieben. Ob deine Änderungen danach noch richtig funktionieren, solltest du trotzdem prüfen.
JTL empfiehlt, die Vorlage NOVAChild vom JTL Build-Server herunterzuladen und in den Ordner templates/ zu entpacken. Behalte den Ordnernamen NOVAChild bei. Benennst du ihn um, musst du auch den Namespace in der Bootstrap.php des Child-Templates anpassen, Sonderzeichen sind nicht erlaubt. In der template.xml steht unter <Parent> das Eltern-Template, also NOVA.
Smarty-Blöcke überschreiben
NOVA ist in benannte Smarty-Blöcke aufgeteilt, erkennbar an {block name="…"}…{/block}. Im Child-Template kannst du einzelne Blöcke erweitern oder ersetzen, etwa um im Header eigene Dateien zu laden, das Logo zu tauschen oder das Menü anzupassen. Dazu legst du die betreffende Template-Datei an derselben Stelle im Child-Template an wie in NOVA.
Du kannst auch eine ganze .tpl-Datei ersetzen. JTL warnt hier ausdrücklich vor weitreichenden Folgen: Nach jedem Update musst du prüfen, ob die ersetzte Datei noch passt, und sie gegebenenfalls nachziehen. Einzelne Blöcke sind deshalb meist die sicherere Wahl.
Eigenes Theme mit SCSS
Für ein eigenes Theme kopierst du laut JTL das Beispiel-Theme my-nova im Ordner themes/ deines Child-Templates und benennst es um. Ein Theme besteht aus der Datei custom.css und den SCSS-Dateien sass/_variables.scss, sass/[Theme-Name].scss und sass/[Theme-Name]_crit.scss. In _variables.scss stehen die Variablen, etwa für Farben.
Kompiliert wird das Theme mit dem Plugin JTL Theme-Editor: Plugin aktivieren, über Einstellungen öffnen, dein Theme auswählen und auf Theme kompilieren klicken. Der Theme-Ordner braucht dafür Schreibrechte.
Aktivieren und nach Updates prüfen
Ist das Child-Template fertig, nimmst du es so in Betrieb:
- Im Backend die Templateverwaltung öffnen und neben dem Child-Template auf Aktivieren klicken.
- Im Abschnitt Theme dein Theme auswählen und speichern.
- Unter System > Cache den Template-Cache leeren.
- Startseite, Kategorie, Artikel, Warenkorb, Kaufabwicklung und Suche auf Desktop und Smartphone durchklicken.
- Nach jedem Shop-Update dieselbe Runde wiederholen, besonders bei ersetzten .tpl-Dateien.
Suche ohne Template-Umbau
Eine bessere Suche braucht kein eigenes Template. Mit Grumeria installierst du das Grumeria-Plugin für JTL-Shop 5, trägst Engine-ID und Suchfeld ein und behältst NOVA oder dein Child-Template, wie es ist. Die Suche mit Tippfehler-Toleranz und Filtern läuft auf eigenen Servern.