Kombiniertes Produktbild

Das konfigurierte Produkt durch ein kombiniertes Produktbild anzeigen

B
Verfasst von Beka Chogovadze
Vor über einer Woche aktualisiert

Wozu dient das kombinierte Produktbild? - Mit dem kombinierten Produktbild haben Ihre Kunden ständig das aktuell konfigurierte Produkt bildlich vor Augen. Über eine Layertechnologie wird es in Echtzeit dynamisch generiert. Hierzu laden Sie zu jeder Optionsauswahl eine Teilansicht im System hoch. Über unsere Webshop-Plugins wird das kombinierte Produktbild dann auch im Warenkorb und in der Bestellung dargestellt. Neben einer 2D Ansicht, steht hier auch eine 360 Grad/3D Ansicht zur Verfügung.

Kombiniertes Produktbild im Frontend:

Ein Basis-Bild (Abbildung unten) dient hierbei als Grundstein der Konfiguration. Auf ihm werden über die Konfiguration Bilder der verschiedenen Produktvariationen aufgesetzt, wie zum Beispiel ein rot lackiertes Führerhaus im Schritt "Farbe" oder der Autotransporter als "Aufbau".

Basisbild des Transporters in der Vorschau des Konfigurators:

Wie wird also ein kombiniertes Produktbild im Produkt Konfigurator Backend erzeugt?

Das folgende Bild zeigt die Merkmale der Transporter-Konfiguration im Produkt Konfigurator Backend:

Wichtig für das kombinierte Produktbild in diesem Beispiel sind die Merkmale Baseimage (Basisbild), Color (Farbe) und structure (Aufbau).

Hilfe beim Anlagen der einzelnen Merkmale finden Sie im Artikel "Ein Merkmal erstellen".

1) Anlegen des Basisbildes

Klicken Sie in der Startoberfläche der Komponente auf Merkmal hinzufügen.

Das Baseimage wird als einfache "Auswahl" angelegt.

Legen Sie nun den Wert "Basisbild" an. Scrollen Sie dazu im Merkmal nach unten und klicken Sie auf "Wert hinzufügen":

Die Werteoptionen öffnen sich. Geben Sie nun Titel, Wert und Preis an:

Weiter unten fügen Sie nun das Basisbild ein (hochladen oder einfach per "drag-and-drop"). Wichtig: Hierbei handelt es sich nicht um ein "Vorschaubild", sondern um ein "Bild":

Speichern Sie und gehen Sie zurück.

Das Merkmal "Baseimage" enthält nun einen Wert namens "Baseimage".

2) Anlegen der Layer-Bilder

Die Merkmale "Color" (Farbe) und "Structure" (Aufbau), die je nach Auswahl als Layer über das Baseimage gelegt werden, legen Sie als "Liste mit Bildern" an. Als Beispiel wird hier nun das Merkmal "Color" angelegt. Verlassen Sie die Merkmalseinstellungen ihres Basisbildes und speichern Sie. Legen Sie eine neues Merkmal an indem Sie auf "Merkmal hinzufügen" klicken:

Die Merkmalseinstellungen öffnen sich:

Geben Sie ID und Titel an und wählen Sie "Liste mit Bildern" als Anzeige im Frontend.

Weiter unten legen Sie die verschiedenen Auswahlmöglichkeiten als Werte an inklusive der jeweiligen Aufpreise indem Sie auf "Wert hinzufügen" klicken:

Sie gelangen wieder zu den Werte-Einstellungen.

Dort geben Sie alle relevanten Informationen ein (hier beim Wert "grün")

Weiter unten laden Sie ein "Vorschaubild" für diesen Wert hoch. Außerdem stellen Sie das Basisbild wieder als "Bild" ein. Wichtig: Eingefärbt wird nur das Führerhaus, weshalb auch das Basisbild hier nur ein Führerhaus darstellt!

Speichern Sie und gehen Sie zurück. Wiederholen Sie nun den Vorgang für alle anderen Werte.

In unserem Beispiel finden sich nun in den Merkmalseinstellungen des Merkmals "Color" vier Werte (Farben):

3) Prüfen

Prüfen Sie nun Ihre Konfiguration. Gehen Sie aus den Merkmalseinstellungen heraus und klicken Sie auf "Vorschau":

Folgendermaßen sieht nun unsere Ausgangssituation der Konfiguration aus:

Konfigurieren Sie nun ein Produkt (wählen Sie eine Farbe und einen Aufbau aus). Ergebnis sollte ein kombiniertes Produktbild in der Vorschau links sein:

Kombiniertes Produktbild mit Aufpreisberechnung:

Hat Ihnen dieser Artikel weitergeholfen? Bitte geben Sie uns ein Feedback! Offene Fragen beantworten wir Ihnen gerne persönlich. Kontaktieren Sie uns dazu bitte über den blauen Chat-Button (rechts unten auf der Seite).

Hat dies Ihre Frage beantwortet?