Skip to main content

WordPress-Integration

📋 Übersicht​

Die Interactive SVG Map ermöglicht es, fertig gestaltete SVG-Centerplan-Dateien auf WordPress-Seiten einzubinden - OHNE 3D-Konvertierung. Shops und Services werden klickbar gemacht und zeigen Tooltips mit Informationen aus dem Dashboard.

✨ NEU: Single Source of Truth + DRY-Prinzip

  • ✅ Alle Daten werden beim Sync von Dashboard zu WordPress übertragen
  • ✅ SVG-Dateien werden lokal gespeichert (kein CDN-Zugriff nötig)
  • ✅ Shop/Service-Daten sind in WordPress verfügbar (keine API-Calls!)
  • ✅ Schneller, offline-fähig, einfacher Code

🎯 Features​

✅ Was funktioniert:​

  1. SVG hochladen - Fertig gestaltete SVG-Datei vom Kunden
  2. Shops/Services mappen - Im Dashboard auf SVG-Koordinaten mappen
  3. WordPress-Integration - SVG wird 1:1 auf Website angezeigt
  4. Interaktive Elemente - Shop-Flächen werden klickbar
  5. Tooltips - Hover zeigt Shop-Infos aus Dashboard
  6. Single Page Links - Klick führt zu Shop-Detail-Seite

❌ Was NICHT passiert:​

  • ❌ Keine 3D-Konvertierung
  • ❌ Keine Veränderung des SVG-Designs
  • ❌ Keine automatische Generierung

🚀 Workflow (NEU: Mit Sync!)​

1. SVG vorbereiten (Kunde/Designer)​

Der Kunde liefert eine fertig gestaltete SVG-Datei mit:

  • ✅ Shop-Flächen als <rect>, <polygon> oder <path>
  • ✅ Eindeutige IDs für jede Shop-Fläche
  • ✅ Optional: data-id Attribute für Mapping

Beispiel:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 800">
  <!-- Hintergrund, Gänge, etc. -->
  <rect x="0" y="0" width="1000" height="800" fill="#f5f5f5"/>
  
  <!-- Shop-Flächen -->
  <rect id="shop-aldi" x="100" y="100" width="200" height="150" 
        fill="#e8f5e9" stroke="#4caf50" stroke-width="2"/>
  
  <rect id="shop-hm" x="350" y="100" width="200" height="150" 
        fill="#e3f2fd" stroke="#2196f3" stroke-width="2"/>
  
  <!-- Services -->
  <circle id="service-info" cx="500" cy="400" r="30" 
          fill="#fff3e0" stroke="#ff9800" stroke-width="2"/>
</svg>

2. SVG hochladen (Dashboard)​

Dashboard → Wayfinding → SVG-Karte erstellen
→ SVG hochladen
→ System analysiert Struktur
→ MapFloor wird erstellt

Was passiert:

  • ✅ SVG wird gespeichert (z.B. /uploads/wayfinding/svg/mall-eg.svg)
  • ✅ MapFloor-Eintrag in Datenbank
  • ✅ SVG-Elemente werden erkannt

3. Shops/Services mappen (Dashboard)​

Dashboard → Wayfinding → Karten-Mapping
→ Center auswählen
→ Floor auswählen
→ Shops per Drag & Drop auf SVG platzieren

Was passiert:

  • ✅ Shop wird mit SVG-Element verknüpft
  • ✅ Koordinaten werden gespeichert
  • ✅ MapLocation-Eintrag in Datenbank

Wichtig:

  • Die SVG-Element-ID muss mit der gemappten Shop-ID übereinstimmen
  • Oder: Verwende data-id Attribut im SVG

3.5. Sync durchführen (NEU!) 🔄​

WordPress Admin → CockpitOS → Sync → Vollsync starten

Was wird gesyncet:

  • ✅ MapFloors - Etagen-Daten mit SVG-URLs
  • ✅ SVG-Dateien - Download & lokale Speicherung in /wp-content/uploads/wayfinding/svg/
  • ✅ MapLocations - Shop/Service-Positionen auf Karte
  • ✅ Shop-Daten - Name, Kategorie, Öffnungszeiten, URL, Logo
  • ✅ Service-Daten - Name, Kategorie, Beschreibung, Icon

Ergebnis:

  • ✅ Alle Daten lokal in WordPress verfügbar
  • ✅ Keine API-Calls mehr nötig
  • ✅ Schneller & offline-fähig

4. WordPress-Widget einbinden​

Option A: Elementor Widget​

Elementor → Widget hinzufügen → CockpitOS Centerplan
→ Map Type: "Interactive SVG"
→ Center auswählen
→ Floor auswählen
→ Speichern

Option B: Shortcode​

[cockpit_centerplan 
  center_id="center-uuid" 
  map_type="interactive_svg" 
  default_floor="eg"]

Option C: PHP Template​

<?php
echo do_shortcode('[cockpit_centerplan center_id="' . $center_id . '" map_type="interactive_svg"]');
?>

🎨 Wie es funktioniert​

Frontend-Rendering:​

  1. SVG wird geladen:

    <div class="cockpit-interactive-svg-map" 
         data-svg-url="/uploads/wayfinding/svg/mall-eg.svg"
         data-api-url="https://dashboard.cockpit-os.de/api"
         data-center-id="center-uuid">
    </div>

  2. JavaScript macht SVG interaktiv:

    // Findet alle Shop-Elemente
    const shopElements = svgDoc.querySelectorAll('[id^="shop-"]');

    // Macht sie klickbar
    shopElements.forEach(element => {
      element.addEventListener('click', () => {
        window.location.href = shopUrl;
      });
    });

  3. Tooltip wird angezeigt:

    element.addEventListener('mouseenter', (e) => {
      showTooltip(e, shopData);
    });

🛠️ Technische Details​

Datenfluss:​

1. SVG-Datei (Kunde)
   ↓
2. Dashboard Upload
   ↓
3. MapFloor-Eintrag (DB)
   ↓
4. Shop-Mapping (Dashboard)
   ↓
5. MapLocation-Einträge (DB)
   ↓
6. WordPress Widget
   ↓
7. JavaScript lädt SVG + Shop-Daten
   ↓
8. Interaktive Karte mit Tooltips

API-Calls:​

// Shop-Daten laden
GET /api/shops?centerId=center-uuid

// Service-Daten laden
GET /api/services?centerId=center-uuid

// MapLocations laden (optional)
GET /api/wayfinding/locations?floorId=floor-uuid

Tooltip-Daten:​

{
  name: "Aldi",
  category: "Lebensmittel",
  floor: "EG",
  openingHours: "Mo-Sa 8:00-20:00",
  description: "Ihr Discounter für...",
  url: "/shops/aldi/"  // WordPress Post URL
}

🎯 SVG-Element-Mapping​

Methode 1: ID-basiert (empfohlen)​

SVG-Element-ID = Shop-ID aus Dashboard

<!-- SVG -->
<rect id="shop-aldi-eg-1" ... />

<!-- Dashboard -->
Shop-ID: "shop-aldi-eg-1"

Methode 2: Data-Attribut​

<!-- SVG -->
<rect id="aldi-shape" data-id="shop-aldi-eg-1" ... />

<!-- Dashboard -->
Shop-ID: "shop-aldi-eg-1"

Methode 3: Koordinaten-basiert​

<!-- SVG -->
<rect id="shop-1" x="100" y="100" width="200" height="150" ... />

<!-- Dashboard Mapping -->
Shop "Aldi" → Koordinaten (100, 100)
→ System findet SVG-Element an dieser Position

🎨 Styling​

Tooltip-Anpassung:​

/* Custom Tooltip Styles */
.cockpit-svg-tooltip {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border: none;
  box-shadow: 0 10px 25px rgba(0,0,0,0.2);
}

.tooltip-title {
  color: white;
  font-size: 18px;
}

Hover-Effekt anpassen:​

// In interactive-svg-map.js
defaults = {
  hoverColor: '#60a5fa',      // Hellblau beim Hover
  highlightColor: '#3b82f6',  // Blauer Rand
  tooltipDelay: 200           // 200ms Verzögerung
}

🐛 Troubleshooting​

Problem: Shops sind nicht klickbar​

Ursache: SVG-Element-IDs stimmen nicht mit Shop-IDs überein

Lösung:

  1. Prüfe SVG-Element-IDs: 
    cat mall-eg.svg | grep -E 'id="shop-'
  2. Prüfe Shop-IDs im Dashboard
  3. Stelle sicher, dass IDs übereinstimmen

Problem: Tooltip zeigt keine Daten​

Ursache: API-Call schlägt fehl oder Shop-Daten fehlen

Lösung:

  1. Prüfe Browser-Konsole auf Fehler
  2. Teste API-Call manuell: 
    curl https://dashboard.cockpit-os.de/api/shops?centerId=YOUR_ID
  3. Prüfe, ob Shop-Daten vorhanden sind

Problem: SVG wird nicht geladen​

Ursache: Falsche SVG-URL oder CORS-Problem

Lösung:

  1. Prüfe SVG-URL im Browser
  2. Prüfe CORS-Header: 
    Access-Control-Allow-Origin: *
  3. Stelle sicher, dass SVG auf gleichem Server liegt

Problem: Klick führt nicht zu Shop-Seite​

Ursache: Shop hat keine WordPress-Post-URL

Lösung:

  1. Prüfe, ob Shop in WordPress existiert: 
    wp post list --post_type=cockpit_shop
  2. Prüfe Shop-Meta-Daten: 
    $shop_url = get_permalink($shop_post_id);
  3. Stelle sicher, dass Sync funktioniert hat

📚 Beispiele​

Beispiel 1: Einfacher Centerplan​

<!-- WordPress Template -->
<div class="centerplan-wrapper">
  <h2>Unser Centerplan</h2>
  <?php echo do_shortcode('[cockpit_centerplan center_id="center-1" map_type="interactive_svg"]'); ?>
</div>

Beispiel 2: Multi-Floor mit Tabs​

<div class="centerplan-multi-floor">
  <div class="floor-tabs">
    <button data-floor="eg">Erdgeschoss</button>
    <button data-floor="og1">1. OG</button>
  </div>
  
  <div class="floor-content">
    <div data-floor="eg">
      <?php echo do_shortcode('[cockpit_centerplan center_id="center-1" map_type="interactive_svg" default_floor="eg"]'); ?>
    </div>
    <div data-floor="og1" style="display:none;">
      <?php echo do_shortcode('[cockpit_centerplan center_id="center-1" map_type="interactive_svg" default_floor="og1"]'); ?>
    </div>
  </div>
</div>

🎓 Best Practices​

SVG-Erstellung:​

  • ✅ Verwende sprechende IDs (shop-aldi statt rect-1)
  • ✅ Gruppiere Elemente logisch (<g id="shops">)
  • ✅ Halte SVG-Datei klein (< 500KB)
  • ✅ Optimiere mit SVGO

Mapping:​

  • ✅ Mappe alle sichtbaren Shops
  • ✅ Teste Klickbarkeit nach Mapping
  • ✅ Prüfe Tooltip-Daten

Performance:​

  • ✅ Lazy-Load SVG bei großen Dateien
  • ✅ Cache Shop-Daten im Browser
  • ✅ Verwende CDN für SVG-Dateien

📞 Support​

Bei Fragen oder Problemen: