Skip to main content

MEC-Import (Legacy Mall-Cockpit)

Pfad im Dashboard: /dashboard/integration/mec-import.

Vorschau (Schritt 2)​

Die Vorschau-API (GET /api/import/mec?sourceCenterId=…) liefert pro Bereich Stichproben, ein Feldmapping (MEC → Datenbank / themeOverrides.templateContent[<websiteTemplate>]) und eine Website-Konfigurations-Vorschau (Hero-Slides, Farbe, Footer, Navigation, Anfahrt).

Anfahrt / Verkehrsmittel: Aus /informationen → anfahrt.<locale>.verkehrsmittel[] (Repeater mit verschachteltem textblock[]) werden Titel, Icon-URL und Textblöcke nach templateContent[<websiteTemplate>].anfahrt.verkehrsmittel[] importiert. ShopBox erhält zusätzlich flache anfahrt.blocks[] (heading/body). Koordinaten (lat/lng) landen in den Center-Stammdaten (aus adresse oder anfahrt.adresse). Im Dashboard bearbeiten: Reiter Anfahrt (alle MEC-Templates). Anfahrt ist Teil der Checkbox Website-Konfiguration (templateContent); im Import-Ergebnis erscheint die Anzahl importierter Verkehrsmittel-Blöcke, sofern die MEC-API Daten liefert.

Merge beim Re-Import: Hero und Navigation: bestehende Dashboard-Werte gewinnen (manuelle Anpassungen bleiben). Anfahrt und Einkaufen-im-Center-Texte (Footer/welcomeGray): MEC-Daten überschreiben lokale Inhalte, sofern die API Text liefert. Center-Stammdaten ShoppingCenter.description: wird aus dem gleichen Textblock befüllt/aktualisiert (Plaintext).

Import-Ergebnis (Schritt 3): Neben Shops/News zeigt die Zusammenfassung auch Website-Konfiguration (Hero, Navigation, Footer, Primärfarbe), Anfahrt (Verkehrsmittel-Blöcke) und Center-Metadaten – auch wenn alle Datensätze „bereits vorhanden“ sind (+0 neu).

UI (Dashboard): Schritt 2 nutzt auf breiten Bildschirmen ein Zwei-Spalten-Layout (links Import-Optionen und Aktionen, rechts Vorschau & Mapping). Die Detail-Vorschau (Shops, News, Services, Jobs, Website) ist in Reiter (Tabs) gegliedert, damit du weniger scrollen musst. Die Seite nutzt die volle Arbeitsbreite bis ca. 1600px; für lange Centerlisten gibt es Suchfelder in Schritt 1.

Shops: Öffnungszeiten (oeffnungszeit / oeffnungszeiten)​

  • Strukturiert (bevorzugt): oeffnungszeiten.grundzeiten[].liste[] mit tage[], von, bis → Shop.openingHours.regularHours (Mo–So, mehrere Slots pro Tag möglich). oeffnungszeiten.sonderzeiten[] → Shop.openingHours.specialDays (Datum, Label, Von/Bis).
  • Fallback: lang.<locale>.oeffnungszeit (oft HTML mit <br />) → Shop.openingHours.announcement (Klartext), nur wenn keine Grundzeiten vorhanden sind.
  • Die Öffnungszeiten-Seite (MEC #times-main / Shop-Balken) benötigt die strukturierten regularHours; reiner Freitext reicht dort nicht für die Wochentags-Balken.

Center: Öffnungszeiten​

  • Numerisch: center_einstellungen.oeffnungszeiten (mo_von/mo_bis … so_von/so_bis) → ShoppingCenter.openingHours.regularHours (beim Import mit Website-Konfiguration / Center-Metadaten).

  • Lang-Repeater: center_einstellungen.lang.de.oeffnungszeiten[] (titel, zeit) → ShoppingCenter.openingHours.announcement, wenn keine numerischen Zeiten gesetzt sind.

  • Bearbeiten im Cockpit: Center → Bearbeiten → Reiter „Öffnungszeiten“ (nicht Webseiten-Tab).

  • Legacy in der DB: Ältere Importe oder manuelle Einträge mit {"custom":"…"} oder reinem Freitext werden von formatOpeningHours und der Öffnungszeiten-Seite weiterhin angezeigt; HTML wird bei der Ausgabe bereinigt.

Neues Center: Organisation​

  • Beim Anlegen eines neuen Ziel-Centers im Import-Assistenten kann eine CockpitOS-Organisation zugewiesen werden (Auswahl, sofern dein Account mehrere Organisationen sieht; mit genau einer Organisation wird sie automatisch gesetzt und angezeigt).
  • POST /api/import/mec akzeptiert optional newCenter.organizationId (UUID). Super-Admins dürfen eine beliebige existierende Organisation setzen oder weglassen (keine Zuordnung). Andere Nutzer: nur die eigene Organisation; ohne abweichende Angabe wird die Organisation des Benutzerkontos verwendet, sofern vorhanden.
  • Der Import-POST erfordert eine angemeldete Session (401 ohne Login).

Mehrsprachigkeit (MEC lang.de / lang.en / …)​

  • Hauptfelder (name, title, description, …): werden aus der Primärsprache befüllt – Reihenfolge: de, en, fr, nl, pl, it, es, da, sv, cs, sonst erste alphabetisch verfügbare Locale mit gesetztem titel.
  • Alle Sprachen der API werden zusätzlich in metadata.mecLang (Shops, News, Services, Jobs) bzw. metadata.mecPrimaryLocale gespeichert.
  • Hero-Slides: sichtbare Titel/Texte aus der priorisierten Slide-Locale; bei mehreren Sprachen mecLang pro Slide. Pro Slide getrennt: hintergrundbild → imageUrl, lang.*.motiv → motivImage, hintergrundfarbe → backgroundColor (Template D). Footer / „Einkaufen im Center“: einkaufen_im_center.* → footer / welcomeGray / ShoppingCenter.description. Kontakt-Externlinks: links / links_en → kontakt.externalLinks. Centermanagement: centermanagement.liste[] → CenterContact (createdBy: mec-import) + kontakt.secretariat. Infokasten: → infoTiles[]. Vermietung: → templateContent.vermietung + header.vermietung. PageContent: Gutschein, Impressionen, Impressum/Datenschutz/AGB (Freitext). Willkommen (Template A): willkommen.* → welcomeTeaser (+ einkaufsgutscheineActive aus allgeinstellungen_gutschein). Hotspot: /hotspot → templateContent.hotspot (nicht ShopBox); Formular → POST /api/[slug]/hotspot/grant (Meraki). Online-Logik wie Legacy isOnline(): hotspot.active + Center-Öffnungszeiten (Europe/Berlin), Fenster optional erweitert durch Shop „real“. Dashboard: Reiter Hotspot / WLAN. Weihnachten: weihnachten_im_center.* → templateContent.weihnachten → Route /weihnachten/[detail].

Die öffentliche mec-template-d-Website (apps/center-website/components/templates/mec-template-d):

  • Seitenraster: wie template_d_master.css / header.tpl – außen volle Breite mit Hintergrund #eae9e7, innen #container max. 1440px zentriert (grauer Streifen links/rechts auf großen Viewports); ab ≤480px ist der Container-Hintergrund weiß wie im Original. Header/Navigation bleiben auf 1440px begrenzt und mittig.
  • Footer: wie footer.tpl / template_d_master.css: footer.mec-d-footer mit div.main als Tabelle (display: table), Spalten #footer-row-1 (Navigation, 320px, Links 16px #808080, Hover weiß), #footer-row-2 (Titel uppercase / font-weight 500, Text #808080, 18px / 24px Zeile), #footer-row-3 (270px, Center-Logo .grayscale, darunter p mit „Empfehlen Sie uns:“ und a.search-row-icon ca. 40×40). Desktop: Höhe 250px, padding 55px 0 205px, Hintergrund #e5e5e5; ≤960px gestapelte Blöcke (footer.tsx + globals.css).
  • Schriften (DSGVO): Kein Google Fonts / Typekit auf der öffentlichen Site. Futura PT … selbst gehostet … FuturaPT-Medium ist zusätzlich als CSS-Gewicht 400 eingebunden, damit .content-cms p (Master: später 18px / 24px, bei Typekit font-weight 100) auf der React-Site nicht dünner wirkt als das Live-MEC mit selbst gehostetem Light.
  • Desktop-Navigation: Optik wie der effektive Zustand im Live-Template (Zusammenführung von template_d_master.css und template_d/style.css), technisch eine klare Regel in app/globals.css (.mec-d-nav-link / .mec-d-nav-dropdown-link) – ohne die Legacy-!important-Überlagerungen nachzubauen. Arbeitsablauf für weitere Blöcke: Template-D Legacy-CSS-Checkliste.
  • Zeigt einen Sprachumschalter, sobald das Slice mehr als eine Locale trägt (footer.mecFooterByLocale, Hero-mecLang, optional kontakt.externalLinksByLocale).
  • URL: ?lang=en (und SessionStorage pro Center-Slug mec-template-d-lang:<slug>).
  • Footer-Beschreibung und Hero-Texte werden aus den importierten mehrsprachigen Feldern gewählt; Header-Navigation bleibt im Dashboard konfigurierbar (fest codiert im Original-MEC, nicht aus links importiert). Die feste Footer-Linkliste bleibt deutsch (kann später angebunden werden).
  • Startseite – Kachel „Aktuelle Angebote“: entspricht home.tpl / .home-infobox-angebote in template_d_master.css: weiße Fläche, Überschrift visuell wie Live (Zusammenführung Master + template_d/style.css: Futura, uppercase, 30px, top 39px usw. in app/globals.css unter [data-template="mec-template-d"] .home-infobox-angebote-title, inkl. Breakpoints; Link „Zum Angebot“ mit bottom 65px aus style.css). Linkes Shop + kurzer Titel (30 Zeichen), rechts Bild, unten rechts grüner Kreis #A4C556 mit % und „Angebot“, wenn keine Preisfelder gesetzt sind (wie MEC-offer-green); sonst roter Kreis #EF4741 mit Preis/Euro. Inhalt der Kachel (Kreis, Text, Bild, Slider-Punkte) über eine Regel in globals.css; React nutzt u. a. mec-d-angebot-val / -caption / -old-price, ul.mec-d-angebote-dots mit li.is-active. Punkte unten #E5E5E5 / aktiv #808080, Autoplay 5s (wie Slick in template_green.js für diese Klasse). Datenquelle: highlights vom Center (type: 'offer'), inkl. shop aus der Angebots-Verknüpfung.
  • Drei große Infokacheln (Öffnungszeiten / Shopping / News, InfoBox3): wie home.tpl mit home-infobox-3 plus home-infobox-oeffnungszeiten / -shopping / -news. Titel (.box-title): Futura, 30px, bold, uppercase, linksbündig; Untertitel 18px, regular. Illustrationen: forInfobox3 / .mec-d-infobox3-svg.
  • Hero-Slider: Auf der Startseite sliderLayout="template-d": Abschnitt .home-slider mit festen Höhen pro Breakpoint (380 / 645 / 680 px Höhe für Mobil ab <768 px, Tablet 768–1023 px, Desktop ab 1024 px); Badge wie teaser.css (.home-slider-badge); Punkte wie template_d/style.css (zentriert, ≤1024px links vertikal mit flexibler Höhe, ≤767px kleinere Kreise); keine seitlichen Pfeile. Titel/Beschreibung: responsive Schrift über CSS; optional lineWidth (narrow / standard / wide / full, letztere nahezu volle Textbreite inkl. Rand) pro Titel und v3-Beschreibung; optional fontSizePx (Legacy-Desktop, gleichwertig zu fontSizePxByDevice.desktop) und/oder fontSizePxByDevice mit desktop / tablet / mobile zum Überschreiben der Stufe size pro Breakpoint. Erlaubtes HTML in Titel, Beschreibung, Badge und Legacy-Untertitel (z. B. <br>, <strong>, <a>, Absätze) wird auf der Website und in der Dashboard-Vorschau gerendert (nach denselben Regeln wie bei Shop-Texten bereinigt). Mehrzeilige Titel: Zeilenumbruch, <br> oder <p>...</p><p>...</p> im CMS. Im Dashboard (Website → Hero-Slider für Template D): Vorschau mit Breakpoint-Umschaltung. Reiter Titel / Untertitel: Schieberegler für Schrift in px jeweils für die aktive Vorschau-Ansicht (werden in fontSizePxByDevice gespeichert); Reiter Feinjustierung: max. Textbreite, Pixel-Verschiebung — gespeichert unter hero.slides[].titleAdjust / subtitleAdjust / motivAdjust.
  • Untere vier Infokacheln (Lottie): Klassen home-infobox-4 + Varianten; Lottie-IDs #anfahrt-animation u. a. Titel zweizeilig wie Live: erste Zeile klein/regular, zweite groß/fett (Aufteilung: erstes Wort / Rest, oder Zeilenumbruch \n im Dashboard-Titel); Untertitel klein, normale Groß-/Kleinschreibung. CSS: mec-d-infobox4-line1 / line2 / sub in globals.css.
  • Shop-Logo-Leiste über dem Footer (wie Live-Template-D / template_grooss.js Slick): Standard aktiv, Shop-Logos aus layoutData.shops, sofern keine abweichende templateContent['mec-template-d'].footer.logoSlider-Konfiguration. Abstellbar mit logoSlider.enabled: false oder manuelle logoSlider.logos-Liste. Optional: logoSlider.logoLinksEnabled: true → Klick auf Shop-Detail. Technisch Embla mit gleichen Parametern wie Slick: 6 / 3 / 2 sichtbare Logos (Desktop / ≤960px / ≤480px), Autoplay 2 s, ein Logo pro Schritt, Loop; Höhe 145px, weißer Hintergrund, horizontales Padding 75px (15px mobil), Logos max. 120×120px, Graustufen mit Hover-Farbe (globals.css + footer.tsx).
  • Anfahrt-Seite: #map-router zeigt die eingebettete Karte ohne bedienbare Google-Steuerelemente und ohne Verschieben der Karte (Embed mit pointer-events: none, untere Embed-Leiste optisch beschnitten). Wegweiser-Marker und Link Route planen bleiben aktiv (pages/anfahrt.tsx, globals.css).
  • Unterseiten-Header (subpageHeaders unter templateContent['mec-template-d']): Bannerhöhe 360px (Desktop), SVG rechts in voller Bannerhöhe, Inhalt vertikal zentriert; .title – Futura, weiß, uppercase, 70px, translateY(-50%) + rotate(-10deg) mit transform-origin: left center; erste Zeile font-weight: 800, Folge 300. ≤480px ohne SVG. Desktop-Nav: Suche im Flex neben den Links ( #navigation-wrapper), Eingabebreite clamp, kein Überlappen. Ohne Dashboard-Eintrag liefern statische Legacy-Defaults (Farben/Texte/SVG-URLs wie im Original-MEC) aus mec-d-subpage-header-defaults.ts; gesetzte CMS-Felder überschreiben pro Property. components/subpage-header.tsx, components/header.tsx.
  • Shops/News aus dem CMS nutzen weiter die Hauptfelder der DB; dortige Übersetzungen liegen in metadata.mecLang und werden von der Template-D-Ansicht noch nicht für Listen/Detailseiten ausgelesen. Geschäfte A–Z: ul.shop-list wird in app/globals.css wie template_d_master.css gesetzt (Buchstaben 32px #808080, Links 18px #EF4741). Service-Seite (/service): wie Live nur Icon + .titel (.service > .icon > img height 65 + .titel); Kacheln 24% / Float, 250px hoch (200px ≤960px), .titel #808080, font-weight: normal, 14px ≤960px; ≤480px Kachel 100% / height: auto (pages/service.tsx + globals.css).

Medien​

Wenn Bunny Storage für das Center konfiguriert ist (BUNNY_STORAGE_*), werden MEC-Bild-URLs beim Import wie ein manueller Dashboard-Upload verarbeitet: Download von der MEC-URL, Upload in den Bunny-Bucket, Anlage eines MediaFile-Eintrags (Scope Center, uploadedBy: 'mec-import') und Verknüpfung mit der jeweiligen Entität.

  • Shops: bild_datei_1 → Logo (logo), bild_datei_2/bild_datei_3 sowie URLs aus galerie → images (Galerie).
  • News: bild_datei_1 → Hauptbild (image), bild_datei_4 → erstes Galeriebild (gallery[0]), falls gesetzt.
  • Services: bild_datei_1 → Icon (icon).
  • Hero (Website-Konfiguration): Nach dem Aufbau der Slides aus der MEC-API werden Hintergrundbild, Motiv und Titel-Grafik (falls HTTP-URL) nacheinander nach Bunny geladen; hero.slides[].imageUrl, motivImage und titleImage enthalten anschließend die Bunny-CDN-URLs.
  • Willkommen / Hotspot / Weihnachten: Service-Icons (willkommen.featured_services), Hotspot-Bilder (person_image, slogan_image_*, …) und Weihnachten-Sponsoren-Logos werden ebenfalls nach Bunny geladen, sofern Storage konfiguriert ist.

News-Texte (Center-Aktionen): In der API steckt der sichtbare HTML-Text häufig nur in kurzbeschreibung, während beschreibung leer ist. Der Import füllt content mit beschreibung oder sonst kurzbeschreibung. excerpt: wenn beide Textfelder gesetzt sind, wird kurzbeschreibung als Auszug genutzt; wenn nur kurzbeschreibung existiert, untertitel als Teaser (falls vorhanden).

Ohne gültige Bunny-Konfiguration bleiben Shop/News/Service-Medien leer bzw. unverändert; Hero-Slides können weiterhin nur mit externen URLs auskommen, bis Storage verfügbar ist.

Siehe auch​

Nutzungsstatistik: Seitenaufrufe werden anonymisiert erfasst. Im Umami-Dashboard nach diesem Pfad filtern: /en/developer-guide/mec-import