Eigene Theme Konfiguration - Grunt Fehler

Shopware 5 Themes & Design
1

Hallo zusammen,

ich habe heute ewig verzweifelt versucht eigene Theme Konfigurationen für mein Theme an dem ich gerade Arbeite (lokal mit MAMP unter OSX) einzurichten.

Das die Konfiguration im Shop erscheint hat soweit auch erstmal geklappt. 

Nun möchte ich die Variabelen per Less einbinden. Da kommt es aber zu Problemen.

Hier mein Code der Theme.php

public function createConfig(Form\Container\TabContainer $container)
    {
        // Create the fieldset which is the container of our field
        $fieldset = $this->createFieldSet(
            'my_custom_settings',
            'My custom settings'
        );

        // Create the textfield
        $textField = $this->createTextField(
            'text',
            'TEXT',
            '16px'
        );

        // Create the color picker field
        $colorPickerField = $this->createColorPickerField(
            'navi-bg',
            'Navigation Hintergrund',
            '#62b74b'
        );

        // Adding the fields to the fieldset
        $fieldset->addElement($textField);
        $fieldset->addElement($colorPickerField);

        // Create the tab which will be named "My custom colors"
        $tab = $this->createTab(
            'my_custom_tab',
            'My custom tab'
        );

        // ...add the fieldset to the tab
        $tab->addElement($fieldset);

        // ...last but not least add the tab to the container, which is a tab panel.
        $container->addTab($tab);
    }

In der main-navigation.less habe ich folgenden Code eingefügt:

.navigation-main {
  background-color: @navi-bg;
  color: #eb008d;
  }
}

Wenn ich die Dokumentation richtig verstnanden habe dann soll man ja so auf die Werte zugreifen können. Wenn ich Grunt laufen lasse erhalten ich aber die folgende Fehlermeldung:

NameError: variable @navi-bg is undefined in ../themes/Frontend/xxx/frontend/_public/src/less/_modules/main-navigation.less on line 3, column 21:
>> 2 .navigation-main {
>> 3 background-color: @navi-bg;
>> 4 color: #eb008d;

Was habe ich übersehen? Muss ich evtl. noch irgendwas in der Theme.php oder in der config_1.json definieren?

Was mir aufgefallen ist: Ich habe irgendwann mal background-color: @navi-bg in background-color: 16px umgewandelt, im Anschluss im Shopware Backend das Theme neu kompiliert und mir eine neue config_1.json erstellt. in dieser war der Wert “navi-bg” dann enthalten und wenn ich den Wert im Anschluss background-color: @navi-bg wieder einstelle läuft Grunt ohne Fehler durch. Aber dieser Weg kann ja nicht sinn der Sache sein.

Ich hoffe mir kann jemand weiterhelfen. Ich bin mit meinem Latein am Ende.

Gruß,
Manuel

2

Hast du nachdem du die Theme.php angepasst hast einen neuen Config Dumb gemacht? bzw. Funktioniert es nur mit grunt nicht oder auch über das Backend Theme kompilieren nicht?

./bin/console sw:theme:dump:configuration

 

3

Das hatte ich nicht gemacht. Habe es eben mal getestet und die vorhandene Einträge meiner Konfiguration gelöscht. Sehe der erstellt die dann. Behebt mein Problem aber auch nicht. 

Zu deiner anderen Frage: Nein, im Backende geht es dann wenn auch nicht. Da ist also irgendein Fehler im Code. Ich steige da gerade erst bisschen Tiefer ein und komme nicht recht hinter die Logik von dem ganzen.

Wie sollte das denn funktionieren?

  • Wenn ich einen Config Dump mache wird in meinem Fall der Wert ‘navi-bg’ genommen und dieser dann in die config_1.json eingefügt? Welchen Zweck hat das dann an dieser Stelle bzw. an welcher Stelle wird darauf zugegriffen?

  • Wenn ich in einer Less Datei schreibe @navi-bg sagt er mir ja dieser Wert ist nicht definiert. Bei anderen Beispielen habe ich oft geshen, dass dann beispielsweise in der colors.less noch mit einem weiteren Wert für die Konfiguration gearbeitet wird. In meinem Fall beispielsweise so:

    @config-navi-bg-color: @navi-bg-color;

Nur müsste ich in der der main-navigation.less dann ja den wert @config-navi-bg-color als Wert für die Farbe hinterlegen und dann kommt bei Grunt logischerweise der Fehler, dass @navi-bg-color nicht definiert ist und ich bin genauso weit wie vorher.

Ich stehe gerade wirklich auf dem Schlauch.