WordPress Integration

Overview

The Interactive SVG Map allows you to integrate pre-designed SVG center plan files into WordPress pages - WITHOUT 3D CONVERSION. Shops and services become clickable and display tooltips with information from the dashboard.

NEW: Single Source of Truth + DRY Principle

All data is transferred during the sync from the dashboard to WordPress.
SVG files are stored locally (no CDN access needed).
Shop/service data is available in WordPress (no API calls!).
Faster, offline-capable, simpler code.

Features

What Works:

Upload SVG - Pre-designed SVG file from the client.
Map Shops/Services - Map to SVG coordinates in the dashboard.
WordPress Integration - SVG is displayed 1:1 on the website.
Interactive Elements - Shop areas become clickable.
Tooltips - Hover shows shop info from the dashboard.
Single Page Links - Click leads to shop detail page.

What DOES NOT Happen

No 3D conversion.
No changes to the SVG design.
No automatic generation.

Workflow (NEW: With Sync!)

1. Prepare SVG (Client/Designer)

The client provides a finished SVG file with:

Shop areas as <rect>, <polygon> or <path>.
Unique IDs for each shop area.
Optionally: data-id attributes for mapping.

Example:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 800">
  <!-- Background, aisles, etc. -->
  <rect x="0" y="0" width="1000" height="800" fill="#f5f5f5"/>
  
  <!-- Shop areas -->
  <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. Upload SVG (Dashboard)

Dashboard → Center Plans → New Center Plan (or Edit Floor)
→ Upload SVG
→ System analyzes structure
→ MapFloor is created

What Happens:

SVG is stored (e.g., /uploads/wayfinding/svg/mall-eg.svg).
MapFloor entry in the database.
SVG elements are recognized.

3. Map Shops/Services (Dashboard)

Dashboard → Center Plans → Mapping
→ Select Center
→ Select Floor
→ Click Area → Choose Shop from Modal

What Happens:

Shop is linked to the SVG element.
Coordinates are saved.
MapLocation entry in the database.

Important:

The SVG element ID must match the mapped shop ID.
Or: Use data-id attribute in the SVG.

3.5. Perform Sync (NEW)

WordPress Admin → cockpitOS → Sync → Start Full Sync

What Gets Synced:

MapFloors - Floor data with SVG URLs.
SVG Files - Download & local storage in /wp-content/uploads/wayfinding/svg/.
MapLocations - Shop/service positions on the map.
Shop Data - Name, category, opening hours, URL, logo.
Service Data - Name, category, description, icon.

Result:

All data available locally in WordPress.
No more API calls needed.
Faster & offline-capable.

Option A: Elementor Widget

Elementor → Add Widget → cockpitOS Center Plan
→ Map Type: "Interactive SVG"
→ Select Center
→ Select Floor
→ Save

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"]');
?>

How It Works

Frontend Rendering:

SVG is loaded:

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

JavaScript makes SVG interactive:

// Finds all shop elements
const shopElements = svgDoc.querySelectorAll('[id^="shop-"]');

// Makes them clickable
shopElements.forEach(element => {
  element.addEventListener('click', () => {
    window.location.href = shopUrl;
  });
});

Tooltip is displayed:

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

Technical Details

Data Flow:

1. SVG File (Client)
   ↓
2. Dashboard Upload
   ↓
3. MapFloor Entry (DB)
   ↓
4. Shop Mapping (Dashboard)
   ↓
5. MapLocation Entries (DB)
   ↓
6. WordPress Widget
   ↓
7. JavaScript loads SVG + Shop Data
   ↓
8. Interactive Map with Tooltips

API Calls:

// Load Shop Data
GET /api/shops?centerId=center-uuid

// Load Service Data
GET /api/services?centerId=center-uuid

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

{
  name: "Aldi",
  category: "Grocery",
  floor: "Ground Floor",
  openingHours: "Mon-Sat 8:00-20:00",
  description: "Your discount store for...",
  url: "/shops/aldi/"  // WordPress Post URL
}

SVG Element Mapping

Method 1: ID-Based (Recommended)

SVG element ID = Shop ID from Dashboard

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

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

Method 2: Data Attribute

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

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

Method 3: Coordinate-Based

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

<!-- Dashboard Mapping -->
Shop "Aldi" → Coordinates (100, 100)
→ System finds SVG element at this position

Styling

/* 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 Effect Customization:

// In interactive-svg-map.js
defaults = {
  hoverColor: '#60a5fa',      // Light blue on hover
  highlightColor: '#3b82f6',  // Blue border
  tooltipDelay: 200           // 200ms delay
}

Troubleshooting

Problem: Shops are not clickable

Cause: SVG element IDs do not match shop IDs.

Solution:

Check SVG element IDs:
```
cat mall-eg.svg | grep -E 'id="shop-"
```
Check shop IDs in the dashboard.
Ensure that IDs match.

Cause: API call fails or shop data is missing.

Solution:

Check browser console for errors.

Test API call manually:

curl https://dashboard.cockpit-os.de/api/shops?centerId=YOUR_ID

Check whether shop data exists.

Problem: SVG is not loading

Cause: Incorrect SVG URL or CORS issue.

Solution:

Check SVG URL in browser.
Check CORS headers:
```
Access-Control-Allow-Origin: *
```
Ensure that SVG is on the same server.

Problem: Click does not lead to shop page

Cause: Shop has no WordPress post URL.

Solution:

Check if the shop exists in WordPress:
```
wp post list --post_type=cockpit_shop
```

Check shop meta data:

$shop_url = get_permalink($shop_post_id);

Ensure that sync has worked.

Examples

Example 1: Simple Center Plan

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

Example 2: Multi-Floor with Tabs

<div class="centerplan-multi-floor">
  <div class="floor-tabs">
    <button data-floor="eg">Ground Floor</button>
    <button data-floor="og1">1st Floor</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

Creating SVG:

Use descriptive IDs (shop-aldi instead of rect-1).
Group elements logically (<g id="shops">).
Keep SVG file small (< 500KB).
Optimize with SVGO.

Mapping:

Map all visible shops.
Test clickability after mapping.
Check tooltip data.

Performance:

Lazy-load SVG for large files.
Cache shop data in the browser.
Use CDN for SVG files.

API: Push Content from WordPress to Cockpit

For technical integration (REST, authentication, JSON fields for shops, events, news, offers, services, static pages), see:

REST: WordPress Push Content

Support

For questions or problems:

Documentation: Center Plans
Examples: examples/
Wayfinding / API Tests (local): Quick Start (curl examples in dashboard context)

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

Overview​

Features​

What Works:​

What DOES NOT Happen​

Workflow (NEW: With Sync!)​

1. Prepare SVG (Client/Designer)​

2. Upload SVG (Dashboard)​

3. Map Shops/Services (Dashboard)​

3.5. Perform Sync (NEW)​

4. Integrate WordPress Widget​

Option A: Elementor Widget​

Option B: Shortcode​

Option C: PHP Template​

How It Works​

Frontend Rendering:​

Technical Details​

Data Flow:​

API Calls:​

Tooltip Data:​

SVG Element Mapping​

Method 1: ID-Based (Recommended)​

Method 2: Data Attribute​

Method 3: Coordinate-Based​

Styling​

Tooltip Customization:​

Hover Effect Customization:​

Troubleshooting​

Problem: Shops are not clickable​

Problem: Tooltip shows no data​

Problem: SVG is not loading​

Problem: Click does not lead to shop page​

Examples​

Example 1: Simple Center Plan​

Example 2: Multi-Floor with Tabs​

🎓 Best Practices​

Creating SVG:​

Mapping:​

Performance:​

API: Push Content from WordPress to Cockpit​

Support​

Overview

Features

What Works:

What DOES NOT Happen

Workflow (NEW: With Sync!)

1. Prepare SVG (Client/Designer)

2. Upload SVG (Dashboard)

3. Map Shops/Services (Dashboard)

3.5. Perform Sync (NEW)

4. Integrate WordPress Widget

Option A: Elementor Widget

Option B: Shortcode

Option C: PHP Template

How It Works

Frontend Rendering:

Technical Details

Data Flow:

API Calls:

Tooltip Data:

SVG Element Mapping

Method 1: ID-Based (Recommended)

Method 2: Data Attribute

Method 3: Coordinate-Based

Styling

Tooltip Customization:

Hover Effect Customization:

Troubleshooting

Problem: Shops are not clickable

Problem: Tooltip shows no data

Problem: SVG is not loading

Problem: Click does not lead to shop page

Examples

Example 1: Simple Center Plan

Example 2: Multi-Floor with Tabs

🎓 Best Practices

Creating SVG:

Mapping:

Performance:

API: Push Content from WordPress to Cockpit

Support