Wie passe ich das Aussehen an meine Webseite/meinen Shop an?

Voraussetzungen

• Sie haben einen Konfigurator angelegt

Benutzung Ihres Logos

• Gehen Sie zur Vorschau Ihres Konfigurators
• Klicken Sie auf das Stift Icon in der Nähe des Logos (oben links, falls Sie noch keines eingerichtet haben).
• Nun können Sie eine Bilddatei mit Ihrem Logo hochlagen. Sie wird dann über der Produktdarstellung angezeigt.
• Sie können noch Größe und Transparenz des Logos anpassen.
• Ebenfalls können Sie eine Webadresse angeben, die bei Klick auf das Logo geöffnet werden soll.
• Klicken Sie auf
  Loading...

Auswahl des Layouts

• Gehen Sie zum Editor Ihres Konfigurators
• Klicken Sie in der Mitte der Menüleiste oben auf das Desktop-Symbol. Sie erhalten nun die Desktop-Ansicht dargestellt.
• Klicken Sie auf das Stift-Symbol hinter der Auswahl Mobil/Desktop
• Hier sehen Sie eine Auswahl von 6 vorgefertigen Layouts für Ihren Konfigurator. Sie können eine wählen.
• Klicken Sie zum Schluss auf
  Loading...
  und dann auch
  Loading...

Individuelles Layout erstellen

info

Um individuelle Layouts zu verwenden, benötigen Sie grundlegende Kennnisse in HTML und CSS.

• Öffnen Sie dazu wieder die Layout-Auswahl
• Wechseln Sie dazu auf
  Loading...
  .
• Wenn Sie möchten, können Sie das aktuell gewählten Layout hier importieren:
  Loading...
  .
• Nun können Sie Ihr Layout mit etwas HTML und CSS anpassen.
• Klicken Sie zum Schluss auf
  Loading...
  und dann auch
  Loading...

Welche Elemente stehen hier zur Verfügung?

Sie können im Layout fast alle HTML- und CSS-Konstrukte verwenden. Zusätzlich stehen Tags für spezifische Aufgaben bereit:

<GroupsNavigation />

Der Header mit den Konfigurationsschritten.

<GroupsView design="topmenu" />

Die komplette Seitenleiste, design: accordion, topmenu oder onlysidebar

<GroupOutlet />

Zeigt das Layout des aktuellen Schrittes an (s.u.)

<StandaloneVariable variableKey="key" sticky="true"/>

Zeigt eine einzelne Variable an variableKey: key der Variable. sticky="true", wenn die Variable unabhängig von der aktiven Gruppe angezeigt werden soll.

<StandaloneGroupWrapper groupKey="gruppe"/>

Zeigt einen einzelnen Schritt an. groupKey: key des Schrittes

<ComponentBreadcrumbs />

Anzeige der Navigation bei Produktkomponenten

<SceneView />

3D- oder Bild-Anzeige

<SocialShareButtons />

Teilen-Knöpfe

<SceneButtons />

AR- und weitere Knöpfe

<EditScene />

Knopf für Verschieben von Modellen

<Price />

Standard Preis-Darstellung

<ExitButtons />

Darstellung der Aktions-Knöpfe

<Logo />

Das Logo

<FullScreenButton />

Knopf für Vollbilddarstellung

<NavigationButtons />

Weiter und Zurück

<OcBranding />

Die Branding-Komponente. Muss jederzeit sichtbar positioniert werden, auch wenn keine Sidebar verwendet wird.

<LabelActionsDisplay />

Anzeige von per Regel zugesteuerten Texten

<TopLeft></TopLeft>

Grid-Position, auch MidCenter, BotRight und alle Kombinationen davon

<CustomLayoutComponent name="customComponent" />

Hier kann eine eigene React-Komponente eingebunden werden. Diese muss in einer Erweiterung vorhanden sein. name: Name der Komponente.

<SwitchState enabled="true" name="collapse" variableKey="key" >
  Inhalt
</SwitchState>`
<SwitchState enabled="false" name="collapse" variableKey="key" >
  Inhalt
</SwitchState>`

Anzeige von Inhalten abhängig vom Wert eines Ja/Nein-Merkmales.

<SwitchButton name="collapse">
  <SwitchStateOn name="collapse">
    Inhalt
  </SwitchStateOn>
  <SwitchStateOff name="collapse">
    Inhalt
  </SwitchStateOff>
</SwitchButton>

Anzeige von Inhalten abhänggi von einer Benutzerauwahl.

<TranslatableText text="Hello World" />

Zeigt einen Text an. text: Text in der default Sprache. Dieser Text kann dann über den Stift im Editor übersetzt werden.

<HoverContent elementId="element" ></HoverContent>

Zeigt den Inhalt nur wenn das Element gehovert wird in einem Popover. elementId: ID eines HTML Elements (z.b. <div id="element"/>).

<PriceData type="overall" mwst="19" language="de" currency="eur" instanciated="false" />

Preis-Darstellung in Textform. type: overall, mwst, netto, mwst: Mehrwertsteuer, language: Sprache, currency: Währungskürzel instanciated: Ob bei Multiplizitätsvariablen der Preis gefiltert wird (true) oder global bleibt (false).

<PriceDataFromVariable currencyVariableKey="key" currencyAttributeKey="key" />

Preis-Darstellung mit Währungsdaten aus einer Variable. currencyVariableKey: key der Variable, currencyAttributeKey: key des Attributs.

<ActionOverview actionKey="key" step="navigate" />

Zeigt den inhalt einer Bestell Aktion an. actionKey: key der Aktion, step: navigate, overview, contact, confirmation

Typography, Switch, Box, Link, Stack, Button, Divider

Verschiedene graphische Gestaltungselemente.

ExpandCircleDownIcon, KeyboardArrowDownIcon, CloseIcon, MoreVertIcon

Verschiedene Icons.

Verschiedene Layouts in verschiedenen Schritten

Wenn im Layout die Komponente GroupOutletverwendet wird, dann blendet sie den Inhalt des Layouts aus dem aktiven Konfiurationsschritt ein. Im Extremfall enthält das Layout nur diese Komponente, dann werden ausschliesslich die Layouts der Schritte angezeigt.

So fügen Sie einem Schritt ein Layout hinzu:

• Wechseln Sie zu dem Schritt
• klicken Sie auf das Stift-Symbol hinter dem Namen des Reiters
• Schalten Sie in der Seitenleiste Individuelles Gruppen-Design an
• Erfassen Sie das Layout in dem nun erschienen Eingabefeld.

Mobile Layouts

Ebenso wie das Desktop-Layout können Sie auch das Layout bestimmen, dass Ihr Konfigurator auf einem mobilen Gerät zeigt. Wählen Sie dazu einfach die mobile Ansicht im Editor und öffnen Sie dann die Layout-Auswahl

info

Derzeit stellen wir nur ein mobiles Standard-Layout zur Verfügung. Sie können aber bereits individuelle mobile Layouts erstellen.

Anpassen der Farben

• Gehen Sie zum Editor Ihres Konfigurators, wechseln Sie ggf. in der rechten Seitenleiste auf "Home"
• Klicken Sie auf
  Loading...
• Hier können Sie zunächst wählen, ob Sie ein
  Loading...
  oder ein dunkes bevorzugen.
• Danach können Sie die verschiedenen Farben einstellen.
• Klicken Sie auf
  Loading...

CSS nutzen

Wenn Sie sich mit CSS auskennen und das Design Ihres Konfigurators damit noch genauer bestimmen wollen, gibt es zwei Möglichkeiten:

CSS Datei

Sie können Sie eine CSS-Datei angeben.

• Gehen Sie zum Editor Ihres Konfigurators, wechseln Sie ggf. in der rechten Seitenleiste auf "Home"
• Klicken Sie auf
  Loading...
• Scrollen Sie nach unten, bis Sie die CSS Einstellungen sehen.
• Geben Sie die Adresse einer CSS-Datei an oder laden Sie ein hoch.
• Klicken Sie auf
  Loading...

CSS im Layout

Wie oben beschrieben, kann man individuelle Layouts in HTML erstellen.

Dort lässt sich ein Style-Tag einbauen, in dem ebenfalls CSS untergebracht werden kann:

<div style="
  height: 100%;
  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
    / minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) 30rem;
">
  <style>
    .configurator span.group-label {
        color: #FFF;
    }
    .configurator div[data-cy=selectOc] p {
        text-wrap: wrap;
    }
  </style>
  <section style="gridArea: 2 / 1 / span 3 / span 3">
    <SceneView/>
  </section>
  <TopLeft>
    <Logo/>
  </TopLeft>
  <div style="
    gridArea: sidebar;
    position: relative;
    background: #fff;
    zIndex:1;
    box-shadow: 6px 0 4px -4px #999, -6px 0 4px -4px #999;
    display: grid;
    alignContent: space-between;
  ">
    <Sidebar design="accordion"/>
    <footer style="position: sticky; bottom: 0; background: #fff; display: grid; gap: 16px; padding: 24px">
      <ExitButtons/>
      <LabelActionsDisplay/>
      <OcBranding></OcBranding>
    </footer>
  </div>
</div>

tip

CSS-Selektoren sollten immer die Klasse configurator enthalten, damit die Änderungen auch wirklich auf das Konfigurator Frontend beschränkt bleiben:

Weiterführende technische Erläuterungen lassen sich in der Entwickler-Dokumentation finden.