Theme Vererbung: 2 Themes

Hallo,

wir haben ein Konstrukt aus 2 Themes. Das erste basiert auf dem Shopware-Responsive, das zweite soll auf dem ersten basieren.

Das erste hat außerdem eine Theme-Config mit diversen Settings.

Wie stell ich die Vererbung richtig ein, damit ich das zweite Theme dem Sales-Channel zuweisen kann, und die Twig-Blöcke, Styles, Scripts und Settings aber aus dem ersten auch greifen?

In SW5 ging das ja ohne Probleme.

Laut Release-Docs von 6.2.0 gibt es das. Aber leider steht nirgends, wie es geht…

Die Theme Vererbung wurde verbessert, sodass nun Themes in beliebiger Tiefe von anderen Themes ableiten können.

Theme-Config erstes:

"views": [
     "@Storefront",
     "@Plugins",
     "@MyFirstPlugin"
  ],
  "style": [
    "app/storefront/src/scss/overrides.scss",
    "@Storefront",
    "@Plugins",
    "app/storefront/src/scss/base.scss"
  ],
  "script": [
    "@Storefront",
    "app/storefront/dist/storefront/js/MyFirstPlugin-theme.js",
    "app/storefront/dist/storefront/js/MyFirstPlugin-header.js",
    "app/storefront/dist/storefront/js/MyFirstPlugin-register.js"
  ],
  "asset": [
    "app/storefront/src/assets"
  ],

Theme-Config zweites:

"views": [
     "@Storefront",
     "@Plugins",
     "@MyFirstPlugin",
     "@MySecondPlugin"
  ],
  "style": [
    "app/storefront/src/scss/overrides.scss",
    "@Storefront",
    "@Plugins",
    "@MyFirstPlugin",
    "app/storefront/src/scss/base.scss"
  ],
  "script": [
    "@Storefront",
    "@MyFirstPlugin"
  ],
  "asset": [
    "app/storefront/src/assets"
  ]

wenn ich das so Compile und dann zuweise, gibts aber immer Fehlermeldungen, dass die Variablen aus dem ersten Theme nicht gefunden werden… Das erste stand-alone funktioniert tadellos

Du brauchst wirklich nicht zwei andere Threads pushen und noch zusätzlich einen eigenen öffnen.
Keine Panik - du wirst schon nicht übersehen, wenn jmd. eine Antwort kennt.

Viele Grüße

du könntest auch einfach bei einer Lösung helfen, statt sowas zu posten.

der andere Thread läuft seit über 3 Monaten ohne Antwort oder Hilfe seitens Shopware. Irgendwann hätt ich dann doch gern mal Hilfe… muss doch jemand wissen, wie das geht…

kann hier niemand helfen?

Du hast im anderen Thread geschrieben dass du zwei Themes hast, wenn ich mich richtig erinnere?

Das geht mit SW6 schlichtweg nicht - du musst dein erstes „Theme“ als Plugin erstellen und hier deine Anpassungen machen und dann mit dem echten Theme überschreiben.

@dweseom‍

ja, ich möchte 2 Themes machen. Eins für die ganzen generellen Einstellungen und dann noch eins für optische Sachen, speziell für das Projekt optimiert. Aktuell sind beide ein Plugin.

Das erste muss auch ein Plugin sein, denn darin gibts diverse Einstellungen und auch PHP-Geschichten. Beim 2. bin ich flexibel.

du musst dein erstes „Theme“ als Plugin erstellen und hier deine Anpassungen machen

–> hab ich

und dann mit dem echten Theme überschreiben

–> wie erstelle ich denn ein „echtes“ Theme? Und wie überschreib ich dann bzw. wie muss ich das anordnen in der theme.json? Denn das 2. Theme soll ja vom 1. „Plugin-Theme“ erben. So wie das auch in SW5 mit aufeinander aufbauenden Themes möglich war. In SW5 gabs dafür in der Theme.php ja die Einstellung _ protected $extend = ‚MyTheme‘; _ Wie geht das in SW6?

wäre schön, wenn mir jemand helfen könnte

Du musst ein Theme schreiben und ein Plugin - das heißt ein richtiges Plugin und kein zweites Theme (im Plugin gibt es dann bspw. keine theme.json).

https://docs.shopware.com/en/shopware-platform-dev-en/developer-guide/plugin-base

Also lediglich class SwagMonitoring extends Plugin

@dweseom‍

das bringt mir aber leider nichts…dann müsste ich das anders aufziehen… 

dann bräuchte ich ein Plugin um Funktionen abzubilden und ein Theme um Basis-Styling abzubilden. Und dann noch ein weiteres Theme, um projektspezifische Änderungen zu machen.

Plugin -> Theme 1 -> Theme 2

Als Vererbungsreihenfolge? Natürlich muss zB. Theme 2 die Dinge von Plugin vererbt bekommen. Und natürlich auch die Dinge und Konfig-CSS-Variablen von Theme 1

Geht das?

Schau dir mal https://m.youtube.com/watch?v=rxKBSfI9Iq0&feature=youtu.be

leider bekomm ich es auch mit Hilfe des Videos nicht kompiliert …

Parent-Theme:

"views": [
    "@Storefront",
    "@Plugins",
    "@ParentTheme"
  ],
  "style": [
    "app/storefront/src/scss/overrides.scss",
    "@Storefront",
    "@Plugins",
    "app/storefront/src/scss/base.scss"
  ],
  "script": [
    "@Storefront",
    "app/storefront/dist/storefront/js/parent-theme.js"
  ],

Child-Theme:

"views": [
     "@Storefront",
     "@Plugins",
     "@ParentTheme",
     "@ChildTheme"
  ],
  "style": [
    "app/storefront/src/scss/overrides.scss",
    "@ParentTheme",
    "app/storefront/src/scss/base.scss"
  ],
  "script": [
    "@ParentTheme",
    "app/storefront/dist/storefront/js/child-theme.js"
  ],
  "asset": [
    "app/storefront/src/assets"
  ]

hab mich an das Video gehalten… aber irgendwas klappt wohl noch nicht.

liegt es evtl. dran, dass die Vererbung der SCSS-Variablen aus dem Theme noch nicht klappt (wie im Video erwähnt)? Aber ich möchte ja eigentlich die Variablen nicht vererben, ich möchte sie nur im Parent Theme verwenden da wo sie auch gepflegt werden. Wenn ich im Parent also “rot” einstelle, wird dort im CSS “rot” gesetzt. Aber das “rot” soll natürlich auch bis zum Child-Theme durchschlagen… 

ich kann das Child aber gar nicht erst kompilieren…

 Unable to compile the theme "ChildTheme". Undefined variable $parent-settings-border-radius: /usr/www/users/shopware/custom/plugins/ParentTheme/src/Resources/app/storefront/src/scss/overrides.scss on line 20, at column 1 

das Parent-Theme lässt sich natürlich problemlos kompilieren

EDIT: wenn ich im Parent-Theme sämtliche Variablen rausnehme, und color: red!important schreibe, dann greift das auch im Child-Theme. Liegt also offenbar wirklich daran, dass die Variablen im Parent-Theme nicht korrekt kompiliert werden, wenn man ein Child-Theme aktiv hat…

Kann keiner helfen?

Hey,

so direkt nicht, schaue aber mal bei https://slack.shopware.com/ vorbei, da gibt es viele Entwickler, die ggf. helfen könnten.

Hallo.

Hatte auch mega Probleme. Gibts ja leider keine Anleitung … (hustle)

1. Angefangen damit das beim Erstellen eines Themes auf die “Schreibweise” geachtet werden muss.
   Legt man (als Unwissender) ein Theme per console an mit dem Namen “testtheme” wird daraus ein Plugin -> Testtheme (großgeschrieben)
   In der theme.json wird daraus jedoch name: “testtheme”, @testtheme usw.

Das führt leider dazu das das Theme nicht erkannt wird beim vererbten Kompilierungsversuch.
Es muss somit in der theme.json so heissen wie das Plugin selbst.

2. Wenn dann namentlich alles passen sollte und die Variablen nicht erkannt werden wie bei @FloC3‍ " muss" derzeit, wie im Video auch bemerkt, leider das “config” Array aus dem Parenttheme “kopiert” werden in die Childtheme theme.json.
    

Hoffe das hilft.

gruß

EDIT:
Video description: *Building themes with Shopware 6.2 is easy and fun.*

@FloC3‍

Unable to compile the theme “ChildTheme”. Undefined variable $parent-settings-border-radius: /usr/www/users/shopware/custom/plugins/ParentTheme/src/Resources/app/storefront/src/scss/overrides.scss on line 20, at column 1

–> Verwendest du in einer deiner SCSS-Dateien deines Themes die Variable $parent-settings-border-radius?

–> Ist $parent-settings-border-radius ein Integer-Feld?

Falls ja, musst du ein PluginVariablesSubscriber bauen, in welchem du deine Integer-Werte in Strings umwandelst und dann kannst du diese Werte im SCSS nutzen - hier erscheint dann auch der Error von oben nicht mehr

@dweseom‍

ich verwende die Variablen im Theme, in dem sie in der Theme-Config definiert werden, ohne Probleme. Nur vererben in ein weiteres Theme klappt wohl nicht.

und nein es ist kein Int sondern String 

@FloC3‍ es klappt wenn man das config array mit ins childtheme kopiert. siehe Antwort oben.

es geht aber, m.E nicht um die Variablen aus „config“ in theme.json sondern um die aus dem Verzeichnis „scss/abstract/variables/“ (des Parent-Themes)

Ich weiß ja nicht, ob das Thema für Dich noch relevant ist.
Aber für jeden, der das selbe Problem hat - mir ging es nämlich genau so.
Ein ChildTheme genau nach diese Anleitung erstellt:

1. Theme erstellen

2. Vererbung konfigurieren

Aber egal, was ich anstellte, ich hatte das selbe Problem wie du.
Die config {} Struktur des ParentThemes in mein ChildTheme zu kopieren behob zwar das Problem, konnte aber ja wohl nicht die Lösung sein - das läuft ja der Vererbung entgegen.

Letztlich war die Lösung total einfach. Nach Ergänzung der theme.json des ChildTheme muss zwingend in der Konsole der Befehl

bin/console theme:refresh

durchgeführt werden.
Danach klappte die Vererbung problemlos; alle Config Elemente wurden korrekt angezeigt und auch die Fehlermeldung war verschwunden.