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...

Design

Auswahl des Designs

• Gehen Sie zum Editor Ihres Konfigurators
• Klicken Sie rechts auf
  Loading...
• und dann auf
  Loading...
• Hier sehen Sie eine Auswahl von vorgefertigen Design-Themes für Ihren Konfigurator. Sie können eines wählen.
• Klicken Sie zum Schluss auf
  Loading...

Individuelle Designs

• Klicken Sie bei dem gewählten Design auf
  Loading...
  .
• Nun können Sie Ihr Design mit etwas CSS anpassen.
• Klicken Sie zum Schluss auf
  Loading...
  und dann auf
  Loading...
• Nun ist das Design namens "Individuelles Design" aktiv.

Layout

Auswahl des Layouts

• Gehen Sie zum Editor Ihres Konfigurators
• Klicken Sie rechts auf
  Loading...
• und dann auf
  Loading...
• Hier sehen Sie eine Auswahl von vorgefertigen Layouts für Ihren Konfigurator. Sie können eines wählen.
• Klicken Sie zum Schluss auf
  Loading...

Responsive Layouts

info

Die Layouts sind alle responsiv. D.h. sie passen sich auf die Bildschirmgröße verschiedener Geräte an. Wenn Sie die web component verwenden, passen sich die Layouts auf die Größe des zugewiesenen Bereiches an.

Im Editor können Sie die Größe des Konfigurator-Fensters ändern, um die Auswirkungen zu kontrollieren.

Sie können aber auch ein spezielles Layout für mobile Geräte angeben.

• Gehen Sie zum Editor Ihres Konfigurators
• Klicken Sie in der Mitte der Menüleiste oben auf das Mobil-Symbol. Sie erhalten nun die Mobil-Ansicht dargestellt.
• Klicken Sie auf das Stift-Symbol hinter der Auswahl Mobil/Desktop
• Entfernen Sie den Haken bei "Kein Mobile Layout"
• Hier sehen Sie eine Auswahl von vorgefertigen Layouts für Ihren Konfigurator. Sie können eine wählen.
• Klicken Sie zum Schluss auf
  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
• Klicken Sie bei dem gewählten Layout auf
  Loading...
  .
• Nun können Sie Ihr Layout mit etwas HTML und CSS anpassen.
• Klicken Sie zum Schluss auf
  Loading...
  und dann auf
  Loading...
• Nun ist das Layout namens "Individuelles Layout" aktiv.

Individuelle Layout responsive gestalten

Um die Layouts responsive zu halten, nutzen wir CSS Container-Queries.

Damit kann man abhängig von der Breite, mit der der Konfigurator auf der Webseite eingebettet oder auf dem Gerät gezeigt wird, das Layout verändern. In unseren Standardlayouts siehts das zum Beispiel so aus:

    @container (max-width: 900px) {
      .k3-layout-paginated-right {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) 20rem;
      }

      ... weitere CSS Klassen ...
    }

Dieses konkrete Beispiel legt fest, dass bei Breiten kleiner als 900px die Eingabefläche rechts 20rem breit ist.

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" slide="true"/>
<Sidebar design="topmenu" columns="2" slide="true" />

Die komplette Seitenleiste

• design: accordion, topmenu oder onlysidebar,
• hideLoader: bei "true" wird die Fortschrittsanzeige beim Berechnen der Gültigkeit nicht angezeigt. (Mit <ValuesLoading > kann dann eine Custom Version davon angezeigt werden.)
• slide ist optional mit default false. Ist es true, dann wird in der Seitenleiste der Wechsel zum nächsten Schritt animiert.
• columns ist optional default `1. Es bestimmt die Spaltenanzahl in der Seitenleiste.

<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

<PriceTable overviewType="articlesOnly" />

Zeigt die Zusammenfassung an. Der Typ ist einer von variablesAndArticles, variablesOnly oder articlesOnly.

<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

<UndoRedoControls/>

Damit können im Frontend Undo und Redo implementiert werden.

<LanguageSwitcher />

Ein Auswahlfeld, mit dem der Nutzer die Sprache der Inhalte im laufenden Konfigurator wechseln kann. Angeboten werden alle unter Sprachen angelegten Inhaltssprachen in der dort festgelegten Reihenfolge, jeweils in der Sprache selbst benannt ("Deutsch", "English", ...). Bei nur einer angelegten Sprache zeigt die Komponente nichts an.

<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).

<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 Konfigurationsschritt ein, falls der Schritt eines hat. Falls nicht, wird der Inhalt des Tags GroupOutlet als Default angezeigt. 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 Schrittes
• Schalten Sie in der Seitenleiste Individuelles Design in einem Schritt an
• Erfassen Sie das Layout in dem nun erschienen Eingabefeld.

Farben

• Gehen Sie zum Editor Ihres Konfigurators, wechseln Sie ggf. in der rechten Seitenleiste auf "Home"
• Klicken Sie auf
  Loading...
• Dann auf
  Loading...
• Jetzt können Sie die verschiedenen Farben einstellen.
• Klicken Sie auf
  Loading...