Links

Konfiguration erweitern

Individuelle Einstellungsmöglichkeiten im Child-Theme
Im vorherigen Beitrag habe ich dir erklärt, wie du ein Child-Theme anlegst. Die mitgelieferte theme.json Datei kannst du um ein weiteres Feld erweitern:
// theme.json
...
"configInheritance": [
"@ParentThemeNamespace"
],
"config": [
// Hier können weitere Konfigurationsfelder definiert werden
]
In der offiziellen Entwickler-Dokumentation von Shopware findest du die möglichen Konfigurationsfelder.
Tipp: Schau einfach im Haupt-Theme nach, dort kannst du dich an bestehenden Feldern orientieren.

Beispiel für ein zusätzliches Farbfeld

Im Folgenden Beispiel füge ich ein Farbfeld in die Konfiguration ein, das du dann aus deiner Administration heraus nutzen kannst. Das Farbfeld wird auch als Beispiel in einem der folgenden Schritte als CSS kompiliert:
So sollte deine theme.json mit zusätzlichem Farbfeld aussehen:
// 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": [
"@Storefront",
"@ParentThemeNamespace",
"app/storefront/dist/storefront/js/r-h-web-child-theme-template.js"
],
"asset": [
"@Storefront",
"@ParentThemeNamespace",
"app/storefront/src/assets"
],
"configInheritance": [
"@ParentThemeNamespace"
],
"config": [
"rhweb-custom-color-field": {
"label": {
"en-GB": "Individial Color Field",
"de-DE": "Individuelles Farbfeld"
},
"type": "color",
"editable": true
}
]
}
Die SCSS Variable $rhweb-custom-color-field kannst du jetzt in deinem Code verwenden.
Weitere Informationen zur Theme-Konfiguration erhältst du in der offiziellen Dokumentation von Shopware.