Skip to main content

Feature Catalog – Center Website App

Complete catalog of features and areas of the Center Website app. This page serves as a showcase and reference (including versioning through the documentation releases).

Core Areas​

Homepage & Navigation​

  • Dynamic Homepage per center (Hero, Tiles, Opening Hours, Contact Persons)
  • Slug-based URLs: /{center-slug}/, /{center-slug}/shops, /{center-slug}/wayfinding, etc.
  • Custom Domain: Optional own domain per center (e.g., www.palais-vest.de)
  • Header & Footer: Center-specific, with links to shops, dining, services, news, wayfinding, contact, legal information
  • Responsive Layout: Mobile, tablet, desktop

Shops​

  • Shop Overview: List/Tiles of all shops with logo, name, category
  • Shop Detail: Individual view with description, opening hours, contact, location (wayfinding link); optional Provider Information (providerInfo) — plain text from dashboard (shop/branch/chain), subtly in layout; for branches, fallback to chain if the branch has no text
  • Center Plan / Wayfinding (Shop Panel): Opening hours from CMS with HTML line breaks (<br>, <br/>) displayed as multiline text in the slide-up panel (no visible <br /> anymore)
  • Categories: Shops filtered by categories (e.g., Fashion, Food)
  • Themes/Clusters: Shops grouped by themes (e.g., "Food", "Fashion")
  • SEO: Slug-based URLs, meta tags, structured data (Schema.org Store)

Dining​

  • Dining Overview: Restaurants, cafes, snack bars
  • Restaurant Detail: Description, opening hours, contact, links to shops
  • Themes: Dining categorized by themes (e.g., "Fast Food", "Cafe")

Services​

  • Service Overview: All services (restrooms, information, elevators, etc.)
  • Service Detail: Individual view with description and optional icon
  • Linking: To wayfinding and shops where appropriate

Offices & Health Centers​

  • Overview: Doctors, pharmacies, health service providers
  • Detail Pages: For each office/health center with contact and themes
  • Themes: Filtering by specialties/themes

Wayfinding & Center Plan​

  • Kaufland Template / Shops Page: Multiple floors presented as stacked maps with their own heading (name + floor from the dashboard) and a larger map area; the column is titled "Center Plan."
  • Layout Mode (Cockpit → Website → Center Plan): Interactive (default) = one floor, 2D/3D, optional shop sidebar. Overall Overview = directory by categories, service bar (service POIs), all floor plans in a grid; clicks in the overview open the same shop/service modals as in the map view.
  • 2D/3D Toggle (Opt-in): Default = toggle visible as before. Toggle off in the Center Plan tab → visitors see only the 2D map (sensible for grid/hybrid plans). Existing centers without this setting remain unchanged.
  • Map Display (centerplanConfig.mapRenderer): Default = existing 2D/3D wayfinding map. Georeferenced Overlay (boundsOverlay) = preparation for MEC-like, georeferenced floors – without Google Maps. Background optionally none or OpenStreetMap (boundsOverlayBasemap: none | osm); OSM is free and not a Google product.
  • MEC Templates (Shopbox, Template A/C/D/Green/Grooss) receive the same effective defaults as the website without entry in the center plan settings: Georeferenced overlay with OSM background, starting view 3D, slightly higher map zoom. Visible: bright map-like ground (Carto Positron instead of colorful standard tiles) and background #f3f3f3 like in the legacy center plan; with existing floor SVG no BETA badge on the wayfinding page.
  • MEC Classic ("2D like classic MEC website") – If Georeferenced Overlay, background OpenStreetMap, and the option 2D like classic MEC website are active, the 2D tab shows a movable OSM map (Leaflet, bright Carto-Positron style) with the interactive floor SVG as an overlay; the map uses no Google. The position of the plan on the map derives from the wayfinding coordinates of the center; optionally, a half-width in meters (fallback grid around the center point) and explicit GPS boundaries (South/West/North/East) can be set in the cockpit under Website → Center Plan to ensure the plan and street map align precisely. For this combination, the starting view on the wayfinding page is defaulted to be more 2D (switching to 3D remains possible).
  • Wayfinding Page: Interactive map (2D-SVG and 3D isometric)
  • Floor Selection: Multi-story centers with floor change
  • Route Calculation: From entrance to shop/service (multi-floor including elevator/stairs/escalator)
  • Route Line: Animated path in 2D and 3D (same calculated path; designer-#routes remain invisible)
  • Entrance Selection: Starting point of the route selectable
  • Shop/Service Points: Click on area opens detail or starts route
  • 2D/3D (global, @mall-os/wayfinding): Clickability follows the same map assignment (Cockpit → Center Plan) – centrally in SVGFloorPlan / InteractiveFloorPlan via deriveLinkableSvgIds (Mapping-Keys, Logo/Name Maps); all integrations (Center Plan, Shop Detail Embed, Kiosk) use the same logic
  • MEC ShopBox (Page /centerplan): The dark sidebar with shop list stretches to the full height of the map row (flex layout with min-h-0). In the Shop Panel (slide-up), only a real cover/listing image uses the large image header; if no cover is set, the shop logo appears only in a compact logo row, not in the large "photo" format.

News Hub, Events, Jobs, Offers​

  • News Hub (/aktuelles, MEC: /nachrichten): Base template, MEC & Co. show news, events, offers, and jobs mixed (same data as aktuelles-bundle). ILG Template: on /aktuelles only news; offers /angebote, jobs /jobs, events /events.
  • Base Template — Tiles on News: Background images are by default top-aligned (faces/heads not cut off). In the dashboard Website Tab → Design → Content-Card Settings → Image Cropping in Tiles optionally Top or Center.
  • Gallery & Images in Articles: On detail pages (news, events, offers, shops), gallery tiles and images in text can be enlarged by click (lightbox, Esc to close, arrow keys for multiple images). Applies to, among others, Base Template, Social Lounge, ILG, HBB, Goldbeck, MEC-Shared.
  • News: Announcements with detail page, optionally linked to shop
  • Video (News, Events, Offers, Services, Shops): Detail pages can display YouTube/Vimeo (Embed) or MP4/WebM from Bunny — uploads run like images via FileUpload → /api/upload → Bunny Storage (centers/{centerId}/{entityType}/video/...) including "From Media Library" (videos in the media library). Additionally: AgencyOS POST /api/agencyos/v1/media/upload with URL, Base64, or Raw-Body (video/*, up to approx. 100 MB) as well as MCP Tool cockpit_upload_media (URL or Base64). In the cockpit: News and Events Hero Video / Video in Article; Offers video URL; Services Cover Video; Shops Hero Video. Public Data: aktuelles-bundle contains the video fields; Single Offer GET .../centers/{id}/offers?offerId= delivers the same URLs including gallery; Shop branches in the center shop listing receive video from ShopLocation.video / coverVideo. No insecure iframe/video in rich text.
  • ILG – News & Offer Detail (Image): The teaser image remains to the right of the text (two-column layout from desktop). It is displayed completely (object-contain, natural aspect ratio) — without a fixed 4:3 crop as before.
  • News & Offer Detail: At the bottom of the page "Further Topics" — first the same content theme (or the same legacy category for news, date overlap for offers), then the newest remaining ones without the current article. Implemented on /aktuelles/news|offers, /nachrichten/news|offers (MEC), in the ILG Template as well as in the generic ContentDetailClient (fallback).
  • Events: Events with date, location, detail page
  • Jobs: Job offers, optionally linked to shop
  • Offers: Promotions and deals, linked to shops, detail page per offer
  • ILG – Offers Overview & Short URLs: The "Offers" page shows only offers delivered from the cockpit (with a friendly note if none are available); optionally a second block "More Offers" for many entries. The legacy paths /angebote-detail and /news-detail redirect to the currently latest offer or the latest news or show an empty message with a link to the overview. Additional tiles "More in Center" only for voucher and promotion area, provided the respective sub-page is activated for the center.

Search & Discovery​

  • Global Search: Searchable for shops, dining, services, events, news
  • Categories & Filters: By category, theme, type
  • AI Search: Optional AI-powered search (chat/assistant)

Additional Pages & Legal Information​

  • Parking: Parking information (text, directions, optional video)
  • Opening Hours: Center opening hours, holidays
  • MEC Template D – Opening Hours Page: Daily tabs and shop list with red time bars on a 5:00–22:00 grid (like the historical MEC template), provided the shop times are structured parseable; in plain text, display like a compact text line next to the name
  • Contact: Contact form or contact details
  • Imprint: Legally required information (configurable from dashboard)
  • Privacy Policy: Privacy statement (configurable, GDPR compliant)

To-Go & QR​

  • To-Go Landing: Special page per QR code (e.g., for pickup)
  • QR Tracking: Call/tracking via API for analytics

AI & Conversational​

  • AI Chatbot: Integrated assistant for visitor questions (opening hours, shops, wayfinding)
  • Voice Input: Optional speech recognition for search/chat
  • Feedback: “Was the answer helpful?” (thumbs up/down) with evaluation in the dashboard

SEO, AI Visibility & GEO​

  • SEO: Meta tags (title, description, keywords), canonical URLs, Open Graph, Twitter cards, dynamic sitemap and robots.txt, structured data (Schema.org: ShoppingCenter, Store, Event including Organizer, NewsArticle including Author/datePublished/dateModified, Offer, Breadcrumb; on listing pages ItemList + BreadcrumbList; HowTo on route directions; optional FAQPage helper in seo-utils)
  • Local SEO (Local Search): Geo-coordinates from center master data in Schema.org and meta (icbm, geo.placename) for location-based search results and maps – not to be confused with GEO
  • GEO (Generative Engine Optimization / AI Visibility): Optimization for visibility in AI responses (ChatGPT, Gemini, AI Overviews) – JSON-LD, crawlability, publisher, clear entities; both (Local SEO + GEO) are important
  • AI Visibility: Machine-readable content, crawler-friendly robots.txt, optional chatbot; central overview in the dashboard under Analytics & Insights → SEO & AI Visibility
  • Umami for SEO/AI: Recording of page views, chatbot usage, wayfinding events per center; usage data (e.g., last 7 days) in the central SEO & AI visibility view

Detailed explanation: SEO, AI Visibility & GEO.

Technology & Integration​

  • Multi-Tenant: One build, many centers (slug/domain-based)
  • SSR/SEO: Server-side rendering, meta tags, sitemaps, robots.txt, structured data
  • Analytics: Umami/Google Analytics/Matomo integration, event tracking (including SEO/AI relevant events)
  • Cookie Consent: GDPR-compliant cookie banner and consent
  • Theme & Branding: Configurable colors, logo, hero video/image per center
  • Onboarding: Setup assistant for new centers (check/set configuration)
  • Reconfigure: Switch center / reset configuration (e.g., after link from another center)

Kaufland Template (kaufland)​

  • Homepage: Multiple maps in tab (Hero, Mally-band under the hero, welcome, teaser, carousel, promo). Mally-band: visible only when AI chat is active and the assistant page "Mally" is selected; optionally hideable via switch, heading and flow text adjustable (otherwise default text). Bullet points optionally up to 24 lines (add/remove); empty lines and completely empty list → fallback to default text. Internal targets (button, teaser, promo cards): optionally predefined pages (homepage, contact, shops, etc.) or custom path / external URL.
  • Header & Navigation: Logo size (default / large / extra large); menu items with the same template/custom-link selection as on the homepage.
  • Shops Page, Opening Hours Section: Per shop telephone number in the line after resolution: first branch or individual shop (phone), otherwise chain headquarters (ShopChain.phone in the dashboard under shop chain), or, if available, another branch/shop of the same chain with the number. Without a number in this order, the line remains empty.
  • Rental & Contact (Tab): Content logically divided into sections/cards; form emails and areas/advantages clearer separated.
  • AI Chatbot, Layout Mally: The floating chat bubble uses the larger default setting; adjust under Size (Chat Bubble) in the AI Chatbot tab to small/medium to reduce.

Ree Carrée Template (ree-carree)​

  • Cockpit Tab (Website): One tab per area — Homepage (Hero, Offers & Deals, Event Banner, Opening Hours), Header & Navigation (including info bar), Footer: Logo Marathon (above the footer), Footer: Content, Pages (Shops, Highlights, Services, Contact, Quarter Compass, Imprint, Privacy Policy, Français, Lëtzebuergesch). The generic tab "Page Texts" is omitted. Translation: Tab Translation (DeepL) — see DeepL in Cockpit.
  • Event Banner (Homepage): In the dashboard under Website → tab Event Banner can be toggled on or off (large promo band with countdown/CTA). Technically: templateContent['ree-carree'].eventBanner.enabled — false hides it, default is visible.
  • Offers & Deals (Homepage): Filter Shop/Enjoy/Live and Date on Cards in the tab controllable; button View All links by default to /highlights. Clicking on news/offer/event opens a detail modal with the full CMS text (scrollable, no link to news subpages).
  • Opening Hours (Homepage): Section "Your Shopping Time" in the tab Homepage: Opening Hours can be hidden by switch (openingHours.sectionEnabled). The shop times come from the center master data (opening hours in the cockpit); header (badge/title) from the template tab.
  • Footer: Logo marathon above the footer area; content (text, contact, social, opening hours column) in the tab Footer: Content. Header info bar in the tab Header & Navigation.
  • Page Hero: Shops, quarter compass, and contact use Page Content from their respective page tabs (title, subtitle, optional hero image, and description).
  • Highlights: Own subpage /highlights (menu item in the tab Header & Navigation selectable: own page, anchor #aktionen or hide). Cards open the same scrollable detail modal with full text — without button "Learn More" to /aktuelles/....
  • Services: Cockpit services or own cards in the tab Page: Services; title images from CMS coverImage or manually uploaded. On /services, the cards show image, title, short text, and feature badges — no expandable "More Details" (price table/additional list).
  • Center Plan (/centerplan): Settings from the cockpit tab Center Plan (sidebar, overall overview, 2D/3D, legend, map mode). Shop sidebar only with activated option; list from MapLocations of the floor, otherwise fallback from cockpit shops (field floor). Page hero from Website → Page: Quarter Compass.
  • Footer: Logo marathon from active shop logos (optionally linked) instead of text marquee.
  • Colors (Design Tab): Primary color = among others, nav, shopping, ring; Secondary color = light areas (among others, secondary areas; e.g. warm gray #f3f1f0 as in the reference); Accent color = enjoy & events. Live uses a fixed blue in the theme (#006d91, as in the preview) and cannot be selected individually in the cockpit. Background, maps, borders, muted, sidebar follow the reference theme (among others, #fcfcfc, #ffffff, #e3e4e6, #edeef0 / #52555b) and are not represented via the brightness sliders. Shadows (e.g., --shadow-card …) are neutral (slate/gray), not tinted to primary colors, appearance as in the preview. Border Radius (reference: 8px / 0.5rem, set in the theme).
  • Subpage Layout: The same main navigation as on the homepage (fixed); the current menu item is highlighted (underline desktop, accent mobile). No separate "Back" line anymore.
  • Shops & Restaurants (/shops): List from the cockpit module Shops (status Active, website visibility). Triad Shop/Enjoy/Live: in cockpit under Content → Shops (individual shop) or Branches (Shop Location) in the field “Ree Carrée – Area” (metadata.reeCarreeCategory); empty = automatically from the shop category (as before). Optionally own cards in the tab Page: Shops (override the CMS list). Display ID in shop → link Quarter Compass (shop=). Modal: Link to the shop detail page if slug is set. Without CMS shops: Note text (no demo data in production).

Versioning of this Catalog​

This feature catalog belongs to the documentation version. A new version is created upon documentation release; the catalog then corresponds to the status of described Center Website features at that time. See Versioning.

Last updated the catalog: see version dropdown in the navigation (top).

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