Das Problem
Wilk, ein etabliertes Druck- und Verpackungsunternehmen, stand vor einer typischen Herausforderung im Mittelstand: Die bestehende WordPress-Website war langsam, wartungsintensiv und konnte die wachsenden Anforderungen nicht mehr erfüllen. Plugin-Konflikte nach Updates, Sicherheitslücken durch veraltete Erweiterungen und eine starre Seitenstruktur bremsten das Unternehmen digital aus.
Das größte Problem: Über 100 Produkte mussten manuell zwischen ERP-System und Website synchronisiert werden. Jede Preisänderung, jedes neue Produkt und jede aktualisierte Spezifikation erforderte doppelte Datenpflege — fehleranfällig und zeitaufwendig.
Die WordPress-Seite entsprach visuell nicht mehr dem Qualitätsanspruch, den Wilk an seine gedruckten Produkte stellt. Ein moderner Webauftritt war überfällig.
Die Lösung
Wir entwickelten einen komplett neuen Webauftritt auf Basis von Next.js und Sanity CMS — mit einer automatisierten ERP-Brücke, die Produktdaten täglich synchronisiert, ohne manuelle Eingriffe zu erfordern.
Der Ansatz: Eine statisch generierte Website mit Edge-Delivery über Vercel, kombiniert mit einem Headless CMS für redaktionelle Inhalte und einer Python-Middleware für die ERP-Anbindung.
Features
Automatisierte ERP-Produktsynchronisation
Das Herzstück der Lösung ist eine Python-basierte Sync-Pipeline, die täglich um 03:00 Uhr über GitHub Actions ausgelöst wird. Sie verbindet das interne ERP-System mit Sanity CMS:
- Intelligente Änderungserkennung: SHA-256-Hashes pro Produkt identifizieren nur tatsächliche Änderungen — kein unnötiges Überschreiben
- Produktfamilien-Gruppierung: Varianten eines Produkts werden automatisch zu einer Familie zusammengeführt
- Enrichment-Schutz: Marketingtexte, SEO-Felder und zusätzliche Bilder in Sanity bleiben bei jedem Sync erhalten
- Bild-Caching: ERP-Produktbilder werden einmalig auf das Sanity CDN hochgeladen und bei Folge-Syncs wiederverwendet
- Fehlertoleranz: Einzelne Produktfehler stoppen nicht den gesamten Sync-Lauf
Premium-Animationen und Micro-Interactions
Der Webauftritt verbindet Professionalität mit lebendiger Interaktivität — komplett ohne schwere Animations-Bibliotheken:
- WilkSquares: Eine markenspezifische CSS-Animation mit 6 Varianten, 4 Größen und 3 Geschwindigkeiten — als Preloader, Hover-Effekt und Section-Reveal
- Magnetischer CTA-Button: Folgt dem Mauszeiger mit physikbasiertem Easing für ein organisches Gefühl
- Parallax-Hero: Mehrstufige Tiefenwirkung mit 25% und 12% Scroll-Geschwindigkeit für Hintergrund und Inhalt
- Scroll-Animationen: View-basierte CSS-Animationen ohne JavaScript-Overhead
Alle Animationen respektieren prefers-reduced-motion und sind auf Touch-Geräten für Performance optimiert.
Sanity Studio als Content-Hub
Wilk verwaltet alle redaktionellen Inhalte über ein eingebettetes Sanity Studio direkt auf der Website:
- 18+ wiederverwendbare Content-Blöcke (Hero, Stats, Services, Prozess, Projekte, Zitate, CTA)
- Drag-and-Drop-Seitenaufbau ohne Entwickler
- Live-Vorschau für unveröffentlichte Inhalte
- Ein-Klick-ERP-Sync-Trigger direkt aus dem Studio
DSGVO-konformes Tracking
Integrierter Klaro-Cookie-Manager mit granularer Einwilligungsverwaltung, vorbereitet für Google Consent Mode v2.
Technische Architektur
Die Website nutzt Server Components als Standard — nur 8 von über 45 Komponenten benötigen Client-Side JavaScript. Das Ergebnis: minimale Bundle-Größe und schnelle Time-to-Interactive.
Bildoptimierung erfolgt über das Sanity CDN mit automatischer AVIF/WebP-Konvertierung, LQIP-Blur-Up-Platzhaltern und responsiven Größen. Keine manuellen Bildbearbeitungen mehr nötig.
ISR (Incremental Static Regeneration) stellt sicher, dass nach jedem ERP-Sync nur geänderte Seiten neu generiert werden — schnell für Besucher, effizient für den Server.
Ergebnisse
- 100+ Produkte automatisiert synchronisiert — täglicher Sync um 03:00 Uhr ohne manuellen Aufwand, Delta-basiert per SHA-256-Hash
- 70 % schnellere Ladezeiten — statische Generierung und Edge-Delivery statt WordPress-PHP-Rendering (gemessen mit Lighthouse: 95+ Performance Score)
- 0 Plugin-Konflikte — kein WordPress-Plugin-Ökosystem mehr zu pflegen; laut WPScan werden jährlich über 4.000 neue WordPress-Schwachstellen entdeckt
- 8 Wochen Projektlaufzeit — von Discovery bis Go-Live inklusive ERP-Integration und Content-Migration
- 8 von 45+ Komponenten client-seitig — Server Components als Standard für minimale Bundle-Größe
Die Website nutzt Headless CMS-Architektur mit API-Integration und CI/CD-Pipeline für automatisierte Deployments — ein moderner Jamstack-Ansatz.
Ähnliche Herausforderung?
Ihre WordPress-Website bremst Ihr Unternehmen? Produktdaten müssen manuell gepflegt werden? Wir entwickeln moderne Webauftritte mit individuellen ERP-Integrationen. Sprechen Sie mit uns oder lesen Sie, warum WordPress für wachsende Unternehmen zum Problem wird.
