Custom Layout & CSS

tip

Eine Grundlegende Einführung in das Thema findet sich in der Benutzer-Dokumentation

Unter "Design > Layout" kann man bekanntlich ein Theme für den Konfigurator wählen:

Hier kann man unter

Loading...

ein custom Theme erstellen. Diese Möglichkeit das HTML und CSS des gesamten Konfigurators auch als Endbenutzer in der Hand zu haben eröffnet einem freie Gestaltungsmöglichkeiten. Dabei ist die Kombination von anpassbarem Layout und dem Upload von CSS-Dokumenten entscheidend.

Custom Layout

Unser Layout für das Theme "Standard-Rechts" sieht z.B. so aus:

<div style="
display:grid;
grid:
'header header header header' min-content
'top-left top-center top-right sidebar' 1fr
'mid-left mid-center mid-right sidebar' 1fr
'bot-left bot-center bot-right sidebar' 1fr
/ 1fr 1fr 1fr 400px;
height: 100%;"
>
  <header style="gridArea: header;">
    <Header/>
  </header>
  <section style="gridArea: 2 / 1 / span 3 / span 3">
      <Content/>
  </section>
  <div style="gridArea: top-left; padding: 16px;">
    <Logo/>
  </div>
  <div style="gridArea: top-right; justifySelf: end;">
    <SceneButtons/>
  </div>
  <div style="gridArea: bot-right; padding: 16px; placeSelf: end; display: flex; flexDirection: row; zIndex: 1;">
    <Price/>
    <ExitButtons/>
  </div>
  <div style="gridArea: sidebar; overflow: auto; zIndex:1; box-shadow: 6px 0 4px -4px #999, -6px 0 4px -4px #999; height: calc(100vh - 38px - 64px ); display: grid; alignContent: space-between;">
      <Sidebar design="topmenu"></Sidebar>
      <footer style="position: sticky; bottom: 0; background: white">
          <LabelActionsDisplay></LabelActionsDisplay>
          <NavigationButtons></NavigationButtons>
      </footer>
  </div>
</div>

Hier können beliebige HTML konforme Anpassungen gemacht werden.
Die wirklichen Anwendungsblöcke stellen wir im K3 bereit.
Diese können einfach verwendet werden und stellen eine responsive Funktionsweise bereit:

• Header: Das ist unser Header-Element. Hier werden alle Reiter des Konfigurators angezeigt.
• Content: Das ist die Visualisierung des Konfigurators. Im Standard werden hier je nach Konfiguratortyp entweder eine bildergestützte 360Grad-Ansicht oder eine 3D-Szene angezeigt.
• Sidebar: Das ist die Sidebar des Konfigurators. Hier werden die Variablen mit ihren Werten (je nach Reiter) dargestellt.
• SceneButtons: Darin enthalten sind der AR-Button und im Admin-Panel der Button zur Erstellung von Screenshot-Cameras.
• Price: Der Preis laut Preisberechnung zum aktuellen Zustand.
• ExitButtons: Eine Gruppe mit den definierten Aktionen zum Konfigurationsabschluss.
• Logo: Das Logo des Konfigurators
• NavigationButtons: "Zurück" und "Weiter" Buttons für die Reiternavigation.
• LabelActionsDisplay: Der Bereich in dem Label-Actions (siehe Konfiguratorregeln) angezeigt werden.

Demo

<div class="oc">Hello from OC!</div>

Dieses Layout stellt einen Extremfall da, und ersetzt den gesamten Inhalt des Frontends mit einem "Hello from OC". Dabei wird dem umliegenden diveine Klasse "oc" gegeben:

Das Admin-Panel ist natürlich weiterhin sichtbar und funktionsbereit.

Das eignet sich nun wunderbar, um diese Klassennamen im CSS zu verwenden:

.oc {
  color: red;
}

Allgemeines CSS

Unter "Design > CSS" kann man eine eigene CSS-Datei hochladen oder verlinken. Dieses CSS kann sich auf folgende Struktur stützen:

Geteilte Komponentenklassen

Im gesamten Konfigurator teilen sich wiederkehrende Komponenten ihre CSS-Klassen.
So ist es z.B. möglich alle Buttons im Konfigurator über die Klasse MuiButton-root zu stylen.

Am besten schaut man sich die geteilten Komponentenklassen in der Entwicklerkonsole des Browsers an.

Globale Klassen

Im K3 gibt es globale Systeme die ebenfalls strukturiert klassifiziert sind:

• OrderDialog: Mit OrderDialog-Klassen versehen.
• InfoSelectionDialog: Mit InfoSelection-Klassen versehen.
• InvalidSelectionIcon: Mit InvalidSelection-Klassen versehen.

Variablen

Keys

• Wenn im Profil der Entwicklermodus aktiv ist, kann einer Variablen ein Key gegebenen werden,.
• Wenn eine Variable einen Key hat, dann hat sie automatisch ein umliegendes div -Element mit diesem Key als Klassennamen

Checked-State

• Alle Variablen haben (insofern in der UI mehrere Auswahlen sichtbar sind) einen Klassennamen, der nur dem ausgewählten Element vergeben wird: MuiChecked.
• Variablen mit Dropdown-Funktionalität haben im Dropdown eine Markierung des aktuell aktiven Elements per aria-label=true Attribut.

Gruppen

• Wenn im Profil der Entwicklermodus aktiv ist, kann einer Gruppe ein "Key" gegebenen werden.
• Wenn eine Gruppe einen Key hat, dann wird dieser Key zum 'configurator' hinzugefügt, wenn diese Gruppe aktiv ist.

tip

Es ist zu empfehlen im CSS generell über die Klasse configurator zu selektieren, da sonst auch das Admin-Panel mit gestyled wird.