Zum Hauptinhalt springen

Feature-Katalog – Center-Website App

Vollständiger Katalog der Funktionen und Bereiche der Center-Website-App. Diese Seite dient als Showcase und Referenz (inkl. Versionierung über die Doku-Releases).

Kernbereiche​

Startseite & Navigation​

  • Dynamische Homepage pro Center (Hero, Tiles, Öffnungszeiten, Ansprechpartner)
  • Slug-basierte URLs: /{center-slug}/, /{center-slug}/shops, /{center-slug}/wayfinding usw.
  • Custom Domain: Optional eigene Domain pro Center (z. B. www.palais-vest.de)
  • Header & Footer: Zentrumsspezifisch, mit Links zu Shops, Gastronomie, Services, Aktuelles, Wayfinding, Kontakt, Rechtliches
  • Responsive Layout: Mobil, Tablet, Desktop

Shops​

  • Shop-Übersicht: Liste/Kacheln aller Shops mit Logo, Name, Kategorie
  • Shop-Detail: Einzelansicht mit Beschreibung, Öffnungszeiten, Kontakt, Lage (Wayfinding-Link); optional Anbieterinformationen (providerInfo) — Plaintext aus Dashboard (Shop / Filiale / Kette), dezent im Layout; bei Filialen Fallback auf die Kette, wenn die Filiale keinen eigenen Text hat
  • Centerplan / Wayfinding (Shop-Panel): Öffnungszeiten aus dem CMS mit HTML-Zeilenumbrüchen (<br>, <br/>) werden im Slide-up-Panel als mehrzeiliger Text angezeigt (kein sichtbares <br /> mehr)
  • Kategorien: Shops nach Kategorien gefiltert (z. B. Mode, Lebensmittel)
  • Themen/Cluster: Shops nach Themen (z. B. „Food“, „Fashion“) gruppiert
  • SEO: Slug-basierte URLs, Meta-Tags, strukturierte Daten (Schema.org Store)

Gastronomie​

  • Gastronomie-Übersicht: Restaurants, Cafés, Imbisse
  • Restaurant-Detail: Beschreibung, Öffnungszeiten, Kontakt, Verlinkung zu Shops
  • Themen: Gastronomie nach Themen (z. B. „Fast Food“, „Café“)

Services​

  • Service-Übersicht: Alle Services (WC, Info, Aufzug, etc.)
  • Service-Detail: Einzelansicht mit Beschreibung und optionalem Icon
  • Verlinkung: Zu Wayfinding und Shops wo sinnvoll

Offices & Gesundheitszentren​

  • Übersicht: Ärzte, Apotheken, Gesundheitsdienstleister
  • Detailseiten: Pro Office/Health-Center mit Kontakt und Themen
  • Themen: Filterung nach Fachrichtungen/Themen

Wayfinding & Centerplan​

  • Kaufland-Template / Shops-Seite: Mehrere Etagen werden als gestapelte Karten mit je eigener Überschrift (Name + Etage aus dem Dashboard) und größerem Kartenbereich dargestellt; die Spalte trägt die Überschrift „Centerplan“.
  • Layout-Modus (Cockpit → Website → Centerplan): Interaktiv (Standard) = eine Etage, 2D/3D, optionale Shop-Sidebar. Gesamtübersicht = Verzeichnis nach Kategorien, Service-Leiste (Service-POIs), alle Etagenpläne in einem Raster; Klicks in der Übersicht öffnen dieselben Shop-/Service-Modale wie in der Kartenansicht.
  • 2D/3D-Umschalter (Opt-in): Standard = Umschalter sichtbar wie bisher. Schalter aus im Reiter Centerplan → Besucher sehen nur die 2D-Karte (sinnvoll für Raster-/Hybrid-Pläne). Bestehende Center ohne diese Einstellung bleiben unverändert.
  • Karten-Darstellung (centerplanConfig.mapRenderer): Standard = bestehende 2D/3D-Wayfinding-Karte. Georeferenz-Overlay (boundsOverlay) = Vorbereitung für MEC-ähnliche, georeferenzierte Etagen – ohne Google Maps. Untergrund wahlweise keiner oder OpenStreetMap (boundsOverlayBasemap: none | osm); OSM ist kostenfrei und kein Google-Produkt.
  • MEC-Templates (Shopbox, Template A/C/D/Green/Grooss) erhalten ohne Eintrag in den Centerplan-Einstellungen dieselben effektiven Defaults wie auf der Website: Georeferenz-Overlay mit OSM-Untergrund, Startansicht 3D, etwas höherer Karten-Zoom. Sichtbar: heller kartenähnlicher Boden (Carto Positron statt bunter Standard-Kacheln) und Hintergrund #f3f3f3 wie im Legacy-Centerplan; bei vorhandenem Etagen-SVG kein BETA-Badge auf der Wayfinding-Seite.
  • MEC-Klassik („2D wie klassische MEC-Website“) – Wenn Georeferenz-Overlay, Untergrund OpenStreetMap und die Option 2D wie klassische MEC-Website aktiv sind, zeigt der Tab 2D eine verschiebbare OSM-Karte (Leaflet, heller Carto-Positron-Stil) mit dem interaktiven Etagen-SVG als Overlay; die Karte nutzt kein Google. Die Position des Plans auf der Karte leitet sich von den Wayfinding-Koordinaten des Centers ab; optional können im Cockpit unter Website → Centerplan eine Halbspanne in Metern (Fallback-Raster um den Mittelpunkt) und explizite GPS-Grenzen (Süd/West/Nord/Ost) gesetzt werden, damit Plan und Straßenkarte exakt zusammenpassen. Für diese Kombination ist die Startansicht auf der Wayfinding-Seite standardmäßig eher 2D (Wechsel zu 3D bleibt möglich).
  • Wayfinding-Seite: Interaktive Karte (2D-SVG und 3D-Isometrie)
  • Etagenauswahl: Mehrgeschossige Center mit Floor-Wechsel
  • Routenberechnung: Von Eingang zu Shop/Service (Multi-Floor inkl. Aufzug/Rolltreppe/Treppe)
  • Routen-Linie: Animierte Wegführung in 2D und 3D (gleicher berechneter Pfad; Designer-#routes bleiben unsichtbar)
  • Eingangsauswahl: Startpunkt der Route wählbar
  • Shop-/Service-Punkte: Klick auf Fläche öffnet Detail oder startet Route
  • 2D/3D (global, @mall-os/wayfinding): Klickbarkeit folgt derselben Karten-Zuordnung (Cockpit → Centerplan) – zentral in SVGFloorPlan / InteractiveFloorPlan über deriveLinkableSvgIds (Mapping-Keys, Logo-/Name-Maps); alle Einbindungen (Centerplan, Shop-Detail-Embed, Kiosk) nutzen dieselbe Logik
  • MEC ShopBox (Seite /centerplan): Die dunkle Sidebar mit Shopliste streckt sich auf die volle Höhe der Kartenzeile (Flex-Layout mit min-h-0). Im Shop-Panel (Slide-up) nutzt nur ein echtes Cover-/Listing-Bild den großen Bildkopf; wenn kein Cover hinterlegt ist, erscheint das Shop-Logo nur in einer kompakten Logo-Zeile, nicht im großen „Foto“-Format.

Aktuelles (News-Hub), Events, Jobs, Angebote​

  • Aktuelles-Hub (/aktuelles, MEC: /nachrichten): Basis-Template, MEC & Co. zeigen News, Events, Angebote und Jobs gemischt (gleiche Daten wie aktuelles-bundle). ILG-Template: auf /aktuelles nur News; Angebote /angebote, Jobs /jobs, Events /events.
  • Base-Template — Kacheln auf Aktuelles: Hintergrundbilder sind standardmäßig oben ausgerichtet (Gesichter/Köpfe nicht abgeschnitten). Im Dashboard Webseiten-Tab → Design → Content-Card Einstellungen → Bildausschnitt in Kacheln wahlweise Oben oder Mitte.
  • Galerie & Bilder im Artikel: Auf Detailseiten (News, Events, Angebote, Shops) sind Galerie-Kacheln und Bilder im Fließtext per Klick vergrößerbar (Lightbox, Esc zum Schließen, Pfeiltasten bei mehreren Bildern). Gilt u. a. für Base-Template, Social Lounge, ILG, HBB, Goldbeck, MEC-Shared.
  • News: Meldungen mit Detailseite, optional verknüpft mit Shop
  • Video (News, Events, Angebote, Services, Shops): Detailseiten können YouTube/Vimeo (Embed) oder MP4/WebM von Bunny anzeigen — Uploads laufen wie bei Bildern über FileUpload → /api/upload → Bunny Storage (centers/{centerId}/{entityType}/video/…) inkl. „Aus Mediathek“ (Videos in der Mediathek). Zusätzlich: AgencyOS POST /api/agencyos/v1/media/upload mit URL, Base64 oder Raw-Body (video/*, bis ca. 100 MB) sowie MCP-Tool cockpit_agencyos_upload_media (URL oder Base64). Im Cockpit: News und Events Hero-Video / Video im Artikel; Angebote Video-URL; Services Cover-Video; Shops Hero-Video. Öffentliche Daten: aktuelles-bundle enthält die Video-Felder; Einzelangebot GET …/centers/{id}/offers?offerId= liefert dieselben URLs inkl. Galerie; Shop-Filialen im Center-Shop-Listing erhalten video aus ShopLocation.video / coverVideo. Kein unsicheres iframe/video im Rich-Text.
  • ILG – News- & Angebots-Detail (Bild): Das Teaserbild bleibt rechts neben dem Text (Zwei-Spalten-Layout ab Desktop). Es wird vollständig angezeigt (object-contain, natürliches Seitenverhältnis) — ohne festen 4:3-Zuschnitt wie zuvor.
  • News- & Angebots-Detail: Am Seitenende „Weitere Themen“ — zuerst gleiches Content-Thema (bzw. gleiche Legacy-Kategorie bei News, Tag-Überschneidung bei Angeboten), danach die neuesten übrigen ohne den aktuellen Artikel. Umgesetzt auf /aktuelles/news|angebote, /nachrichten/news|angebote (MEC), im ILG-Template sowie im generischen ContentDetailClient (Fallback).
  • Events: Veranstaltungen mit Datum, Ort, Detailseite
  • Jobs: Stellenangebote, optional mit Shop-Verknüpfung
  • Angebote: Aktionen und Deals, verknüpft mit Shops, Detailseite pro Angebot
  • ILG – Angebotsübersicht & Kurz-URLs: Die Seite „Angebote“ zeigt nur aus dem Cockpit gelieferte Angebote (mit freundlichem Hinweis, wenn keine vorhanden); optional einen zweiten Block „Weitere Angebote“ bei vielen Einträgen. Die Legacy-Pfade /angebote-detail und /news-detail leiten auf das aktuell neueste Angebot bzw. die neueste News oder zeigen eine Leer-Meldung mit Link zur Übersicht. Zusätzliche Kacheln „Mehr im Center“ nur für Gutschein und Promotionfläche, sofern die jeweilige Unterseite für das Center aktiviert ist.

Suche & Discovery​

  • Globale Suche: Shops, Gastronomie, Services, Events, News durchsuchbar
  • Kategorien & Filter: Nach Kategorie, Thema, Typ
  • AI-Suche: Optional KI-gestützte Suche (Chat/Assistent)

Zusatzseiten & Rechtliches​

  • Parking: Parkinformationen (Text, Anfahrtsbeschreibung, optional Video)
  • Öffnungszeiten: Center-Öffnungszeiten, Feiertage
  • MEC Template D – Öffnungszeiten-Seite: Tages-Tabs und Shop-Liste mit roten Zeitbalken auf einem 5:00–22:00-Raster (wie das historische MEC-Template), sofern die Shop-Zeiten strukturiert parsebar sind; bei reinem Freitext erfolgt die Anzeige wie eine kompakte Textzeile rechts neben dem Namen
  • Kontakt: Kontaktformular bzw. Kontaktdaten
  • Impressum: Rechtlich erforderliche Angaben (aus Dashboard konfigurierbar)
  • Datenschutz: Datenschutzerklärung (konfigurierbar, DSGVO)

To-Go & QR​

  • To-Go-Landing: Spezielle Seite pro QR-Code (z. B. für Abholung)
  • QR-Tracking: Aufruf/Tracking über API für Analytics

AI & Conversational​

  • AI-Chatbot: Integrierter Assistent für Besucherfragen (Öffnungszeiten, Shops, Wayfinding)
  • Voice Input: Optional Spracherkennung für Suche/Chat
  • Feedback: „War die Antwort hilfreich?“ (Thumbs up/down) mit Auswertung im Dashboard

SEO, AI-Sichtbarkeit & GEO​

  • SEO: Meta-Tags (Title, Description, Keywords), Canonical URLs, Open Graph, Twitter Cards, dynamische Sitemap und robots.txt, Structured Data (Schema.org: ShoppingCenter, Store, Event inkl. Organizer, NewsArticle inkl. Autor/datePublished/dateModified, Offer, Breadcrumb; auf Listenseiten ItemList + BreadcrumbList; HowTo auf Route Anfahrt; optional FAQPage-Helfer in seo-utils)
  • Local SEO (Lokale Suche): Geo-Koordinaten aus Center-Stammdaten in Schema.org und Meta (icbm, geo.placename) für standortbezogene Suchergebnisse und Karten – nicht zu verwechseln mit GEO
  • GEO (Generative Engine Optimization / KI-Sichtbarkeit): Optimierung für Sichtbarkeit in KI-Antworten (ChatGPT, Gemini, AI Overviews) – JSON-LD, Crawlability, Publisher, klare Entitäten; Beides (Local SEO + GEO) ist wichtig
  • AI-Sichtbarkeit: Maschinenlesbare Inhalte, Crawler-freundliche robots.txt, optional Chatbot; zentrale Übersicht im Dashboard unter Analytics & Insights → SEO & AI-Sichtbarkeit
  • Umami für SEO/AI: Erfassung von Seitenaufrufen, Chatbot-Nutzung, Wayfinding-Events pro Center; Nutzungsdaten (z. B. letzte 7 Tage) in der zentralen SEO-&-AI-Sichtbarkeit-Ansicht

Ausführliche Erklärung: SEO, AI-Sichtbarkeit & GEO.

Technik & Integration​

  • Multi-Tenant: Ein Build, viele Center (Slug/Domain-basiert)
  • SSR/SEO: Server-Side Rendering, Meta-Tags, Sitemaps, robots.txt, Structured Data
  • Analytics: Umami/Google Analytics/Matomo-Anbindung, Event-Tracking (inkl. SEO/AI-relevante Events)
  • Cookie-Consent: DSGVO-konforme Cookie-Banner und Einwilligung
  • Theme & Branding: Pro Center konfigurierbare Farben, Logo, Hero-Video/Bild
  • Onboarding: Einrichtungs-Assistent für neue Center (Konfiguration prüfen/ setzen)
  • Reconfigure: Zentrum wechseln / Konfiguration zurücksetzen (z. B. nach Link von anderem Center)

Template Kaufland (kaufland)​

  • Homepage: Mehrere Karten im Reiter (Hero, Mally-Band unter dem Hero, Willkommen, Teaser, Karussell, Promo). Mally-Band: nur sichtbar, wenn KI-Chat aktiv ist und die Assistenten-Seite „Mally“ gewählt ist; optional per Schalter ausblendbar, Überschrift und Fließtext anpassbar (sonst Standardtexte). Stichpunkte optional bis 24 Zeilen (hinzufügen/entfernen); leere Zeilen und komplett leere Liste → Fallback auf Standardtexte. Interne Ziele (Button, Teaser, Promo-Karten): wahlweise vordefinierte Seiten (Startseite, Kontakt, Shops, …) oder eigener Pfad / externe URL.
  • Header & Navigation: Logo-Größe (Standard / Groß / Sehr groß); Menüpunkte mit derselben Vorlage-/Custom-Link-Auswahl wie auf der Homepage.
  • Shops-Seite, Bereich Öffnungszeiten: Pro Shop Telefonnummer in der Zeile nach Auflösung: zuerst Filiale bzw. Einzelshop (phone), sonst Ketten-Stamm (ShopChain.phone im Dashboard unter Shopkette), sonst – falls im Center vorhanden – eine andere Filiale/Shop derselben Kette mit Nummer. Ohne Nummer in dieser Reihenfolge bleibt die Zeile leer.
  • Vermietung & Kontakt (Reiter): Inhalte logisch in Abschnitte/Karten geteilt; Formular-E-Mails und Flächen/Vorteile getrennt übersichtlicher.
  • KI-Chatbot, Layout Mally: Die schwebende Chat-Bubble nutzt standardmäßig die größere Voreinstellung; unter Größe (Chat-Bubble) im KI-Chatbot-Reiter auf Klein/Mittel stellen, um zu verkleinern.

Template Ree Carrée (ree-carree)​

  • Cockpit-Reiter (Webseite): Ein Reiter pro Bereich — Startseite (Hero, Angebote & Deals, Event-Banner, Öffnungszeiten), Header & Navigation (inkl. Infobar), Footer: Logo-Laufleiste (über dem Footer), Footer: Inhalte, Seiten (Shops, Highlights, Services, Kontakt, Quartier-Kompass, Impressum, Datenschutz, Français, Lëtzebuergisch). Der generische Reiter „Seiten-Texte“ entfällt. Übersetzung: Reiter Übersetzung (DeepL) — siehe DeepL im Cockpit.
  • Event-Banner (Startseite): Im Dashboard unter Webseite → Reiter Event-Banner per Schalter Anzeigen ein- oder ausblenden (großes Promo-Band mit Countdown/CTA). Technisch: templateContent['ree-carree'].eventBanner.enabled — false blendet aus, Standard ist sichtbar.
  • Angebote & Deals (Startseite): Filter Shoppen / Genießen / Leben und Datum auf Karten im Reiter steuerbar; Button Alle ansehen verlinkt standardmäßig auf /highlights. Klick auf News/Angebot/Event öffnet ein Detail-Modal mit dem vollständigen CMS-Text (scrollbar, kein Link zu Aktuelles-Unterseiten).
  • Öffnungszeiten (Startseite): Sektion „Deine Shopping-Zeit“ im Reiter Startseite: Öffnungszeiten per Schalter ausblendbar (openingHours.sectionEnabled). Die Shop-Zeiten kommen aus den Center-Stammdaten (Öffnungszeiten im Cockpit); Kopfzeilen (Badge/Titel) aus dem Template-Reiter.
  • Footer: Logo-Laufleiste über dem Footer-Bereich; Inhalte (Text, Kontakt, Social, Öffnungszeiten-Spalte) im Reiter Footer: Inhalte. Header-Infobar im Reiter Header & Navigation.
  • Seiten Hero: Shops, Quartier-Kompass und Kontakt nutzen Page-Content aus den jeweiligen Seiten-Reitern (Titel, Untertitel, optional Hero-Bild und Beschreibung).
  • Highlights: Eigene Unterseite /highlights (Menüpunkt im Reiter Header & Navigation wählbar: eigene Seite, Anker #aktionen oder ausblenden). Karten öffnen dasselbe scrollbare Detail-Modal mit Volltext — ohne Button „Mehr erfahren“ zu /aktuelles/….
  • Services: Cockpit-Services oder eigene Karten im Reiter Seite: Services; Titelbilder aus CMS coverImage bzw. manuell hochgeladen. Auf /services zeigen die Karten Bild, Titel, Kurztext und Merkmals-Badges — kein ausklappbares „Mehr Details“ (Preistabelle/Zusatzliste).
  • Centerplan (/centerplan): Einstellungen aus dem Cockpit-Reiter Centerplan (Sidebar, Gesamtübersicht, 2D/3D, Legende, Karten-Modus). Shop-Sidebar nur bei aktivierter Option; Liste aus MapLocations der Etage, sonst Fallback aus Cockpit-Shops (Feld Etage). Seiten-Hero aus Webseite → Seite: Quartier-Kompass.
  • Footer: Logo-Laufleiste aus aktiven Shop-Logos (optional verlinkt) statt Text-Marquee.
  • Farben (Design-Tab): Primärfarbe = u. a. Navi, Shoppen, Ring; Sekundärfarbe = helle Flächen (u. a. Secondary-Flächen; z. B. warmes Grau #f3f1f0 wie in der Referenz); Akzentfarbe = Genießen & Events. Leben nutzt im Theme ein festes Blau (#006d91, wie in der Vorschau) und ist nicht einzeln im Cockpit wählbar. Hintergrund, Karten, Rahmen, Muted, Sidebar folgen dem Referenz-Theme (u. a. #fcfcfc, #ffffff, #e3e4e6, #edeef0 / #52555b) und werden dafür nicht über die Helligkeits-Slider abgebildet. Schatten (z. B. --shadow-card …) sind neutral (slate/grau), nicht primärfarben getönt, Optik wie Vorschau. Border-Radius (Referenz: 8px / 0.5rem, im Theme gesetzt).
  • Unterseiten-Layout: Dieselbe Hauptnavigation wie auf der Startseite (fixiert); der aktuelle Menüpunkt ist hervorgehoben (Unterstreichung Desktop, Akzent Mobil). Keine separate „Zurück“-Zeile mehr.
  • Shops & Restaurants (/shops): Liste aus dem Cockpit-Modul Shops (Status Aktiv, Website-Sichtbarkeit). Dreiklang Shoppen / Genießen / Leben: im Cockpit unter Content → Shops (Einzelshop) bzw. Filialen (Shop-Location) im Feld „Ree Carrée – Bereich“ (metadata.reeCarreeCategory); leer = automatisch aus der Shop-Kategorie (wie bisher). Optional eigene Karten im Reiter Seite: Shops (überschreiben die CMS-Liste). Display-ID im Shop → Verknüpfung Quartier-Kompass (shop=). Modal: Link zur Shop-Detailseite, wenn Slug gesetzt. Ohne CMS-Shops: Hinweistext (keine Demo-Daten auf Produktion).

Versionierung dieses Katalogs​

Dieser Feature-Katalog gehört zur Dokumentations-Version. Bei einem Release der Doku wird eine neue Version angelegt; der Katalog entspricht dann dem Stand der beschriebenen Center-Website-Features zu diesem Zeitpunkt. Siehe Versionierung.

Letzte Aktualisierung des Katalogs: siehe Versions-Dropdown in der Navigation (oben).

Nutzungsstatistik: Seitenaufrufe werden anonymisiert erfasst. Im Umami-Dashboard nach diesem Pfad filtern: /center-website/feature-katalog