Hallo zusammen,
welche Version hast du im Einsatz, FloC3?
Hast du gerade zwei Themes im Einsatz, welche aufeinander aufbauen sollen, oder ist “MyTheme” dein einziges Theme? Das eigene Theme, sollte im “style” und “script” Array nicht aufgerufen werden. Diese arbeiten im gegensatz zu “views” etwas anders und sollen vom eigenen Theme nur Dateien aufrufen.
Der undefined Fehler klingt danach, als wäre nicht “theme:refresh” aufgerufen worden um die theme.json neu einzulesen. Das kann dazu führen, dass die Variable undefined ist. Wobei mich dann wundert, dass du die Felder im Theme Manager sehen kannst.
In meinem Test Theme funktioniert das überschreiben von z.B. “$border-radius” mit eigenen Variablen aus der theme.json:
theme.json:
{
"name": "TestTheme",
"author": "Shopware AG",
"views": [
"@Storefront",
"@Plugins",
"@TestTheme"
],
"style": [
"app/storefront/src/scss/overrides.scss",
"@Storefront",
"app/storefront/src/scss/base.scss"
],
"script": [
"@Storefront",
"app/storefront/dist/storefront/js/test-theme.js"
],
"asset": [
"app/storefront/src/assets"
],
"config": {
"fields": {
"sw-my-color": {
"label": {
"en-GB": "My color",
"de-DE": "Meine Farbe"
},
"type": "color",
"value": "#ffcc00",
"editable": true,
"block": "themeColors",
"order": 500
},
"sw-my-radius": {
"label": {
"en-GB": "My radius",
"de-DE": "Mein Radius"
},
"type": "text",
"value": "10px",
"editable": true,
"block": "themeColors",
"order": 600
},
"sw-new-color": {
"label": {
"en-GB": "New color",
"de-DE": "Neue Farbe"
},
"type": "color",
"value": "#f8f8f8",
"editable": true,
"block": "themeColors",
"order": 700
}
}
}
}
overrides.scss:
/*
Override variable defaults
==================================================
This file is used to override default SCSS variables from the Shopware Storefront or Bootstrap.
Because of the !default flags, theme variable overrides have to be declared beforehand.
https://getbootstrap.com/docs/4.0/getting-started/theming/#variable-defaults
*/
// New variable from my theme.json which will be the value of $primary
$primary: $sw-my-color;
// New variable from my theme.json which will be the value of $border-radius
$border-radius: $sw-my-radius;
base.scss:
body {
// This $sw-new-color will not be overwritten. Is is used directly.
background-color: $sw-new-color;
}
Wenn Variablen aus der theme.json direkt verwendet werden sollen, muss man sie nicht in die overrides.scss packen sondern kann sie direkt aufrufen wie im Beispiel “base.scss”.
Das Test Theme habe ich bei GitHub zur Verfügung gestellt. Vielleicht magst du einmal verifizieren ob das bei dir kompiliert? https://github.com/tobiasberge/TestTheme
Aussehen sollte das wie folgt:
Viele Grüße
Tobias