MEC Template A ("Red" / Legacy template_a)
The website template mec-template-a is based on the classic MEC homepage (section order and DOM structure like home.tpl / template_a2.css), but is technically maintained as a React/Next.js implementation under apps/center-website/components/templates/mec-template-a.
Global Layout (like header.tpl / #container)
- Fixed white header (logo, opening status, business search as in legacy
#search-row) up to a max width of 1440px, below it a placeholder (#header-placeholder, 96px / mobile 60px). - Hero or page teaser in the area
#header-slider/#slider-wrapper(homepage: slider; subpages: colored bar). - Red main navigation directly under the hero area (desktop ≥960px; mobile flyout under the hamburger). Technically:
MecTemplateAPageChromeon all template A pages. - Content column white, max 1440px, centered – page margin #eae9e7 as in the original.
Homepage: Order of Sections
- Hero slider (if
hero.slidesis set) – details under Hero: freely positioned - Red main navigation (below the slider)
- Shop bar (white stripe with logos, if shops are available)
- Directions quicklink (visible below the shop bar at ~960px width)
- First info row
#home-times– two info boxes (infoboxen0–1) - Offers (optional, up to four tiles) – only if there are offers/highlights in the cockpit; between the info box rows
- Second info row
#home-categories– info boxes 2–3 - Welcome teaser (
#home-welcome-teaser) – title, text, three service icons, link to the service page - Gray welcome section (
#home-welcome/welcomeGray; fallback: outdatedwelcome)
Accent color and footer map use the primary color (primaryColor, default #e20018).
Hero (Homepage)
Template Red uses the classic Flexslider layout on the homepage from template_a2.css (fixed positions, no free % placement):
- Title = always graphic (
titleImage/ API fieldtitelas image URL) – corresponds to<div class="title"><img …></div>in the original. - Subtitle = plain text (
subtitle/description/beschreibung), optionally with<br>. - Motif = image on the right (
motivImage/image/ APImotiv).
In the dashboard tab Hero Slider, the field for Template Red is called Title Graphic (upload), not plain text title.
Layout fields (titleLayout, …) from the Hero editor v2 are not applied on the homepage – subpages can still have their own hero configurations.
Info Boxes (Homepage)
Four boxes in a 2×2 grid (as in template_a/home.tpl):
| Position | DOM-ID | Standard Content |
|---|---|---|
| Top left | #home-times-left | Opening hours |
| Top right | #home-times-right | Our shops |
| Bottom left | #home-categories-left | Gifting made easy |
| Bottom right | #home-categories-right | Enjoying made easy |
Dashboard tab "Info Boxes": for each box title, subtitle (multiline), icon, background image, link. Button Original Standard restores the MEC live fallbacks (Breisgau standard).
Standard assets (icons + background images) are bundled under public/templates/mec-template-a/infobox/ and are pre-filled without upload – markup and CSS correspond to template_a2.css (.info-box, icon with margin-top: 33%, title as <div>, subtitle in <p>).
These four boxes are always visible on the homepage (with fallbacks) – regardless of offers in the cockpit.
Offers on the Homepage (optional, additional)
Separated from the info boxes: Up to four offer boxes (.offers.home) appear only if there are active offers/highlights of the type "offer" in the cockpit. They are located between #home-times and #home-categories – exactly as in the legacy home.tpl.
- No offers in the cockpit → the block will not be rendered; the second info box row connects directly to the first (or to the shop bar if there are no offers in between).
- With offers → four boxes with title, shop logo, image, and price/% from the cockpit data.
Configuration is done not in the "Info Boxes" tab, but through the offers/highlight management in the cockpit.
Welcome Teaser (Homepage)
Below the four info boxes appears the white area #home-welcome-teaser (like home.tpl / template_a2.css):
| Element | Description |
|---|---|
| Title | e.g., "Welcome to Breisgau-Center" |
| Text | Body text (centered, 70% width on desktop) |
| Service 1–3 | Icon + description (optionally with link) |
| Service 4 | More icon links to /service (or configured target); description below (e.g., "more services") |
Dashboard tab "Welcome": Title, text, three services (icon + label, optional link) and fourth entry (icon, label, service link). Empty fields use the MEC Original Standard (Breisgau assets). Without cockpit data, the area will still be rendered with fallbacks – the center name automatically flows into the standard title (Welcome to …).
Gray section below (#home-welcome / welcomeGray): header optionally in the "Welcome" tab; body text from the Center description (master data); image from the title image of the center. Line breaks and HTML from the description are adopted.
Shopping World (/einkaufswelt)
The shop overview in the MEC original is the Shopping World: center plan, sidebar (stores A–Z, categories), shop detail panel. Implementation: _mec-shared/pages/einkaufswelt.tsx (thin wrapper per template).
/shopsredirects to/einkaufsweltpermanently in Template Red (no separate Tailwind shops layout anymore).- Shop detail pages remain under
/shops/{slug}(cockpit routing). - Dashboard tab "Page: Shopping World" stores page content under
pageType: einkaufswelt(title for the page).
- Logo at the top left (
#logo-container), Search + Social-icons at the top right (#search-row), as intemplate_a/header.tpl. - Social links come from
footer.social(Facebook, Twitter, Instagram) or the center's social data; icons like in the MEC original (gray circles).
Hero: Freely Positioned (Dashboard – only Subpages / future)
The tab Hero Slider stores layout fields per slide from the Hero Slider Editor v2. On the Homepage, the display remains in the fixed layout at the top; the free positioning is intended for other contexts.
- With layout data in
titleLayout, …: freely positioned in other templates / future extensions. - On the Template A Homepage, it continues to apply: title graphic + fixed CSS positions.
backgroundImage primarily serves as a background; the motif on the right comes from motivImage / image.
Footer (red map + dark bar)
The footer adheres to the classic MEC look (e.g., Breisgau reference):
- Upper section (
#footer-red-map), only if a map is embedded: Google Maps embed (fallback URL from the contact address of the center, provided street/place is set). Behind the iframe lies the primary color; via CSS filter, the map appears as a red map area. To the left is the teaser (headline, optional subtitle, link to the direction target – configurable viafooterMapTeaser). To the right a white speech bubble with center name and address (only when at least street or ZIP/place is available). Optionally, an overlay image at the footer transition (footerPurchasesImage). On narrow viewports, the bubble is hidden (as in many legacy layouts). - Lower section (
footer.mec-a-site-footer): dark gray block with three columns and light dividing lines – navigation (Standard like legacy: news, offers, …), Legal Information (imprint, data protection, …), optionally seal. Upper right "Back to top": white circle with dark chevron, smooth scrolling to top.
Dashboard (Website Tab)
With the activated template MEC 1 Red, the following tabs are available (see also Navigation and Modules):
| Tab | Content |
|---|---|
| Hero Slider | Slides in templateContent.mec-template-a.hero.slides |
| Info Boxes | Four boxes (infoboxen 0–3), see Info Boxes |
| Welcome | #home-welcome-teaser + gray section #home-welcome – see Welcome Teaser |
| Header & Navigation | among others header.navItems, logoLinksEnabled; social icons in the header from footer.social |
| Rental | Navigation point: external link (default) or /vermietung – see MEC Website Tab |
| Footer | Description, social links, footer navigation (footer.*) |
| Page: Shopping World / News | Hero/SEO for /einkaufswelt (center plan; /shops redirects there) or news |
The red map section in the footer (footerMapEmbedUrl, footerMapTeaser, footerPurchasesImage) is evaluated in the live website, but currently has no own dashboard fields – it can be set through templateContent (API / JSON).
templateContent['mec-template-a'] – Overview
| Key | Meaning |
|---|---|
primaryColor | Accent color (CSS variable --mec-primary) |
hero.slides | Slides: image, motivImage, backgroundImage, backgroundColor, title, titleImage, subtitle, subtitleHtml, link, ctaUrl, ctaLabel, titleColor, subtitleColor; optionally freely positioned with titleLayout, subtitleLayout, motivLayout, ctaLayout (like Hero Slider Editor v2), see Hero: freely positioned |
infoboxen | Four homepage boxes (0–1: #home-times, 2–3: #home-categories); fields: title, subtitle, icon, image, link. Empty values → MEC Original Fallback (Breisgau standard). Box 2 links to /gutschein if einkaufsgutscheineActive is active. |
einkaufsgutscheineActive | If true, the second info box by default points to /gutschein instead of /einkaufswelt |
header.navItems, header.logoLinksEnabled | Navigation; if logoLinksEnabled, shop logos link to the shop detail page |
header.vermietung | Nav “Rental”: externalUrl, useInternalPage, label, enabled |
welcomeTeaser | title, text, services (Array: icon, label, optional href), moreServices (icon, label, href – default /service). Empty values → MEC fallback. |
welcomeGray | Optional title header; text/image only on override. Default: text = Center Description, image = Center Title image |
welcome | Outdated; same fields as welcomeGray |
footer | navItems, social, seal, showParticipationConditions, … |
footerMapEmbedUrl | Optional: iframe URL of the map section; otherwise fallback from contact address |
footerMapTeaser | Optional: title, subtitle, ctaLabel, ctaPath next to the map |
footerPurchasesImage | Optional: image URL in the footer area "Purchases" |
The alternative key mecTemplateA is also read for compatibility reasons.
Technical Reference
- Layout & global styles:
layout.tsx,template-a-home.css - Homepage:
index.tsx - Developer: Feature Catalog (Center website modules), Public API for
templateContent
Nutzungsstatistik: Seitenaufrufe werden anonymisiert erfasst. Im Umami-Dashboard nach diesem Pfad filtern: /en/center-website/mec-template-a