Child-Theme

Ein Child-Theme ist die Grundlage für jede Programmierung, die sich auf das Frontend auswirkt.

In diesem Beitrag erkläre ich dir, wie du in Shopware 6 saubere Child-Themes erstellst. Du erfährst, wie du die Vererbungsstruktur richtig setzt und somit das Haupt-Theme unberührt lässt.

Somit kannst du deine eigenen Programmierungen vornehmen und das Haupt-Theme bleibt ausnahmslos updatekompatibel. Dieser Beitrag richtet sich vorrangig bzw. ausschließlich an Entwickler.

Nicht verwechseln!

Ein Child-Theme solltest du nicht mit einem Theme-Duplikat verwechseln. In dieser Anleitung erfährst du, wie du ein abgeleitetes Theme mit eigener Ordnerstruktur auf deinem Server erstellst.

Ein Theme-Duplikat ist lediglich ein Datenbankeintrag und erstellt keine eigene Ordnerstruktur.

Wenn du mehr über Theme-Duplikate erfahren möchtest, empfehle ich dir meinen Beitrag dazu. Ansonsten kannst du diesen Hinweis ignorieren.

Child-Theme Vorlage zum Download

Ich habe keine Kosten und mühen gescheut, um dir eine kostenlose Vorlage zum Download bereitzustellen.

Die Vorlage ist quasi universell einsetzbar und hat bspw. ein eigenes JS-Plugin und die Font „Lato“ zur Veranschaulichung integriert. Diese Vorlage bzw. das Child-Theme an sich ist ein eigenständiges Theme und muss demnach auch so bearbeitet werden.

Github Repo / Download
https://github.com/rhwebdesign/RHWebChildThemeTemplate

Vererbung definieren

In der Vorlage siehst du die Konfiguration für die Vererbung in der Datei

src > Resources > theme.json

Wie du die Meta-Angaben und den Namespace des Child-Themes änderst, weißt du sicherlich. Aber in dieser Datei findest du den Wert @ParentThemeNamespace. Diesen Wert musst du mit dem Wert des zu überschreibenden Themes austauschen damit die Vererbung greift.

Den zu ersetzenden Namespace des findest du in der composer.json Datei des Haupt-Themes.

Für mein Tronic-Theme wäre es bspw. der Namespace @RHWebTronic

Hinweis:

Stelle sicher, dass das Parent – Theme ebenfalls installiert, kompiliert und aktiviert ist. Sonst kann es ggf. zu Darstellungsfehlern führen.

https://github.com/rhwebdesign/RHWebChildThemeTemplate/blob/master/src/Resources/theme.json

{
    "name": "Child - Theme | Template",
    "author": "RH-Webdesign",
    "previewMedia": "app/child-theme-preview.jpg",
    "views": [
        "@Storefront",
        "@ParentThemeNamespace",
        "@RHWebChildThemeTemplate",
        "@Plugins"
    ],
    "style": [
        "app/storefront/src/scss/overrides.scss",
        "@Storefront",
        "@ParentThemeNamespace",
        "app/storefront/src/scss/base.scss"
    ],
    "script": [
        "@ParentThemeNamespace",
        "app/storefront/dist/storefront/js/r-h-web-child-theme-template.js"
    ],
    "asset": [
        "@Storefront",
        "@ParentThemeNamespace",
        "app/storefront/src/assets"
    ],
    "configInheritance": [
        "@ParentThemeNamespace"
    ]
}

Child Theme programmieren

Bevor du loslegst, solltest du noch folgende Vorkehrungen treffen! Diese sind nicht notwendig, damit du programmieren kannst. Es sind lediglich ein paar Metainformationen für deine CI.

1. Namespaces anpassen Hier gibt es ein paar Baustellen, bspw. den Ordnernamen, die Klasse, die composer.json – Datei etc.

2. Mitgeliefertes Javascript anpassen Das Child-Theme kommt mit einem Beispiel Javascipt – Plugin im Ordner.

3. Preview und Icon austauschen Im Ordner src > Resources > app findest du das Preview Image. Und im Ordner src > Resources > config findest du das App – Icon.

4. Views anpassen Im Ordner src > Resources > views findest du ein Beispiel der base.html.twig.

5. Fonts anpassen Das Child-Theme integriert die Font „Lato“, um dir ein Beispiel zu zeigen, wie du eigene Fonts implementierst. Im Assets Ordner des Themes und im jeweiligen .scss wird die Font eingebunden.

Wie du eigene Schriftarten mitlieferst, erkläre ich dir in einem anderen Beitrag.

Eigene Fonts einbinden

Jetzt kann es losgehen! Dein Child-Theme ist fertig konfiguriert und das Haupttheme bleibt updatekompatibel. Das Child-Theme erbt neue Einstellungen des Haupt-Themes automatisch.