Kompilieren & Workflow

theme:compile, Watcher, Checkliste

Ein Theme wird nicht „live" interpretiert – SCSS und JavaScript müssen kompiliert werden. Wer den Build-Ablauf kennt, spart sich die häufigsten „Warum sehe ich meine Änderung nicht?"-Momente.

Kompilieren

Nach jeder Änderung an SCSS oder theme.json:

bin/console theme:compile

Der Befehl baut die Stile aller zugewiesenen Themes neu. Erst danach sind Änderungen in der Storefront sichtbar.

Der Entwicklungs-Watcher

Ständig manuell zu kompilieren ist im Alltag zu langsam. Der Storefront-Watcher baut bei jeder Dateiänderung automatisch neu und lädt die Seite nach:

bin/console theme:dump      # Variablen für den Watcher bereitstellen
./bin/watch-storefront.sh   # Watcher starten

theme:dump schreibt die aktuellen Theme-Variablen heraus, damit der Watcher sie kennt – nützlich auch nach Änderungen an config-Feldern.

JavaScript einbinden

Eigenes JS gehört in den script-Block der theme.json und wird mitgebaut:

"script": [
  "@Storefront",
  "app/storefront/dist/storefront/js/my-theme.js"
]

Die Storefront nutzt ein Plugin-System für JavaScript – eigene Skripte docken daran an, statt global im Fenster zu hantieren.

Wenn Änderungen nicht erscheinen

Eine kurze Checkliste für den Klassiker „nichts ändert sich":

  • theme:compile ausgeführt?
  • Theme dem richtigen Verkaufskanal zugewiesen (theme:change)?
  • bin/console cache:clear gemacht?
  • Im Browser Hard Reload (Cache umgehen)?
  • SCSS-Datei tatsächlich im style-Block eingetragen?

Vor dem Ausliefern

Für Produktion einmal sauber neu bauen, Theme einem Kanal zuweisen und in der echten Storefront gegenprüfen – auch mobil. Ein Theme lebt vom Detail, und das zeigt sich erst im gebauten Zustand.

Kurz: theme:compile nach Änderungen, in der Entwicklung den Watcher, JS über den script-Block – und bei unsichtbaren Änderungen die Checkliste durchgehen (kompilieren, Kanal, Cache, Hard Reload).