User Experience im Zentrum: So gestalten wir den Passepartout-Konfigurator auf Shopware 6

Technische Dokumentation zum Passepartout-Konfigurator

Wir haben erfolgreich einen Passepartout-Konfigurator für Shopware 6 entwickelt, der all die notwendigen Funktionen bietet, um eine optimale Benutzererfahrung zu gewährleisten. Dabei haben wir großen Wert auf Benutzerfreundlichkeit und eine reibungslose Integration in den bestehenden Shop gelegt.

Was wir umgesetzt haben:

1. Responsive Gestaltung
   Der Konfigurator wurde so entwickelt, dass er auf allen Geräten – sei es ein Desktop, Tablet oder Smartphone – perfekt funktioniert. Egal, welches Endgerät verwendet wird, der Konfigurator passt sich automatisch an die Bildschirmgröße an und bietet eine optimale Ansicht.
2. Updatefähige Integration
   Wir haben den Konfigurator als Plugin programmiert, sodass er sich problemlos in das bestehende Shopware 6 System integrieren lässt. Dies stellt sicher, dass auch zukünftige Shopware-Updates keine Probleme verursachen und der Konfigurator immer reibungslos läuft.
3. Schnelle Ladezeiten
   Die Ladegeschwindigkeit des Konfigurators wurde optimiert, damit Nutzer keine langen Wartezeiten erleben. Wir haben darauf geachtet, den JavaScript-Code sauber und effizient zu gestalten, um schnelle Ladezeiten sicherzustellen.
4. Effiziente Bildverarbeitung
   Hochgeladene Bilder werden automatisch optimiert, um die Serverbelastung zu reduzieren und sicherzustellen, dass die Konfiguration ohne Verzögerungen funktioniert. Dadurch wird die gesamte Benutzererfahrung deutlich verbessert.
5. Nahtlose Integration in den Shopware Webshop
   Der Konfigurator wurde so in das Shop-System eingebaut, dass er leicht zugänglich ist und perfekt in das Top-Menü des Shops integriert wurde. Nutzer finden den Konfigurator ohne Probleme und können direkt mit der Gestaltung ihrer Passepartouts beginnen.
6. Maßeinheit in cm und mm
   Alle Maße im Konfigurator werden in Zentimetern (cm) und Millimetern (mm) Die Berechnungen und die Darstellung der Maße sind präzise, um den Anforderungen an die individuelle Gestaltung von Passepartouts gerecht zu werden.

Mit diesen Funktionen haben wir einen Passepartout-Konfigurator entwickelt, der sowohl technisch auf dem neuesten Stand ist als auch eine benutzerfreundliche und effiziente Lösung für die Kunden bietet.

FUNKTIONSUMFANG

Im Folgenden finden Sie eine umfassende Beschreibung des Funktionsumfangs. Dieser Konfigurator bietet jetzt zahlreiche Zusatzoptionen wie Rahmen, Glas, Materialien usw. und achtet dabei besonders auf die Benutzerfreundlichkeit in der mobilen Ansicht (für Smartphones).

1. Maße

Bei Aufruf des Konfigurators wird dem Endbenutzer eine benutzerfreundliche Oberfläche präsentiert, die präzise Maßangaben beinhaltet. Diese Maßangaben können vom Benutzer sowohl manuell durch die Eingabe von Werten in entsprechende Eingabefelder als auch interaktiv im Vorschau-Bereich durch Ziehen und Anpassen verändert werden. Dies ermöglicht eine flexible und intuitive Anpassung der Konfiguration gemäß den individuellen Bedürfnissen und Vorlieben des Nutzers.

1.1. Manuelle Eingabe der Maßangaben

A) Durch die Eingabe von Werten erhält der Benutzer die Möglichkeit, die Dimensionen des Passepartouts nach seinen Anforderungen anzupassen:

B) Dabei stehen folgende Felder zur Verfügung:
– Außenmaß in CM
– Ausschnitt in CM
– Ausschnitt-Position /Randmaße in CM
– Ausschnitt-Position

Anmerkung zu „Ausschnitt Position“:
Diese Option bietet gleichzeitig 4 Positionen:
– Zentriert: zentriert den Ausschnitt in der Mitte
– frei positioniert: ist aktiv, wenn der Benutzer die Positionierung des Ausschnitts frei definiert
– optische Mitte
– Goldener Schnitt: positioniert den Ausschnitt zu 2/3 des Passepartout –Bereiches

C) Änderungen der Werte in „Ausschnitt (Schrägschnitt) BxH (cm)“ oder „Außenmaße BxH (cm)“ führen zu entsprechenden Anpassungen in den Maßen bei „Ausschnitt Position / Randmaße (cm)“.

D) Jede dieser Optionen ist mit einem Fragezeichen-Symbol versehen, das dem Benutzer während der Navigation hilfreiche Hinweise zu jeder einzelnen Option bietet.

E) Abhängig von den eingegebenen Werten erfolgt eine dynamische Anpassung der Passepartout-Oberfläche. Dadurch kann der Benutzer die Abstände zum Rand sowie die Ausschnitte in Echtzeit visualisieren:

F) Die Abstände werden dem Benutzer durch visuelle Pfeile veranschaulicht. Diese Pfeile können durch Klicken auf den Button „Markierungen verbergen“ deaktiviert werden.

G) Der Grundpreis des Passepartouts richtet sich nach dem ausgewählten Material. Daher ändert sich der endgültige Preis nur dann, wenn ein anderes Material oder eine andere Option ausgewählt wird. Das bedeutet, dass Änderungen an den Maßangaben keinen Einfluss auf den Preis haben.

1.2. Anpassen des Ausschnitts durch Ziehen

A) Der Benutzer kann sowohl die Position als auch die Größe des Ausschnitts verändern, indem er den Ausschnittbereich mit dem Cursor zieht. Dies führt automatisch zu einer Anpassung der Abstände zu den Rändern:

B) Die aktualisierten Maßangaben sollten dynamisch in die Felder „Außenmaß in CM“, „Ausschnitt-Position /Randmaße in CM “ und „Ausschnittposition in CM“ übertragen werden. Im Feld „Ausschnitt Position“ wird auch dementsprechend aktualisiert

2.Bild uploaden/entfernen

A) Diese Funktion ermöglicht dem Benutzer das Hochladen eines individuellen Bildes zur Veranschaulichung des Passepartouts. Man kann das Bild auch entfernen:

B) Da das hochgeladene Bild weder in den Warenkorb übertragen noch auf dem Server gespeichert wird, soll das Bild beim Hochladen automatisch als Thumbnail optimiert werden. Dieses optimierte Bild dient ausschließlich zur Veranschaulichungszwecken.

C) Bei Änderungen oder Anpassungen der Maßangaben soll sich das Vorschaubild entsprechend anpassen und aktualisieren.

Adminbereich:
– Es bietet sich dem Admin die Möglichkeit, die Optionen ein- und auszuschalten.

3. Optionen

Der Passepartout-Konfigurator bietet eine Vielzahl von Optionen, von denen jede den Endpreis beeinflusst. Eine ausführliche Beschreibung dieser Optionen finden Sie weiter unten.

3.1. Verzierung einfügen

A) Bei der Auswahl der Option „Verzierung einfügen“ erscheinen weitere Veredelungsoption

B) Es ist möglich, mehrere Rillenschnitte auszuwählen und für jeden dieser Schnitte die Farbe individuell entsprechend dem gewählten Schnitt festzulegen.

Die ausgewählten Optionen haben den Einfluss auf den Endpreis und sind im Passepartout-Designer visuell abgebildet:

C) Es wird eine Warnmeldungen angezeigt, wenn sich der Ausschnitt sehr nah am Rand befindet:

Adminbeeich:
– Dem Administrator bietet sich die Möglichkeit, den Aufpreis für Verzierungen festzulegen.
– Dem Administrator bietet sich die Möglichkeit, die Option „Verzierungen“ ein- oder auszuschalten.

3.2. Rückwand hinzufügen

A) Es bietet sich dem Benutzer die Möglichkeit, die Rückwand für das Passepartout auszuwählen.

B) Nach Auswahl bieten sich dem Benutzer die weiteren Optionen, die voneinander anhängig sind

C) Alle diese Optionen sollten mit einem Aufpreis verbunden sein.
Der Preis im Warenkorb ändert sich dynamisch.

Adminbereich:
– Dem Administrator bietet sich die Möglichkeit, den Aufpreis je Option einzeln festzulegen.
– Dem Administrator bietet sich die Möglichkeit, die Option “ Rückwand“ ein- oder auszuschalten.

3.3. Glas auswählen

A) Es bietet sich dem Benutzer die Möglichkeit, die Rückwand für das Passepartout auszuwählen.

B) Die Glas-Optionen sind mit einem Aufpreis verbunden.

Adminbereich:
– Dem Administrator bietet sich die Möglichkeit, den Aufpreis je Option einzeln festzulegen.
– Dem Administrator bietet sich die Möglichkeit, die Option “ Glas“ ein- oder auszuschalten.

3.4. Mehrfacher Ausschnitt

Die Option für mehrfache Ausschnitte ermöglicht es, gleichzeitig mehrere Ausschnitte zu erstellen.

A) Wenn diese Option ausgewählt wird, erfolgt eine Anpassung der Darstellung im Passepartout-Bereich, sodass nun 12 Ausschnitte angezeigt werden. Der Admin bestimmt die Anzahl der Ausschnitte.

B) Je Ausschnitt kann man individuelle Maßangaben wie „Außenmaß in CM“, „Ausschnitt in CM“, „Ausschnitt-Position /Randmaße in CM“ und „Ausschnitt-Position“

C) Indem man „Freie Position“ in „Ausschnitt Position“ auswählt, ermöglicht es dem Benutzer, jeden Ausschnitt frei nach Belieben zu positionieren. Die Maßangaben können auch individuell für jeden einzelnen Ausschnitt festgelegt werden.

D) Je Ausschnitt kann man die Verzierung bestimmen.

E) Je Ausschnitt kann man eigenes Bild als Vorschau hochladen.

F) Um die Verwaltung der einzelnen Ausschnitte zu erleichtern, sollte eine Tabelle mit Eingabefeldern angezeigt werden. Die Zeile in dieser Tabelle wird aktiv, sobald ein bestimmter Ausschnitt ausgewählt wurde.

G) Die Auswahl der Option „Mehrfache Ausschnitte“ wirkt sich auf den Preis aus.

Adminbereich:
– Dem Administrator bietet sich die Möglichkeit, den Aufpreis für den mehrfachen Ausschnitt festzulegen.
– Dem Administrator bietet sich die Möglichkeit, die Anzahl der Ausschnitte zu definieren.
– Dem Administrator bietet sich die Möglichkeit, die Option “ Glas“ ein- oder auszuschalten.

3.5. Material

„Material“ ist eine essenzielle Option, da der Basispreis auf dem vom Benutzer ausgewählten Material basiert.

A) Dem Benutzer wird die Möglichkeit geboten, das gewünschte Material nach Kategorien zu filtern.

B) Dem Benutzer wird die Möglichkeit geboten, das gewünschte Material über das Suchfeld nach Material-Namen zu finden.

D) Dem Benutzer wird die Möglichkeit geboten, das gewünschte Material nach Filteroptionen zu finden

E) Die farbliche Aktualisierung des Passepartouts erfolgt entsprechend der ausgewählten Materialoption.

F) Der Preis wird je nach ausgewähltem Material aktualisiert.

Adminbereich:
– Dem Administrator bietet sich die Möglichkeit, den Aufpreis für jedes Material festzulegen.
– Dem Administrator bietet sich die Möglichkeit, die Filteroptionen zu bestimmen.
– Dem Administrator bietet sich die Möglichkeit, die Kategorien zu definieren.
– Dem Administrator bietet sich die Möglichkeit, die Option „Material“ ein- oder auszuschalten.

3.6. Rahmen

Unter „Rahmen“ kann der Benutzer den passenden Rahmen auswählen.

A) Dem Benutzer wird die Möglichkeit geboten, den passenden Rahmen nach Kategorien zu filtern.

B) Dem Benutzer wird die Möglichkeit geboten, den passenden Rahmen über das Suchfeld nach Rahmen-Namen zu finden.

C) Sollte der Rahmen ausgewählt werden, muss er im Passepartout-Bereich dargestellt werden

D) Für jeden Rahmen fällt ein individueller Aufpreis an.

Adminbereich:
– Dem Administrator bietet sich die Möglichkeit, den Aufpreis für jeden Rahmen festzulegen.
– Dem Administrator bietet sich die Möglichkeit, die Kategorien zu definieren.
– Dem Administrator bietet sich die Möglichkeit, die Option „Rahmen“ ein- oder auszuschalten.

3.7. Form

Die Form ermöglicht es, den Ausschnitt an den Ecken des Passepartouts zu gestalten.

A) Es werden fünf verschiedene Formen angeboten:
– Rechteck
– Rund/Oval
– Eingefallen rund
– Abgerundet
– Gotisches Fenster

B) Abhängig von der ausgewählten Form erfolgt im Passepartout-Bereich eine entsprechende Anpassung der Eckenform:

Adminbereich:
– Dem Administrator bietet sich die Möglichkeit, den Aufpreis für jede Form festzulegen.
– Dem Administrator bietet sich die Möglichkeit, jede Form einzeln ein- oder auszuschalten.

Achtung:
Dem Administrator bietet sich keine Möglichkeit, die beliebigen Formen zu erstellen.

4. Warenkorb

A) Der Warenkorb ist in der Lage, den Preis dynamisch zu aktualisieren.

B) Der Warenkorb zeigt auch eine Staffelungstabelle an und berechnet den Preis in Abhängigkeit von der angegebenen Anzahl.

C) Der Warenkorb zeigt auch eine Liste der vom Benutzer ausgewählten Optionen an.

5. Kassenbereich / Bestellbestätigung / Bestellung

Wenn der Benutzer den Artikel in den Warenkorb legt und zur Kasse geht, werden alle Parameter im Kassenbereich, in der Bestellbestätigung und bei der Aufgabe der Bestellung übermittelt.

Passepartout-Konfigurator für Shopware: Die perfekte Lösung für deine Online-Plattform

Bei WebiProg haben wir bereits erfolgreich einen Passepartout-Konfigurator für Shopware entwickelt, der es deinen Kunden ermöglicht, Passepartouts und Bilderrahmen schnell und einfach online zu gestalten. Egal, ob du einen Rahmen-Konfigurator oder einen Bilderrahmen-Konfigurator benötigst – unsere Lösung bietet dir alles, was du für eine individuelle Gestaltung von Passepartouts oder Rahmen brauchst.

So funktioniert der WebiProg Passepartout-Konfigurator

Unser Online-Passepartout-Designer ist intuitiv und benutzerfreundlich gestaltet. Kunden können die Größe, Farbe und Form des Passepartouts nach ihren Vorstellungen anpassen und direkt in den Warenkorb legen. Der Passepartout-Generator ist perfekt auf Shopware 6 abgestimmt und lässt sich problemlos in deinen bestehenden Shop integrieren.

Der Passepartout-Planer hilft deinen Kunden, das perfekte Design für ihre Bilder zu erstellen, indem sie verschiedene Materialien und Optionen ausprobieren können. Mit dem Passepartout-Editor können sie ihr Design in Echtzeit anpassen und sofort sehen, wie ihr Passepartout im Endprodukt aussieht. So bieten wir eine effiziente und schnelle Lösung, die den Einkauf für deine Kunden noch angenehmer macht.

Vorteile des WebiProg Passepartout-Konfigurators:

• Benutzerfreundlichkeit: Die einfache Bedienoberfläche ermöglicht es deinen Kunden, ein Online-Konfigurator für Passepartouts ohne Aufwand zu nutzen.
• Individuelle Gestaltung: Kunden können ihr Passepartout oder ihren Rahmen genau nach ihren Wünschen gestalten.
• Echtzeit-Vorschau: Der Passepartout-Planer zeigt sofort eine Vorschau des Designs, sodass Kunden sicher sein können, dass sie das richtige Produkt wählen.
• Nahtlose Shopware 6 Integration: Unser Passepartout-Konfigurator erstellen erfolgt direkt auf deiner bestehenden Shopware 6 Plattform, was die Installation und Nutzung sehr einfach macht.

Lasse dir einen Passepartout-Konfigurator erstellen

Möchtest du ebenfalls von dieser benutzerfreundlichen und effizienten Lösung profitieren? Lasse dir einen Online Passepartout-Designer erstellen und erweitere dein Angebot um einen Passepartout-Generator, der deinen Kunden eine völlig neue Art der Gestaltung ermöglicht. Mit unserem Rahmen-Konfigurator und Bilderrahmen-Konfigurator sorgst du für eine noch größere Auswahl und mehr Zufriedenheit bei deinen Kunden.

WebiProg hilft dir, deinen Shopware-Shop mit einem leistungsstarken Passepartout-Konfigurator zu bereichern, der deinen Kunden die Möglichkeit gibt, ihre Bilderrahmen ganz nach ihren Vorstellungen zu gestalten – schnell, einfach und bequem online.

Kontaktiere uns noch heute, um mehr darüber zu erfahren, wie du den Passepartout-Konfigurator erstellen kannst, der perfekt zu deinem Shop passt.