Globale Styles, Checkout-Styles und Fonts pflegen.
Das Styling einer Website wird pro Website gepflegt. Dadurch können mehrere Websites derselben simplebis-Umgebung unterschiedliche Designs verwenden. Neben globalen Styles können separate SCSS-Dateien für einzelne Seiten oder Komponenten und ein eigener Checkout-Style gepflegt werden.
Die Pflege erfolgt im simplebis-manager unter Webseiten. Dort eine Website öffnen und den Bereich Einstellungen verwenden. Im Abschnitt Design werden Favicon, globale SCSS-Dateien und weitere Designwerte gepflegt. Seiten und Komponenten können zusätzlich eigene SCSS-Dateien auswählen.
main.scss ist der globale Style-Einstieg der Website. Beim Speichern wird daraus CSS kompiliert. SCSS-Dateien mit globalem Modus werden gemeinsam mit main.scss in den globalen Website-Style übernommen.
Manuelle SCSS-Dateien werden separat kompiliert und können gezielt bei Seiten oder Komponenten ausgewählt werden. Der Key einer manuellen Datei bestimmt den erzeugten CSS-Dateinamen. Der Key main ist reserviert und wird nicht als manueller Style verwendet.
checkout.scss ist verfügbar, wenn das Shop-Modul aktiv ist. Dieser Style wird nur auf der Website-Checkout-Seite geladen und beim Speichern zu CSS kompiliert. Zusätzlich können Checkout-Logo und Checkout-Erfolgsseiten in den Website-Einstellungen gepflegt werden.
Fonts können über den öffentlichen simplebis-Asset-Endpunkt eingebunden werden. Die Font-Liste ist unter /api/v1/assets/fonts/list abrufbar; eine TTF-Datei wird über /api/v1/assets/fonts/ttf?font=FONT_KEY geladen. In SCSS kann das beispielsweise so aussehen:
@font-face {
font-family: "BrandFont";
src: url("/api/v1/assets/fonts/ttf?font=Lato_regular") format("truetype");
font-weight: 400;
font-style: normal;
font-display: swap;
}
body {
font-family: "BrandFont", sans-serif;
}
Das Favicon wird im Website-Design gepflegt und erwartet eine PNG-Datei mit 64x64 Pixeln. Bilder und andere Medien werden über die Dateiauswahl eingebunden. Bildgrößen und Varianten werden unter Einstellungen > Dateien gepflegt.