Zum Hauptinhalt springen

🗺️ Centerplan / Wayfinding - Übersicht

📋 Was ist das Centerplan-System?​

Das Centerplan-System ermöglicht es, interaktive Karten deines Shopping Centers auf der Website einzubinden. Besucher können:

  • ✅ Shops anklicken und Infos sehen
  • ✅ Tooltips mit Öffnungszeiten, Kategorie, etc. anzeigen
  • ✅ Zur Shop-Detailseite navigieren
  • ✅ Mehrere Etagen durchblättern

🎯 Für wen ist was?​

👨‍🎨 Designer / Grafiker​

Du erstellst die SVG-Centerplan-Datei in Adobe Illustrator.

📖 Deine Anleitung: Centerplan in Illustrator erstellen

✏️ Redakteure​

Du lädst die SVG hoch und ordnest Shops zu.

📖 Deine Anleitung: Centerplan hochladen & Shops zuordnen

👨‍💻 Entwickler​

Du integrierst das System technisch.

📖 Deine Anleitungen:

🚀 Workflow im Überblick​

graph LR
    A[Designer erstellt SVG] --> B[Redakteur lädt SVG hoch]
    B --> C[Redakteur ordnet Shops zu]
    C --> D[Sync zu WordPress]
    D --> E[Website zeigt interaktive Karte]

Schritt 1: Designer erstellt SVG 🎨​

  • Adobe Illustrator öffnen
  • Centerplan zeichnen
  • Shop-Flächen benennen
  • Als SVG exportieren

Schritt 2: Redakteur lädt SVG hoch 📤​

  • Dashboard öffnen
  • Wayfinding → SVG hochladen
  • Etage erstellen

Schritt 3: Redakteur ordnet Shops zu 🎯​

  • Wayfinding → Karten-Mapping
  • Shops per Drag & Drop platzieren
  • Koordinaten werden gespeichert

Schritt 4: Sync zu WordPress 🔄​

  • WordPress Admin → CockpitOS → Sync
  • SVG wird lokal gespeichert
  • Shop-Daten werden übertragen

Schritt 5: Website zeigt Karte 🌐​

  • Elementor Widget einbinden
  • Besucher sehen interaktive Karte
  • Klick auf Shop → Detailseite

📚 Dokumentation​

Für Designer:​

Für Redakteure:​

Für Entwickler:​

✨ Features​

Interaktive Karten​

  • ✅ Klickbare Shop-Flächen
  • ✅ Hover-Tooltips mit Shop-Infos
  • ✅ Weiterleitung zu Shop-Detailseiten

Multi-Etagen-Support​

  • ✅ Mehrere Etagen pro Center
  • ✅ Etagen-Navigation
  • ✅ Separate SVGs pro Etage

Performance​

  • ✅ Keine API-Calls im Frontend
  • ✅ Alle Daten lokal gespeichert
  • ✅ Schnelle Ladezeiten

Einfache Verwaltung​

  • ✅ Drag & Drop Shop-Zuordnung
  • ✅ Visuelle Vorschau
  • ✅ Automatischer Sync

🎯 Beispiel​

So sieht eine fertige interaktive Karte aus:

┌─────────────────────────────────────────┐
│  CENTERPLAN - ERDGESCHOSS               │
├─────────────────────────────────────────┤
│                                         │
│  ┌──────┐  ┌──────┐  ┌──────┐         │
│  │ Aldi │  │ H&M  │  │ Zara │         │
│  │ 🟩   │  │ 🟩   │  │ 🟩   │  ← Klickbar!
│  └──────┘  └──────┘  └──────┘         │
│     ↑                                   │
│     └─ Hover zeigt Tooltip              │
│                                         │
│  ┌──────────────────────────┐          │
│  │ 🏪 Aldi                  │          │
│  │ Kategorie: Lebensmittel  │          │
│  │ Etage: EG                │          │
│  │ Öffnungszeiten: Mo-Sa 8-20│         │
│  │ Klicken für mehr Infos → │          │
│  └──────────────────────────┘          │
│                                         │
└─────────────────────────────────────────┘

🚀 Quick Start​

Ich bin Designer:​

  1. Lies die Illustrator-Anleitung
  2. Erstelle deine SVG-Datei
  3. Gib sie dem Redakteur

Ich bin Redakteur:​

  1. Lies den Redakteur-Workflow
  2. Lade die SVG hoch
  3. Ordne Shops zu
  4. Führe Sync durch

Ich bin Entwickler:​

  1. Lies die SVG-Struktur
  2. Prüfe die WordPress-Integration
  3. Verstehe das Sync-System

💡 Wichtige Konzepte​

Single Source of Truth​

  • Dashboard ist die einzige Datenquelle
  • WordPress ist nur ein "Cache"
  • Sync überträgt alles auf einmal

DRY-Prinzip​

  • Daten werden einmal gesyncet
  • Keine doppelten API-Calls
  • Keine redundanten Datenquellen

Offline-Fähigkeit​

  • SVG-Dateien lokal gespeichert
  • Shop-Daten lokal verfügbar
  • Funktioniert ohne Dashboard-Verbindung

📞 Support​

Bei Fragen: