Zum Hauptinhalt springen

Centerplan hochladen & Shops zuordnen

Übersicht​

Diese Anleitung zeigt dir, wie du als Content-Creator einen Centerplan hochlädst und Shops zuordnest.

Voraussetzung

Du hast eine SVG-Datei vom Designer erhalten. Falls nicht, siehe Illustrator-Anleitung.

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: Sync durchführen​

Damit die Karte auf der WordPress-Website erscheint:

  1. Gehe zu WordPress Admin
  2. Klicke auf CockpitOS → Sync
  3. Klicke auf Vollsync starten
  4. Warte, bis der Sync abgeschlossen ist
Was wird gesyncet?
  • SVG-Datei wird lokal gespeichert
  • Shop-Zuordnungen werden übertragen
  • Alle Shop-Daten (Name, Kategorie, Öffnungszeiten, etc.)

Schritt 7: Auf Website einbinden​

  1. Öffne WordPress und gehe zu Elementor
  2. Bearbeite die Seite, wo die Karte erscheinen soll
  3. Füge das CockpitOS Centerplan Widget hinzu
  4. Einstellungen:
  • Map Type: Interactive SVG
  • Center: Dein Center auswählen
  • Floor: Etage auswählen
  1. Klicke auf Aktualisieren

Checkliste​

Bevor du fertig bist, prüfe:

  • SVG-Datei hochgeladen
  • Etage erstellt
  • Alle Shops zugeordnet
  • Vorschau getestet
  • Sync durchgeführt
  • Widget auf Website eingebunden
  • Website-Vorschau getestet

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​

  • Zoom-Buttons (oben rechts) zum Vergrößern/Verkleinern
  • „Namen ausblenden“: Bei kleinen Shop-Flächen hilfreich – blendet Text-Labels aus, damit du die Fläche selbst anklicken kannst

Tipp 4: Änderungen nicht sichtbar?​

Nach Änderungen immer:

  1. Speichern im Dashboard
  2. Sync durchführen zu WordPress
  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