Child-Theme in PrestaShop: das Design anpassen, ohne Änderungen beim Update zu verlieren

Es ist die Geschichte vieler Shops: Jemand hat die Farbe der Buttons geändert, einen Block auf der Produktseite verschoben und das Warenkorb-Template angepasst, alles direkt in den Dateien des Themes. Das funktionierte jahrelang. Bis eine neue Version des Themes mit wichtigen Korrekturen erschien, aktualisiert wurde und all diese Änderungen verschwunden waren. Oder, schlimmer, niemand traute sich zu aktualisieren, und das Theme blieb auf einer Version stehen, die nicht mehr zum Core passt.

Genau dafür gibt es das Child-Theme.

Was ein Child-Theme ist

Es ist ein Theme, das ein anderes als Parent angibt und nur die Dateien enthält, die Sie ändern wollen. Wenn PrestaShop ein Template braucht, sucht es zuerst im Child-Theme; findet es dort keines, nimmt es das des Parents. Im Ergebnis enthält das Child nur Ihre Anpassungen, getrennt vom Code des Theme-Herstellers.

Seit PrestaShop 1.7 ist der Mechanismus Teil des Cores und wird in der Konfigurationsdatei des Themes, config/theme.yml, mit dem Namen des Parent-Themes deklariert. Die Standard-Themes (Classic und, in PrestaShop 9, Hummingbird) lassen sich als Parent verwenden, ebenso die meisten kommerziellen Themes, wobei Sie das beim jeweiligen Autor bestätigen lassen sollten.

Was ins Child-Theme gehört

Eigene Stylesheets und Skripte

Ihr CSS und Ihr JavaScript kommen in eigene Dateien des Child-Themes. Sie können wählen, ob das Child auch die Dateien des Parents lädt (üblich, um das ganze Design zu erben und nur etwas darüberzulegen) oder ob es sie ersetzt. Ihre Stile in eine eigene Datei zu schreiben, die nach denen des Parents geladen wird, ist der sauberste Weg, Farben, Abstände oder Schriften zu ändern, ohne etwas vom Hersteller anzufassen.

Templates, die Sie tatsächlich ändern

Wenn Sie die Struktur einer Seite ändern müssen, kopieren Sie nur dieses Template ins Child, im selben relativen Pfad wie im Parent, und bearbeiten es dort. Zum Beispiel die Produktseite oder einen bestimmten Block des Warenkorbs. Alle anderen kommen weiterhin vom Parent.

Noch besser: Viele PrestaShop-Templates sind in Smarty-Blöcke gegliedert. Ein Template im Child kann das des Parents erweitern und nur einen Block neu definieren, statt es komplett zu kopieren. Korrigiert der Hersteller dann etwas an einer anderen Stelle dieses Templates, erreicht Sie die Korrektur.

Templates von Modulen

Gut gemachte Module erlauben es dem Theme, ihre Templates zu überschreiben. Diese liegen im Ordner modules/ des Themes, mit dem Namen des Moduls und demselben Pfad, den das Template im Modul hat. In einem Child-Theme funktioniert das genauso: Sie passen das Aussehen eines Moduls an, ohne das Modul anzufassen, und wenn das Modul aktualisiert wird, bleibt Ihr Template an seinem Platz.

Was nicht ins Child-Theme gehört

• Änderungen an der Logik. Das Theme ist Darstellung. Wenn etwas anders funktionieren soll, ist das ein Modul und kein Template mit komplizierten Bedingungen.
• Overrides von Core-Klassen. Sie liegen in einem anderen Ordner und haben bei Updates ihre eigenen Risiken. Dass eine Änderung im Child-Theme steckt, schützt sie nicht, wenn sie in Wirklichkeit von einem Override abhängt.
• Vollständige Kopien des Parent-Themes. Wenn Sie alle Templates „sicherheitshalber“ ins Child kopieren, nützt das Parent nichts mehr: Keine Korrektur erreicht Sie, und Sie sind wieder beim Ausgangsproblem.

So aktualisieren Sie das Parent-Theme

Mit einem Child-Theme ist das Update des Parents ein planbarer Ablauf:

1. Ersetzen Sie auf einer Kopie des Shops das Parent-Theme durch die neue Version.
2. Listen Sie die Templates auf, die das Child enthält, und vergleichen Sie für jedes die alte Version des Parents mit der neuen. Hat der Hersteller dieses Template geändert, müssen Sie seine Änderungen in Ihre Kopie im Child übernehmen oder prüfen, ob Ihr neu definierter Block noch passt.
3. Prüfen Sie Ihr CSS: Hat das Parent Klassennamen oder die HTML-Struktur geändert, greifen manche Ihrer Stile nicht mehr.
4. Leeren Sie den Cache der Templates und der zusammengefassten Dateien und gehen Sie die wichtigsten Seiten durch: Startseite, Kategorie, Produktseite, Warenkorb, Checkout und Kundenkonto.
5. Testen Sie eine vollständige Bestellung. Die Checkout-Templates ändern sich am häufigsten und richten den größten Schaden an, wenn sie fehlschlagen.

Wenn Sie Ihr Child-Theme versionieren (und sei es nur, indem Sie vor jeder Änderung eine datierte Kopie speichern), geht dieser Ablauf viel schneller: Sie wissen, was Sie selbst geändert haben und wann.

Wenn Sie das Theme bereits direkt bearbeitet haben

Das ist der häufigste Fall, und er lässt sich beheben:

1. Besorgen Sie sich das Originalpaket derselben Theme-Version, die Sie installiert haben.
2. Vergleichen Sie Ihr Theme Datei für Datei mit dem Original. Die Unterschiede sind Ihre Anpassungen (und manchmal Dinge, an die sich niemand erinnert).
3. Legen Sie ein Child-Theme mit dem Original als Parent an und übertragen Sie nur diese Unterschiede: das CSS in seine Datei, die geänderten Templates in ihren Pfad.
4. Aktivieren Sie das Child-Theme auf einer Kopie und vergleichen Sie Seite für Seite mit dem aktuellen Shop.

Ab dann können Sie das Parent mit dem beschriebenen Ablauf aktualisieren. So gewinnen Sie die Möglichkeit zurück, das Theme aktuell zu halten, und das gehört dazu, den ganzen Shop aktuell zu halten: Ein festgefahrenes Theme verhindert irgendwann das Core-Update.

Häufige Fehler

• Das Child aktivieren und die visuelle Konfiguration verlieren (in Hooks eingehängte Module, Positionen). Beim Theme-Wechsel kann PrestaShop die Konfiguration anwenden, die das neue Theme deklariert; prüfen Sie nach der Aktivierung die Positionen der Module.
• Bilder und Schriften vergessen, auf die das CSS des Childs mit Pfaden relativ zum Parent verweist.
• Das zusammengefasste oder gecachte CSS bearbeiten statt der Quelldatei. Die Änderung ist weg, sobald es neu erzeugt wird.
• Gleichzeitig über das Back-Office des Herstellers und über Dateien anpassen, ohne zu wissen, was Vorrang hat.

So lösen Sie es in PrestaShop

Mit RKR Editor CSS/JS de themes bearbeiten Sie CSS und JS Ihres Themes, einschließlich Child-Themes, direkt im Back-Office, ohne FTP: Es öffnet custom.css und custom.js mit einem Klick (und legt sie an, wenn Ihr Theme sie nicht hat), durchsucht alle Dateien des Themes mit Zeilenangabe, legt vor jedem Speichern eine Kopie an, zu der Sie über ein Auswahlmenü zurückkehren können, und verweigert das Speichern, wenn jemand die Datei auf der Festplatte geändert hat, seit Sie sie geöffnet haben. Es arbeitet nur mit CSS, JS, SCSS und LESS innerhalb des Theme-Ordners, und die Bearbeitung von .tpl-Templates ist ausgeschaltet und dem SuperAdmin vorbehalten. Wenn Sie das Child-Theme anlegen, Anpassungen am Original-Theme herauslösen oder das Parent aktualisieren möchten, erledigen wir das mit einem Support-Stundenpaket von Rekire auf einer Kopie Ihres Shops.