Referenz · Moosbild-Shop

Moosbild-Shop

Der Moosbild-Shop ist der Onlineshop der MOOSMOOS Manufaktur — einer Manufaktur, die seit 2016 Wand- und Raumelemente aus echtem Moos und Pflanzen in Handarbeit fertigt. Vom Live-Konfigurator über Variantenmanagement und Tracking bis zu Warenkorb, Bewertungen und Bot-Abwehr.

www.moosbild-shop.de Live-KonfiguratorRaum-VorschauB2C

Über den Shop

Ein breites Sortiment aus Moos und Pflanzen — fertig und konfigurierbar.

Der Shop bündelt zwei Welten unter einem Dach: ein umfangreiches Sortiment fertiger Moos- und Pflanzenbilder, Mooswände, Raumteiler, Moosballs und Sonderanfertigungen — und ein konfigurierbares Pendant für Kunden, die Moosart, Form, Größe, Rahmen und Farbe selbst zusammenstellen wollen. Sieben Moosarten, frei wählbare Maße, lackierte Rahmen in allen RAL-Farben: diese Vielfalt lässt sich mit Shopware-Standard-Varianten nicht sauber abbilden. Deshalb läuft die Konfiguration über eine eigene Vue.js-Anwendung, die das Bild live auf Canvas rendert und Preise nach jeder Änderung serverseitig neu berechnet.

Anpassungen

Was im Detail umgesetzt wurde

Ein Überblick über die wichtigsten projekt-spezifischen Anpassungen.

Konfigurator: Moosbild im echten Raum sehen

Damit Kunden die Wirkung eines Moosbildes besser einschätzen können, bietet der Konfigurator eine Auswahl an Hintergrund-Räumen wie Büro, Wohnzimmer oder Küche. Wer es noch konkreter möchte, fotografiert mit dem Smartphone die eigene Wand und sendet das Bild per QR-Code direkt an den Konfigurator. Auf dem Foto zieht der Kunde eine beliebige Linie und gibt deren Länge an — anhand dieser Referenz wird das Moosbild centimetergenau in den Raum gerechnet und dargestellt.

Vue.jsQR-Upload vom SmartphoneMaßstabs-SkalierungCanvas

Konfigurator: Live-Konfiguration auf Canvas

Konfiguriert werden Moosbilder und -wände in sieben Moosarten mit verschiedenen Farb- und Verlaufsvarianten, in unterschiedlichen Qualitäten, eckig oder rund, in frei wählbaren Maßen. Dazu kommen verschiedene Rahmen bzw. Abschlusskanten für Wände, optionaler Brandschutz und — für lackierte Rahmen — ein durchsuchbarer Dialog mit allen RAL-Farben. Jede Änderung wird sofort auf Canvas neu gezeichnet und der Preis live vom Server abgerufen.

7 MoosartenRAL-FarbdialogBrandschutz-OptionLive-Preis vom Server

Konfigurator: Ansicht, Zoom und Vollbild

Bemaßungen lassen sich ein- und ausblenden, das Bild kann in sieben Stufen gezoomt werden. Ein Vollbildmodus schafft zusätzlich Platz — vor allem auf Mobilgeräten ein deutlicher Komfortgewinn.

7 Zoom-StufenVollbildmodusMobile- und Desktop-spezifisch

Backend: Zentrale Preisverwaltung & Vertriebsrechner

Preise für Moosarten, Rahmen, Brandschutz und Zubehör werden an einer zentralen Stelle gepflegt. Änderungen schlagen automatisch auf alle Produkte und den Konfigurator durch. Auch für die in festen Größen verkauften Moosbilder lassen sich die Preise im Administrationsbereich auf Knopfdruck neu berechnen.

Preis-EngineMassen-NeuberechnungSales-Calculator

Varianten in Produktlisten — performant ausgespielt

In Produktlisten müssen die verfügbaren Variationen (Farbe, Größe, Moosart …) direkt sichtbar sein. Damit das nicht jede Listenseite ausbremst, wird die Variantenausgabe asynchron vorgerechnet und gespeichert.

Async Pre-RenderTäglicher CronListing-Performance

Varianten-Generator für nachträgliche Eigenschaften

Irgendwann muss eine neue Eigenschaft zu allen Produkten als Variante hinzukommen. Die eigens entwickelte Erweiterung fügt die neue Eigenschaft auf Knopfdruck zu bestehenden Varianten hinzu. Vor jedem Lauf legt das Modul einen Snapshot des Produkts und seiner Varianten an — so können alle Änderungen bei Bedarf vollständig zurückgenommen werden.

Shopware-Plugin300+ VariantenSnapshot & Rollback

Analyse & Tracking — server-seitig und DSGVO-konform

Im Moosbild-Shop läuft das Tracking über einen eigenen Server-side-GTM, der über einen Pfad der Hauptdomain erreichbar ist. Ergänzend sorgt Server-to-Server-Tracking zu Google und Meta für verlässlichere Daten. Formularanfragen werden über eine eigene Erweiterung an HubSpot übergeben.

Server-side GTMS2S Google & MetaHubSpot-BridgeKI-gestützte Auswertung

Persistenter Warenkorb — auch für Gäste

Ein eigenes Plugin speichert den Warenkorb von Gästen dauerhaft. Registriert sich der Gast oder meldet er sich an, wird sein aktueller Warenkorb mit dem im Kundenkonto gespeicherten zusammengeführt — keine verlorenen Konfigurationen, keine Doppeleinträge.

Eigenes PluginGast-Cart persistentCart-Merge bei Login

Bewertungsanfragen automatisiert

Eine definierte Zeit nachdem eine Bestellung als „erledigt" markiert wurde, geht automatisch eine Bewertungsanfrage an den Kunden. Das System ist sauber in Shopware integriert: der Versand läuft über die regulären E-Mail-Templates und den Flow-Builder.

Shopware Flow-BuilderNative E-Mail-Templates

Bot-Abwehr in mehreren Schichten

Der Shop wird täglich von zahllosen Spam-Bots angegriffen. Mehrere Schichten halten das im Griff: ein eigener Badwords-Filter erkennt schädliche Anfragen direkt im Shop und übergibt sie an Fail2Ban, das die IPs auf Server-Ebene sperrt. Die offensichtlicheren Bot-Wellen fängt mittlerweile Cloudflare als vorgeschalteter Proxy ab.

Badwords-FilterFail2Ban-BridgeCloudflare als Proxy

Frontend: CMS-Elemente & individuelle Produktseite

Für die Erlebniswelten in Shopware wurden über die Zeit diverse eigene CMS-Elemente entwickelt, die sich frei kombinieren und konfigurieren lassen. Für ein einzelnes Schlüsselprodukt entstand zusätzlich eine spezielle Produktseite mit einem voll integrierten Kopfbereich.

Eigene CMS-ElementeShopware ErlebnisweltenCustom Product Page

Moosbild-Shop live ansehen

Den Shop live in Aktion sehen unter www.moosbild-shop.de.

Shop öffnen

Kontakt

Bereit für Ihr Projekt?

Sagen Sie mir in zwei, drei Sätzen, was ansteht — ich melde mich kurzfristig persönlich zurück. Die erste Einschätzung ist immer kostenlos.

Jetzt unverbindlich anfragen

Kostenlose Erstberatung Antwort meist binnen 24 Std. Persönlich, kein Callcenter