Shopware 6

Zum Einrichtungsservice

  1. Home
  2. Dokumente
  3. Shopware 6
  4. Child Theme

Child Theme

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 Haupttheme unberührt lässt. Somit kannst du deine eigenen Programmierungen vornehmen und das Haupttheme bleibt ausnahmslos updatekompatibel. Dieser Beitrag richtet sich vorrangig bzw. ausschließlich an Entwickler.

– PS: Child-Themes sind nicht zu verwechseln mit Theme – Duplikaten. Ein Theme – Duplikat erstellt keine eigenständige Ordnerstruktur und kann somit von Entwicklern nicht als Grundlage verwendet werden. Duplikate regeln lediglich ein paar interne Vererbungen von Themes.

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. Du weißt schon! 😉

Vorlage herunterladen

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.

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

Child Theme programmieren

Bevor du loslegst, solltest du noch folgende Vorkehrungen treffen! Diese sind nicht notwendig, damit du programmieren kannst. Es sind ledigleich 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 src Resources app storefront src . Nimm hier nötige Anpassungen vor.
  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.

Jetzt kann es losgehen! Dein Child-Theme ist fertig konfiguriert und das Haupttheme bleibt updatekompatibel. Das Child-Theme erbt neue Einstellungen des Hauptthemes automatisch. Wie du das Theme programmierst erfährst du in der offiziellen Shopware Dokumentation.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.

This site is registered on wpml.org as a development site.