FloC3FloC3 MemberComments: 606 Received thanks: 20 Member since: October 2017

HAllo,

ich möchte aus meinem eigenen Theme einige Base-Variablen überschreiben.

hier meine theme.json

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

und außerdem hab ich dort ein eigenes Feld definiert:

"my-border-radius": {
        "label": {
          "en-GB": "Border-Radius",
          "de-DE": "Border-Radius"
        },
        "type": "number",
        "value": "3",
        "editable": true,
        "block": "general"
      }

das Feld erscheint auch in der Theme-Pflege und ich kann einen Wert eingeben.

Diesen Wert möchte ich dann in der overrides.scss nutzen um Base-Variablen (Bootstrap) zu überschreiben

$border-radius: $my-border-radius;
$border-radius-default: $my-border-radius;

Beim Theme-Compile gibts dann allerdings einen Error: Undefined variable $my-border-radius

Was mach ich falsch? Fehlt noch was?

hab schon versucht in der theme.json noch bei "style" mein "@MyTheme" vor der overrides.scss zu ergänzen, aber dann gibts wohl ne Endlosschleife (Allowed memory size of 536870912 bytes exhausted) ...

Bitte um Hilfe!

Answers

  • FloC3FloC3 MemberComments: 606 Received thanks: 20 Member since: October 2017

    weiß denn keiner etwas dazu? Shopware?

  • MoorleicheMoorleiche MemberComments: 105 Received thanks: 12 Member since: August 2019

    hab schon versucht in der theme.json noch bei "style" mein "@MyTheme" vor der overrides.scss zu ergänzen, aber dann gibts wohl ne Endlosschleife (Allowed memory size of 536870912 bytes exhausted) ...

    Ja weil das Theme sich wahrscheinlich immer selbst aufruft :P

    Kannst du denn z.B. `$sw-color-brand-primary` als Variable nutzen? Das würde den Fehler auf jeden Fall ausgrenzen.

  • FloC3FloC3 MemberComments: 606 Received thanks: 20 edited February 10 Member since: October 2017

    Hallo @Moorleiche‍,

    ja die Variable $sw-color-brand-primary kann ich nutzen... allerdings nur mit der "Standardkonfiguration"

    "style": [
        "app/storefront/src/scss/overrides.scss",
        "@Storefront",
        "app/storefront/src/scss/base.scss"
      ]

    sobald ich mein Theme dort rein packe...

    "style": [
        "@MyTheme",
        "app/storefront/src/scss/overrides.scss",
        "@Storefront",
        "app/storefront/src/scss/base.scss"
      ]

    ... geht auch diese Variable nicht mehr --> Endlosschleife

    meine eigenen Variablen kann ich aber in beiden Fällen nicht nutzen...

    es wäre schön, mal ein offizieles Statement von Shopware zu haben... Für was kann man eigene Themes erstellen, wenn man dann keine Variablen nutzen kann... 

     

    EDIT: scheint, als ob das aktuell wirklich nicht geht... es gibt ein Ticket https://issues.shopware.com/issues/NEXT-6893 bitte voten!

  • Tobias BergeTobias Berge EmployeeComments: 16 Received thanks: 10 Member since: April 2015

    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:

    image

    Viele Grüße
    Tobias

     

  • FloC3FloC3 MemberComments: 606 Received thanks: 20 edited February 10 Member since: October 2017

    Hallo @Tobias Berge‍,

    ich hab einfach via theme:create ein neues angelegt. Es soll das Standard-Theme erweitern bzw. verändern.

    hier meine json:

    {
      "name": "MyTheme",
      "author": "FloC3",
      "previewMedia": "app/storefront/src/assets/preview.png",
      "views": [
         "@Storefront",
         "@Plugins",
         "@MyTheme"
      ],
      "style": [
        "app/storefront/src/scss/overrides.scss",
        "@Storefront",
        "app/storefront/src/scss/base.scss"
      ],
      "script": [
        "@Storefront",
        "app/storefront/dist/storefront/js/my-theme.js"
      ],
      "asset": [
        "app/storefront/src/assets"
      ],
      "config": {
        "blocks": {
          "general": {
            "label": {
              "en-GB": "General Settings",
              "de-DE": "Allgemein"
            }
          }
        },
        "fields": {
          "my-border-radius": {
            "label": {
              "en-GB": "Border-Radius",
              "de-DE": "Border-Radius"
            },
            "type": "number",
            "value": "3",
            "editable": true,
            "block": "general"
          }
        }
      }
    }

    das sieht in der Theme-Config dann so aus, das Feld ist also natürlich sichtbar und der Wert wird auch gespeichert.

    image

    hier meine override.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
    */
    
    $border-radius: $my-border-radius;

    --> das ergibt einen Compile-Error (variable not found)

     

    EDIT: ich hab deins jetzt mal installiert und es funktioniert... hab es nochmal verglichen aber hab keine Ahnung, was bei deinem anders ist.. oder ich bin blind ... hab nur gesehen, dass du einen bestehenden Theme-Block erweitert hast und ich mein Feld in einem neuen Block hatte..

  • Tobias BergeTobias Berge EmployeeComments: 16 Received thanks: 10 Member since: April 2015

    Hi FloC3,

    danke für deine Hilfe. Ich teste es auch nochmal gegen mit einem neuem Block. Könntest du vielleicht dein Theme irgendwie bereit stellen? Dann könnten wir versuchen das zu kompilieren, nur um auszuschließen, dass es wirklich das Theme und nicht irgendwie die Dev-Umgebung ist.

  • ShapeAndShiftShapeAndShift MemberComments: 32 Received thanks: 5 Member since: February 2

    @FloC3@Tobias Berge‍ Also nachdem ich die "override.scss" nach oben gepackt habe und diese aus meienr base.scss heraus genommen habe funktioniert auch die Überschreibung der vorhandenen Variablen Thumb-Up

    Allerdings ganz normal ein Theme Plugin - Jetzt kein Child Theme vom eigenen Theme.

  • FloC3FloC3 MemberComments: 606 Received thanks: 20 Member since: October 2017

    Hallo,

    also im Theme hab ich das über die theme.json mit dem Override und logischerweise auch dem Einbinden der anderen Bootstrap Variablen, Mixins und Co hinbekommen.

    Aber wie läuft das in einem Plugin? Da gibts ja keine theme.json ...

    muss ich das echt über hardcoded Imports machen?

    @import '../../../../../../../platform/src/Storefront/Resources/node_modules/bootstrap/scss/_functions.scss';
    @import '../../../../../../../platform/src/Storefront/Resources/node_modules/bootstrap/scss/_variables.scss';
    @import '../../../../../../../platform/src/Storefront/Resources/node_modules/bootstrap/scss/_mixins.scss';
    @import '../../../../../../../platform/src/Storefront/Resources/src/style/skin/shopware/abstract/variables/_theme.scss';
    @import '../../../../../../../platform/src/Storefront/Resources/src/style/skin/shopware/abstract/variables/_bootstrap.scss';

    oder gibts eine andere Lösung analog zu Themes?

  • FloC3FloC3 MemberComments: 606 Received thanks: 20 Member since: October 2017
Sign In or Register to comment.