Zum Hauptinhalt springen

📤 Centerplan hochladen & Shops zuordnen

📋 Übersicht​

Diese Anleitung zeigt dir, wie du als Redakteur 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 Wayfinding 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"

  2. Wähle die Etagen-Nummer:

    • 0 = Erdgeschoss
    • 1 = 1. Obergeschoss
    • -1 = 1. Untergeschoss

  3. Setze als Standard-Etage (optional)

    • Wenn dies die Hauptetage ist

  4. Klicke auf Speichern

Schritt 4: Shops zuordnen​

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

  1. Gehe zu Wayfinding → Karten-Mapping
  2. Wähle dein Center aus
  3. Wähle die Etage aus
  4. Du siehst jetzt:
    • Links: Liste aller Shops in deinem Center
    • Rechts: SVG-Karte mit erkannten Flächen

So ordnest du Shops zu:​

  1. Ziehe einen Shop aus der linken Liste
  2. Lasse ihn auf der Karte fallen (Drag & Drop)
  3. Das System speichert die Position automatisch
  4. Der Shop wird jetzt auf der Karte angezeigt
Tipp

Du kannst auch auf eine Shop-Fläche klicken und dann den Shop aus einem Dropdown auswählen.

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
  5. 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 zu groß/klein?​

Du kannst die Karte zoomen:

  • Mausrad zum Zoomen
  • Klicken & Ziehen zum Verschieben

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 einfach wieder zu Wayfinding → Karten-Mapping und ziehe den Shop an eine neue Position.

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.

🚀 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: