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

Content-Creator​

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​

Schritt 1: Designer erstellt SVG​

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

Schritt 2: Content-Creator lädt SVG hoch​

  • Dashboard öffnen
  • Centerpläne → Neuer Centerplan
  • Etage erstellen

Schritt 3: Content-Creator ordnet Shops zu​

  • Centerpläne → Mapping
  • Fläche in der Karte anklicken → Modal mit Shop-Liste → Shop auswählen
  • Koordinaten werden automatisch 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 Content-Creator​

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​

  • Klick-auf-Fläche → Shop aus Modal auswählen
  • Visuelle Vorschau
  • Automatischer Sync

Beispiel​

So sieht eine fertige interaktive Karte aus:

┌─────────────────────────────────────────┐
│  CENTERPLAN - ERDGESCHOSS               │
├─────────────────────────────────────────┤
│                                         │
│  ┌──────┐  ┌──────┐  ┌──────┐         │
│  │ Aldi │  │ H&M  │  │ Zara │         │
│  │ [x]  │  │ [x]  │  │ [x]  │  <- 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 Content-Creator

Ich bin Content-Creator:​

  1. Lies den Content-Creator-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:

Nutzungsstatistik: Seitenaufrufe werden anonymisiert erfasst. Im Umami-Dashboard nach diesem Pfad filtern: /centerplan/uebersicht