diff options
| author | Roger Rehnelt <noreply@maennchen1.de> | 2026-10-02 15:36:13 +0200 |
|---|---|---|
| committer | Roger Rehnelt <noreply@maennchen1.de> | 2026-10-02 15:36:13 +0200 |
| commit | 4c322420f5630313157839416bc7ae7235cbbf00 (patch) | |
| tree | 3be2ba0bab5f82d035acf42a60a340125a3b6816 | |
| parent | 7c694d8499f58080992aadfc6b297b46ee98fe4f (diff) | |
Kasse: Schrittleiste als nummerierte Liste im Modus „neu“
Der aktuelle Schritt trägt aria-current, nur erledigte Schritte sind verlinkt (Punkt 8.9).
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
| -rw-r--r-- | views/css/wpsg-theme.css | 10 | ||||
| -rw-r--r-- | views/warenkorb/progress.phtml | 25 |
2 files changed, 35 insertions, 0 deletions
diff --git a/views/css/wpsg-theme.css b/views/css/wpsg-theme.css index 5b732d0..ff18c1c 100644 --- a/views/css/wpsg-theme.css +++ b/views/css/wpsg-theme.css @@ -249,6 +249,16 @@ .wpsg_progress :where(span.current > .dot), .wpsg_progress :where(span.done > .dot) { background-color:var(--wpsg-color-background); } .wpsg_progress :where(span.current)::after, .wpsg_progress :where(span.done)::after { content:" "; display:block; position:absolute; top:0; width:100%; height:10px; background-color:var(--wpsg-color-accent); opacity:0.5; } .wpsg_progress :where(span.current)::after { width:50%; } +/* Schrittleiste im Modus „neu“ (Punkt 8.9): vier gleiche Felder, Linie oben, erledigt und aktuell in der Akzentfarbe */ +.wpsg-steps { margin:0 0 2em; } +.wpsg-steps__list { display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:0.5em; margin:0; padding:0; list-style:none; font-size:var(--wpsg-font-size-small); } +.wpsg-steps__step { margin:0; padding-top:0.6em; border-top:4px solid var(--wpsg-color-line); overflow-wrap:break-word; hyphens:auto; } +.wpsg-steps__step:not(.is-done):not(.is-current) { opacity:var(--wpsg-muted-opacity); } +.wpsg-steps__step:where(.is-done, .is-current) { border-top-color:var(--wpsg-color-accent); } +.wpsg-steps__step.is-current { font-weight:700; } +.wpsg-steps__step a { color:inherit; } +.wpsg-steps__number { margin-right:0.35em; } +.wpsg-steps__number::after { content:"."; } /* Kundenkonto */ .wpsg_profil :where(.wpsg_pwdvergessen_link) { line-height:30px; } diff --git a/views/warenkorb/progress.phtml b/views/warenkorb/progress.phtml index 92128d9..2a94a55 100644 --- a/views/warenkorb/progress.phtml +++ b/views/warenkorb/progress.phtml @@ -6,6 +6,31 @@ */
?>
+<?php if (\wpsg\ThemeStyle::isThemeMode()) {
+
+ // Modus „neu“: nummerierte Liste, der aktuelle Schritt mit aria-current (Punkt 8.9)
+ $arSteps = [
+ 1 => [__('Warenkorb', 'wpsg'), $this->getUrl(wpsg_ShopController::URL_BASKET)],
+ 2 => [__('Kundendaten', 'wpsg'), $this->getURL(wpsg_ShopController::URL_CHECKOUT)],
+ 3 => [__('Versand/Zahlung', 'wpsg'), $this->getURL(wpsg_ShopController::URL_CHECKOUT2)],
+ 4 => [__('Abschluss', 'wpsg'), $this->getURL(wpsg_ShopController::URL_OVERVIEW)]
+ ];
+ $current = intval($GLOBALS['step']);
+
+?>
+<nav class="wpsg-steps" aria-label="<?php echo esc_attr__('Schritte der Bestellung', 'wpsg'); ?>">
+ <ol class="wpsg-steps__list">
+ <?php foreach ($arSteps as $nr => $arStep) { $class = (($nr === $current)?'is-current':(($nr < $current)?'is-done':'')); ?>
+ <li class="wpsg-steps__step <?php echo esc_attr($class); ?>"<?php echo (($nr === $current)?' aria-current="step"':''); ?>>
+ <?php if ($nr < $current) { ?><a href="<?php echo esc_url($arStep[1]); ?>"><?php } ?>
+ <span class="wpsg-steps__number"><?php echo esc_html((string)$nr); ?></span>
+ <span class="wpsg-steps__label"><?php echo str_replace('/', '/<wbr>', esc_html($arStep[0])); ?></span>
+ <?php if ($nr < $current) { ?></a><?php } ?>
+ </li>
+ <?php } ?>
+ </ol>
+</nav>
+<?php return; } ?>
<div class="wpsg_progress">
|