theme.json verstehen

Das Herz jedes Themes

Die theme.json ist das Herz jedes Themes. Sie liegt unter src/Resources/theme.json und beschreibt, welche Stile und Skripte geladen werden, in welcher Reihenfolge geerbt wird und was der Betreiber im Theme Manager einstellen kann.

Die zentralen Schlüssel

SchlüsselBedeutung
nametechnischer Name des Themes
authorErsteller
descriptionBeschreibung (übersetzbar)
previewMediaVorschaubild für Admin/Store
viewsReihenfolge der Template-Vererbung
styleSCSS-Einstiegspunkte (Reihenfolge zählt)
scriptJavaScript-Einstiegspunkte
assetPfade für Bilder und Fonts
configFelder für den Theme Manager
configInheritanceKonfiguration von Eltern-Themes erben

Ein Grundgerüst

{
  "name": "MyTheme",
  "author": "René van Dinter",
  "views": [
    "@Storefront",
    "@Plugins",
    "@MyTheme"
  ],
  "style": [
    "@Storefront",
    "app/storefront/src/scss/base.scss"
  ],
  "script": [
    "@Storefront",
    "app/storefront/dist/storefront/js/my-theme.js"
  ],
  "asset": [
    "@Storefront",
    "app/storefront/src/assets"
  ]
}

Warum @Storefront überall auftaucht

Die Referenz @Storefront bindet jeweils die Basis der Standard-Storefront ein. Steht sie in style, script und views an erster Stelle, erbt das Theme alles Vorhandene – und ergänzt es nur. Lässt man sie weg, startet man bei null (selten gewollt).

Reihenfolge ist Programm

Bei style und views entscheidet die Reihenfolge: Was später kommt, überschreibt Früheres. So baut man gezielt auf der Storefront auf, ohne sie komplett neu zu schreiben.

Kurz: theme.json bündelt Stile, Skripte, Assets, Vererbung und die Theme-Manager-Optionen an einer Stelle. @Storefront zuerst = auf dem Standard aufbauen statt bei null anfangen.