Zum Hauptinhalt springen

Centerplan hochladen & Shops zuordnen

Datei ins Cockpit legen und Flächen den Shops zuordnen. Das ist der Schritt nach Claude Design, KI-Bild oder Illustrator — unabhängig davon, ob die Website v0 oder noch WordPress ist.

Datei fehlt noch?

Schritt-für-Schritt-Anleitung​

Schritt 1: Dashboard öffnen​

  1. Öffne das cockpitOS-Dashboard
  2. Melde dich an
  3. Wähle dein Center aus (oben rechts)

Schritt 2: SVG hochladen​

  1. Gehe zu Centerpläne im Hauptmenü
  2. Klicke auf SVG-Karte erstellen
  3. Wähle die SVG-Datei vom Designer aus
  4. Klicke auf Hochladen
Was passiert?

Das System analysiert die SVG-Datei und erkennt automatisch:

  • Shop-Flächen (alles mit shop- im Namen)
  • Service-Elemente (alles mit service- im Namen)
  • Etagen (falls vorhanden)

Schritt 3: Etage erstellen​

Nach dem Upload:

  1. Gib der Etage einen Namen:
  • z.B. "Erdgeschoss" oder "1. OG"
  1. Wähle die Etagen-Nummer:
  • 0 = Erdgeschoss
  • 1 = 1. Obergeschoss
  • -1 = 1. Untergeschoss
  1. Setze als Standard-Etage (optional)
  • Wenn dies die Hauptetage ist
  1. Klicke auf Speichern

Schritt 4: Shops zuordnen​

Jetzt ordnest du die Shops den Flächen auf der Karte zu:

  1. Gehe zu Centerpläne → Mapping
  2. Wähle dein Center aus
  3. Wähle die Etage aus
  4. Du siehst jetzt:
  • Links: Liste der noch nicht zugeordneten Shops/Services (optional ein- und ausklappbar)
  • Rechts: SVG-Karte – klicke auf eine Fläche, um einen Shop zuzuordnen

So ordnest du Shops zu:​

  1. Klicke auf eine Fläche in der SVG-Karte (rechts), wo der Shop platziert werden soll
  2. Ein Modal öffnet sich mit der Liste der noch nicht zugeordneten Shops/Services
  3. Wähle den Shop aus der Liste (Suche optional nutzen)
  4. Der Shop wird an der geklickten Position platziert und automatisch gespeichert

Schritt 5: Vorschau prüfen​

  1. Klicke auf Vorschau
  2. Du siehst die Karte, wie sie später auf der Website aussieht
  3. Teste:
  • Hover über Shops → Tooltip erscheint?
  • Klick auf Shop → Weiterleitung funktioniert?

Schritt 6: Auf der Website prüfen​

v0-Website (Normalfall): Der Plan liest die Daten live aus dem Cockpit. Seite Centerplan bzw. /centerplan neu laden. Kommt der Plan aus Claude Design, zuerst Kasten 3 — in v0 einhängen.

Weg-Linie: Dashboard → Centerpläne → Routen → aus der SVG erzeugen. Sonst kennt die Website keine Wege.

WordPress (nur wenn eure Website noch dort läuft): WordPress Admin → cockpitOS → Sync → Vollsync. Danach Elementor-Widget Interactive SVG. Details: WordPress-Integration.

Checkliste​

  • Datei hochgeladen, Etage angelegt
  • Anker-Shops zugeordnet, Vorschau geprüft
  • Bei Wayfinding: Routen aus der SVG erzeugt
  • v0: Centerplan-Seite zeigt Kopf und Fuß der Website
  • WordPress nur wenn nötig: Sync + Widget

Mehrere Etagen​

Wenn dein Center mehrere Etagen hat:

  1. Wiederhole Schritt 2-4 für jede Etage
  2. Lade für jede Etage eine separate SVG-Datei hoch
  3. Ordne Shops pro Etage zu
  4. Auf der Website können Besucher zwischen Etagen wechseln

Tipps & Tricks​

Tipp 1: Shops fehlen in der Liste?​

Stelle sicher, dass die Shops im Dashboard angelegt sind:

  • Gehe zu Shops → Alle Shops
  • Prüfe, ob der Shop existiert
  • Falls nicht: Erstelle ihn zuerst

Tipp 2: Shop-Fläche wird nicht erkannt?​

Prüfe in der SVG-Datei:

  • Hat die Fläche einen Namen mit shop- am Anfang?
  • Ist die Fläche auf der richtigen Ebene?
  • Kontaktiere den Designer, falls nötig

Tipp 3: Karte zoomen & kleine Flächen anklicken​

  • Mausrad oder Zoom-Buttons (oben rechts am Plan) zum Vergrößern/Verkleinern (25–500 %)
  • Leertaste + Ziehen oder mittlere Maustaste zum Verschieben — im Shop-Mapping und Polygon-Editor
  • Im Polygon-Editor besonders hilfreich: erst hineinzoomen, dann Ecken setzen oder Punkte verschieben
  • „Namen ausblenden“: Bei kleinen Shop-Flächen Text-Labels ausblenden, damit du die Fläche selbst anklicken kannst

Tipp 4: Änderungen nicht sichtbar?​

  1. Im Dashboard speichern (Mapping speichert sofort)
  2. v0-Vorschau neu laden; bei WordPress zusätzlich Sync
  3. Browser-Cache leeren (Strg+F5)

Häufige Fragen​

Kann ich Shops später neu zuordnen?​

Ja! Gehe wieder zu Centerpläne → Mapping, klicke auf den Pin des Shops, bestätige die Entfernung. Dann klicke auf die neue Position und wähle den Shop erneut aus dem Modal.

Was passiert, wenn ich einen Shop lösche?​

Die Zuordnung auf der Karte bleibt bestehen, aber der Shop wird nicht mehr angezeigt. Du solltest die Zuordnung manuell entfernen.

Kann ich mehrere Shops auf einer Fläche haben?​

Nein, jede Fläche kann nur einem Shop zugeordnet werden. Wenn ein Shop mehrere Flächen hat, erstelle mehrere Flächen in der SVG.

Wie ändere ich die Farben der Karte?​

Die Farben werden in der SVG-Datei festgelegt. Kontaktiere den Designer für Änderungen.

AR-Navigation vorbereiten (Beta)​

Optional: Fuer Centers, die die AR-Navigation in der NOW! App nutzen moechten:

  1. Shopfront-Fotos erstellen: Fotografiere die Ladenfronten der Shops im Center (gerade, gut beleuchtet, ohne Passanten)
  2. Im Dashboard hinterlegen: Centerpläne > Etage > Routen > Waypoint auswählen > "AR-Navigation (Beta)" aufklappen > Shopfront-Bild-URL eintragen
  3. AR-Felder pflegen (optional): Blickrichtung, Gang-Richtung, Distanz und Landmarks fuer jeden Waypoint eintragen -- diese Infos verbessern die AR-Genauigkeit
  4. AR-Marker kompilieren: Button "AR-Marker" in der Routen-Toolbar klicken -- das System kompiliert alle Shopfront-Bilder zu einer .mind-Datei
  5. .mind-Datei konfigurieren: Die generierte Datei hochladen und die URL in den Center-Optionen hinterlegen

Details zur Technik findest du unter SVG-Routen > AR-Marker und im Premium AI Template.

Nächste Schritte​

Nach dem Einrichten:

  1. Teste die Karte auf der Website
  2. Sammle Feedback von Kollegen
  3. Optimiere bei Bedarf
  4. Dokumentiere besondere Einstellungen

Hilfe benötigt?​

Bei Fragen:

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