Theme-Variablen in der Konfiguration verwenden

In dieser Anleitung erfährst du, wie du Theme-Variablen in der Theme-Konfiguration verwenden kannst.

In der Theme-Konfiguration wirst du gelegentlich Variablen in Farbfeldern finden. Dies vereinheitlicht das Farbbild deiner Storefront und erleichtert dir das Farbbild an deine Wünsche anzupassen.

Für Variablen gibt es zwei relevante Schreibweisen:

1. Shopware Variablen:

   • $sw-color-brand-primary = Primärfarbe in der Storefront

   • $sw-color-brand-secondary = Sekundärfarbe in der Storefront

   • $sw-text-color = Textfarbe in der Storefront

   • $sw-background-color = Hintergrundfarbe in der Storefront

   • usw.

2. ThemeWare® Variablen:

   • $twt-color-brand-primary-light = Eine helle Nuance der Primärfarbe

   • $twt-color-brand-primary-dark = Eine dunklere Nuance der Primärfarbe

   • $twt-color-brand-secondary-light = Eine helle Nuance der Sekundärfarbe

   • $twt-color-brand-secondary-dark = Eine dunklere Nuance der Sekundärfarbe

   • usw.

Vorwort

Derzeit ist die Nutzung von Variablen in Themes mit Vorsicht zu genießen! In Shopware 6 müssen Variablen vor der Nutzung in einem Konfigurationsfeld initialisiert worden sein. Eine Variable kann also nicht in einem Konfigurationsfeld vor dem eigentlichen Konfigurationsfeld der Theme-Variable verwendet werden.

Dies wirkt sich besonders auf Theme-Duplikate aus, da diese – warum auch immer – derzeit nicht die vom Entwickler vorgesehene Reihenfolge für Konfigurationsfelder erhalten.

Hinweis: Bei allen Konfigurationsfeldern gilt, dass du Variablen (z.B. $sw-color-brand-secondary) nur bedingt nutzen kannst. Technisch gesehen muss die entsprechende Variable vor Nutzung in einem anderen Feld bereits initiiert worden sein.

Erhältst du einen Kompilierungsfehler, nutze bitte einen validen Farbwert anstatt der Variable.

Variablen finden

Die Variable für jedes Konfigurationsfeld findest Du schnell über unseren ThemeWare® Config-Finder. Gib dort einfach die Bezeichnung eines Feldes und ggf. den Bereich in dem du suchen möchtest ein (z.B. "typografie headline textfarbe") und schon findest du das passende Konfigurationsfeld bzw. passende Konfigurationsfelder.

Die Variablen sind als "Technischer Name" für jedes Feld aufgelistet.

Beim kompilieren des Themes werden die Variablen durch den im entsprechenden Konfigurationsfeld hinterlegten Wert ersetzt.

Variablen verwenden

Variablen kannst du in verschiedenen Konfigurationsfeldern nutzen.

Einschränkung: In Shopware Standard-Konfigurationsfeldern lassen sich aufgrund der Theme-Vererbung keine Theme-Variablen ($twt...) nutzen.

Sind Konfigurationsfelder grundsätzlich nicht geeignet, findest du im Hilfe-Text einen entsprechenden Hinweis.

Tipp: Am besten speicherst und kompilierst nach jeder verwendeten Theme-Variable einmal das Theme um zu prüfen ob die Variable im entsprechenden Konfigurationsfeld möglich ist.

Falls dies nicht möglich ist, erhältst du den nachfolgenden Fehler.

Fehler "Undefined variable"

Dieser Fehler tritt auf, wenn Shopware eine Variable nicht "bekannt" ist. Dies würde bei der Arbeit mit Theme-Variablen auftreten wenn (wie oben beschrieben) die Variable vor der Nutzung nicht bereits initialisiert wurde.

Ändere in diesem Fall die Variable wieder in einen HEX- oder RGB-/RGBA-Wert zurück.