SCSS und JavaScript

SCSS-Editor des CSS/JS-Managers mit Shopware Theme-Variable — SCSS direkt in der Administration bearbeiten und Shopware Theme-Variablen verwenden.

SCSS und CSS

Normales CSS ist gültiges SCSS. Beim Kompilieren wird der Code aktiver Container nach den Theme- und Plugin-Styles eingebunden. Dadurch stehen Theme-Variablen, Mixins und Funktionen zur Verfügung und das Ergebnis landet im Theme-CSS ohne zusätzlichen Stylesheet-Request.

Verwende Shopware-Variablen wie $sw-asset-theme-url statt fest codierter Asset-Pfade.
Für seitenspezifische Styles kannst du Body-Klassen wie body.is-ctl-checkout voranstellen.
Container mit Rule-Builder-Regel dürfen kein @extend verwenden; wiederhole Deklarationen oder nutze ein Mixin.

JavaScript

Fokussierter JavaScript-Editor des CSS/JS-Managers mit Storefront-Code

JavaScript wird beim erfolgreichen Theme-Kompilieren erfasst und am Ende des <body> inline ausgegeben. Jeder Container läuft in einem eigenen Funktionsbereich und in einem eigenen try/catch. Ein Fehler in einem Container stoppt dadurch nicht die übrigen Container; Details erscheinen mit dem Container-Namen in der Browser-Konsole.

Der Code läuft vor der Initialisierung der Shopware-Storefront-Plugins.
Warte bei Bedarf auf window.load.
Der Code wird nicht von webpack oder Vite verarbeitet.
Das Plugin bietet keine Twig-/HTML-Templates, Planung, Medienverwaltung, Import/Export oder Live-Vorschau.