Zugriff auf SCSS-Variablen aus Plugin-Konfiguration

Ich habe in meinem Plugin die folgende Anleitung angewendet, um bestimmte Werte der Plugin-Konfiguration als SCSS-Variablen zur Verfügung zu stellen:

https://docs.shopware.com/en/shopware-platform-dev-en/how-to/plugin-scss-variables

Mir ist nun nicht ganz klar, wie ich nach Speichern der Plugin-Konfiguration an diese Werte gelange. So soll im Plugin zum Beispiel ein Farbwert $my-color angelegt werden. Dieser ist nirgend zu finden.

Habe ich etwas übersehen?

Hat sich erledigt, mir fehlte noch folgende Zeile:

use Shopware\Storefront\Event\ThemeCompilerEnrichScssVariablesEvent;

Ohne klappt es natürlich nicht.

Aber nächste Frage dazu: Ist es sinnvoll, dass der Merchant das Theme nach dem Speichern neuer Konfigurationswerte selbst compilen muss?

Gibt es eine Möglichkeit, dass beim Speichern mit zu erledigen?

@NiHa schrieb:

Aber nächste Frage dazu: Ist es sinnvoll, dass der Merchant das Theme nach dem Speichern neuer Konfigurationswerte selbst compilen muss?

Gibt es eine Möglichkeit, dass beim Speichern mit zu erledigen?

Genau davor stehe ich auch. Ich hab rausgefunden, das man dann unter  
Content -> Themes

sein aktives Theme auswählen muss und einfach einmal auf „Save“ klickt und die Einstellungen aus dem Plugin werden übernommen.

Ich hab jetzt nach dem ursprünglichen Befehl gesucht und den  ThemeService gefunden der die  compileTheme Function beinhaltet. 

Aber dann steh ich vor dem Problem, dass ich mich in das speichern des PluginKonfig reinhängen muss. 
Das finde ich auch noch raus, aber ist das so angedacht?

Ansonsten muss ich das in die Beschreibung reinschreiben, weil dem Shopbetreiber ist das sicherlich nicht bewusst bei solchen „technischen“ Sachen das Theme neu zu compilieren. Oder kennt er das noch so von SW5.2 und ich mach mir umsonst da sorgen?

Einfach nach Plugin-Config-Änderungen mal pauschal den Cache löschen und Theme neu abspeichern, weil ich ja nicht weiß, was wann da technisch dahinter steckt :frowning:

Würde mich über nen anderen Ansatz auch freuen.

Gruß
DaMardl

 

 

Okay, die Sache mit Theme Service geht nicht, weil das nur bei Installieren oder Updaten von einem Plugin verwendet wird wo es Events gibt, in die man sich reinhängen kann (PluginPostUpdateEvent). Und die greifen um die Urhzeit nicht mehr :wink:

Das speichern in der Plugin Konfiguration ruft folgenden Api-Endpunkt auf und der hat keine Events, in die man sich reinhängen kann.

/api/v1/_action/system-config/batch

Ich werde es erstmal über die Beschreibung lösen.

Gruß

DaMardl

Ja, so habe ich es nun auch erst einmal gelöst. Schön wäre hier in Zukunft eine benutzerfreundliche Lösung. Dazu habe ich nun einen Issue angelegt. Wer das Feature noch vermisst: Bitte voten!

https://issues.shopware.com/issues/NEXT-8780

@NiHa schrieb:

Ja, so habe ich es nun auch erst einmal gelöst. Schön wäre hier in Zukunft eine benutzerfreundliche Lösung. Dazu habe ich nun einen Issue angelegt. Wer das Feature noch vermisst: Bitte voten!

https://issues.shopware.com/issues/NEXT-8780

Hab mal gevotet.

Das speichern der Konfig-Daten sind sehr generisch aufgebaut. War auch in SW 5 schon so, aber da konnte man sich zumindest in ein Event reinhängen und den Theme Cache invalidieren. 

Mal schauen was rauskommt.

gruß

daMardl

Hallo.

ich versuche auch gerade wie in der Doku beschrieben, mein SCSS um Variablen zu erweitern. Das funktioniert auch eigentlich tadelos zumindest während das Plugin aktiviert ist. Deaktiviere ich das Plugin und aktiviere es wieder, bekomme ich folgende Meldung:

Plugin could not be activated due to error message "Unable to compile the theme „Storefront“. Undefined variable $MEINVARIABLE: /home/vagrant/shopware-dev/custom/plugins/MEINPLUGIN/src/Resources/app/storefront/src/scss/base.scss on line 2, at column 3 Call Stack: #0 function breakpoint-max /home/vagrant/shopware-dev/vendor/shopware/platform/src/Storefront/Resources/app/storefront/vendor/bootstrap/scss/mixins/_breakpoints.scss on line 72 #1 mixin media-breakpoint-down 

Liegt wohl daran dass das Event 

 ThemeCompilerEnrichScssVariablesEvent

während der Plugin-Aktivierung nicht gefeuert wird und somit auch nicht die Variablen gesetzt werden. Gibt es dafür eine Lösung? Ein zweites Event?

 

Gruß Mike

@_MikeB schrieb:

Hallo.

ich versuche auch gerade wie in der Doku beschrieben, mein SCSS um Variablen zu erweitern. Das funktioniert auch eigentlich tadelos zumindest während das Plugin aktiviert ist. Deaktiviere ich das Plugin und aktiviere es wieder, bekomme ich folgende Meldung:

Plugin could not be activated due to error message "Unable to compile the theme „Storefront“. Undefined variable $MEINVARIABLE: /home/vagrant/shopware-dev/custom/plugins/MEINPLUGIN/src/Resources/app/storefront/src/scss/base.scss on line 2, at column 3 Call Stack: #0 function breakpoint-max /home/vagrant/shopware-dev/vendor/shopware/platform/src/Storefront/Resources/app/storefront/vendor/bootstrap/scss/mixins/_breakpoints.scss on line 72 #1 mixin media-breakpoint-down 

Liegt wohl daran dass das Event 

ThemeCompilerEnrichScssVariablesEvent

während der Plugin-Aktivierung nicht gefeuert wird und somit auch nicht die Variablen gesetzt werden. Gibt es dafür eine Lösung? Ein zweites Event?

 

Gruß Mike

Für alle die vor dem gleichen Problem stehen: Default variablen in scss brachten die Lösung ;) 

ich versuche das auch gerade zum Laufen zu bekommen, allerdings führt bei mir der ThemeVariableSubscriber nie seine Function aus.

habs genauso wie im Beispiel gezeigt… aber es passiert einfach nix.

Ich habe auch gerade meine Probleme damit. @NiHa‍ Könntest du vielleicht dein komplettes Codebeispiel teilen?

Hallo,

habe auch alles woweit am Laufen jedoch auch das Problem dass bei jeder Änderung im Plugin das Template von Hand neu kompiliert werden muss.
Gibt es schon eine Lösung wie man dies automatisch ablaufen lassen kann?

@voksy123‍

Bisher leider nein: Shopware Issuetracker

1 „Gefällt mir“

Hallo nochmal,

schreibe nun in meta.html.twig den benötigten CSS Style

{% sw_extends '@Storefront/storefront/layout/meta.html.twig' %}

{% block layout_head_stylesheet %}

    {{ parent() }}

    {% set config = page.header.extensions['pluginConfig'].get('config') %}

    
        .itrTopbar-wrapper {{ '{' }}
            background-color: {{config.backgroundColor}};
            color: {{config.textColor}};
            font-size: {{config.fontSize}};
        {{ '}' }}
        .itrTopbar-wrapper .container {{ '{' }}
            justify-content: {{config.justifyContent}};
        {{ '}' }}
        .itrTopbar-wrapper .container .itrTopbar-item a {{ '{' }}
            color: {{config.textColor}};
        {{ '}' }}
        .itrTopbar-wrapper .container .itrTopbar-item a:hover {{ '{' }}
            color: {{config.linkColor}};
        {{ '}' }}
    

{% endblock %}

Oder wie habt ihr das vorrübergehend gelöst?