Warenkorb: Positionsliste steht jetzt auch in der Zusammenfassung

Die Zwischensumme-Box zeigte bisher nur die Endsumme, ohne die
einzelnen Artikel aufzulisten. Jetzt steht dort — genau wie beim
Checkout — eine kompakte Rechnungsübersicht (Menge × Artikel →
Zeilenpreis) direkt über der Zwischensumme.

Verifiziert per Puppeteer mit zwei verschiedenen Artikeln im Warenkorb:
Positionsliste zeigt korrekte Mengen/Preise, keine Konsolenfehler.

src/pages/ch/warenkorb/index.astro

@@ -25,6 +25,7 @@ const t = useTranslations(lang);
         <div class="card cart-items" id="cart-items"></div>
         <aside class="card cart-summary">
           <h3>🧾 {t.cart.subtotal}</h3>
+          <div id="summary-items" class="checkout-summary"></div>
           <div class="summary-row"><span>{t.cart.subtotal}</span><span id="sum-subtotal">0,00 €</span></div>
           <div class="summary-row discount-row" id="discount-row" style="display:none;"><span>{t.cart.discount}</span><span id="sum-discount">-0,00 €</span></div>
           <div class="coupon-row">
@@ -84,14 +85,18 @@ import { effektiverZeilenpreis, mengenrabattProzent } from "../../../data/rabatt
     empty.style.display = "none";
     content.style.display = "grid";
 
-    itemsEl.innerHTML = cart.map((i) => {
+    const zeilen = cart.map((i) => {
       const produkt = getProduct(i.slug);
+      const zeilenpreis = produkt ? effektiverZeilenpreis(produkt, i.menge) : i.menge * i.preis;
+      const mengenProzent = produkt ? mengenrabattProzent(produkt, i.menge) : 0;
+      return { item: i, produkt, zeilenpreis, mengenProzent };
+    });
+
+    itemsEl.innerHTML = zeilen.map(({ item: i, produkt, zeilenpreis, mengenProzent }) => {
       const foto = produkt?.bilder?.[0];
       const thumb = foto
         ? `<img class="thumb product-photo" src="${foto}" alt="${i.name}" loading="lazy" />`
         : `<div class="img-placeholder thumb" role="img" aria-label="${i.name}"></div>`;
-      const zeilenpreis = produkt ? effektiverZeilenpreis(produkt, i.menge) : i.menge * i.preis;
-      const mengenProzent = produkt ? mengenrabattProzent(produkt, i.menge) : 0;
       const mengenBadge = mengenProzent > 0 ? `<div class="small mengenrabatt-badge">${mengenrabattTemplate.replace("__P__", mengenProzent)}</div>` : "";
       return `
       <div class="cart-item">
@@ -112,6 +117,12 @@ import { effektiverZeilenpreis, mengenrabattProzent } from "../../../data/rabatt
     `;
     }).join("");
 
+    // Rechnungs-Übersicht in der Zusammenfassung — dieselbe Positionsliste wie im Warenkorb
+    // links, nur kompakt als "Beleg" (Menge × Name → Zeilenpreis), passend zum Checkout.
+    document.getElementById("summary-items").innerHTML = zeilen.map(({ item: i, zeilenpreis }) =>
+      `<div class="row"><span>${i.menge}× ${i.name}</span><span>${formatPrice(zeilenpreis, cartLang)}</span></div>`
+    ).join("");
+
     const subtotal = cartTotal();
     const remaining = Math.max(0, freeShipFrom - subtotal);
     const shipping = berechneVersandkosten(landSelect.value, cart.map((i) => ({ slug: i.slug, preis: i.preis, menge: i.menge })), products);

src/pages/en/warenkorb/index.astro

@@ -25,6 +25,7 @@ const t = useTranslations(lang);
         <div class="card cart-items" id="cart-items"></div>
         <aside class="card cart-summary">
           <h3>🧾 {t.cart.subtotal}</h3>
+          <div id="summary-items" class="checkout-summary"></div>
           <div class="summary-row"><span>{t.cart.subtotal}</span><span id="sum-subtotal">0,00 €</span></div>
           <div class="summary-row discount-row" id="discount-row" style="display:none;"><span>{t.cart.discount}</span><span id="sum-discount">-0,00 €</span></div>
           <div class="coupon-row">
@@ -84,14 +85,18 @@ import { effektiverZeilenpreis, mengenrabattProzent } from "../../../data/rabatt
     empty.style.display = "none";
     content.style.display = "grid";
 
-    itemsEl.innerHTML = cart.map((i) => {
+    const zeilen = cart.map((i) => {
       const produkt = getProduct(i.slug);
+      const zeilenpreis = produkt ? effektiverZeilenpreis(produkt, i.menge) : i.menge * i.preis;
+      const mengenProzent = produkt ? mengenrabattProzent(produkt, i.menge) : 0;
+      return { item: i, produkt, zeilenpreis, mengenProzent };
+    });
+
+    itemsEl.innerHTML = zeilen.map(({ item: i, produkt, zeilenpreis, mengenProzent }) => {
       const foto = produkt?.bilder?.[0];
       const thumb = foto
         ? `<img class="thumb product-photo" src="${foto}" alt="${i.name}" loading="lazy" />`
         : `<div class="img-placeholder thumb" role="img" aria-label="${i.name}"></div>`;
-      const zeilenpreis = produkt ? effektiverZeilenpreis(produkt, i.menge) : i.menge * i.preis;
-      const mengenProzent = produkt ? mengenrabattProzent(produkt, i.menge) : 0;
       const mengenBadge = mengenProzent > 0 ? `<div class="small mengenrabatt-badge">${mengenrabattTemplate.replace("__P__", mengenProzent)}</div>` : "";
       return `
       <div class="cart-item">
@@ -112,6 +117,12 @@ import { effektiverZeilenpreis, mengenrabattProzent } from "../../../data/rabatt
     `;
     }).join("");
 
+    // Rechnungs-Übersicht in der Zusammenfassung — dieselbe Positionsliste wie im Warenkorb
+    // links, nur kompakt als "Beleg" (Menge × Name → Zeilenpreis), passend zum Checkout.
+    document.getElementById("summary-items").innerHTML = zeilen.map(({ item: i, zeilenpreis }) =>
+      `<div class="row"><span>${i.menge}× ${i.name}</span><span>${formatPrice(zeilenpreis, cartLang)}</span></div>`
+    ).join("");
+
     const subtotal = cartTotal();
     const remaining = Math.max(0, freeShipFrom - subtotal);
     const shipping = berechneVersandkosten(landSelect.value, cart.map((i) => ({ slug: i.slug, preis: i.preis, menge: i.menge })), products);

src/pages/fr/warenkorb/index.astro

@@ -25,6 +25,7 @@ const t = useTranslations(lang);
         <div class="card cart-items" id="cart-items"></div>
         <aside class="card cart-summary">
           <h3>🧾 {t.cart.subtotal}</h3>
+          <div id="summary-items" class="checkout-summary"></div>
           <div class="summary-row"><span>{t.cart.subtotal}</span><span id="sum-subtotal">0,00 €</span></div>
           <div class="summary-row discount-row" id="discount-row" style="display:none;"><span>{t.cart.discount}</span><span id="sum-discount">-0,00 €</span></div>
           <div class="coupon-row">
@@ -84,14 +85,18 @@ import { effektiverZeilenpreis, mengenrabattProzent } from "../../../data/rabatt
     empty.style.display = "none";
     content.style.display = "grid";
 
-    itemsEl.innerHTML = cart.map((i) => {
+    const zeilen = cart.map((i) => {
       const produkt = getProduct(i.slug);
+      const zeilenpreis = produkt ? effektiverZeilenpreis(produkt, i.menge) : i.menge * i.preis;
+      const mengenProzent = produkt ? mengenrabattProzent(produkt, i.menge) : 0;
+      return { item: i, produkt, zeilenpreis, mengenProzent };
+    });
+
+    itemsEl.innerHTML = zeilen.map(({ item: i, produkt, zeilenpreis, mengenProzent }) => {
       const foto = produkt?.bilder?.[0];
       const thumb = foto
         ? `<img class="thumb product-photo" src="${foto}" alt="${i.name}" loading="lazy" />`
         : `<div class="img-placeholder thumb" role="img" aria-label="${i.name}"></div>`;
-      const zeilenpreis = produkt ? effektiverZeilenpreis(produkt, i.menge) : i.menge * i.preis;
-      const mengenProzent = produkt ? mengenrabattProzent(produkt, i.menge) : 0;
       const mengenBadge = mengenProzent > 0 ? `<div class="small mengenrabatt-badge">${mengenrabattTemplate.replace("__P__", mengenProzent)}</div>` : "";
       return `
       <div class="cart-item">
@@ -112,6 +117,12 @@ import { effektiverZeilenpreis, mengenrabattProzent } from "../../../data/rabatt
     `;
     }).join("");
 
+    // Rechnungs-Übersicht in der Zusammenfassung — dieselbe Positionsliste wie im Warenkorb
+    // links, nur kompakt als "Beleg" (Menge × Name → Zeilenpreis), passend zum Checkout.
+    document.getElementById("summary-items").innerHTML = zeilen.map(({ item: i, zeilenpreis }) =>
+      `<div class="row"><span>${i.menge}× ${i.name}</span><span>${formatPrice(zeilenpreis, cartLang)}</span></div>`
+    ).join("");
+
     const subtotal = cartTotal();
     const remaining = Math.max(0, freeShipFrom - subtotal);
     const shipping = berechneVersandkosten(landSelect.value, cart.map((i) => ({ slug: i.slug, preis: i.preis, menge: i.menge })), products);

src/pages/warenkorb/index.astro

@@ -25,6 +25,7 @@ const t = useTranslations(lang);
         <div class="card cart-items" id="cart-items"></div>
         <aside class="card cart-summary">
           <h3>🧾 {t.cart.subtotal}</h3>
+          <div id="summary-items" class="checkout-summary"></div>
           <div class="summary-row"><span>{t.cart.subtotal}</span><span id="sum-subtotal">0,00 €</span></div>
           <div class="summary-row discount-row" id="discount-row" style="display:none;"><span>{t.cart.discount}</span><span id="sum-discount">-0,00 €</span></div>
           <div class="coupon-row">
@@ -84,14 +85,18 @@ import { effektiverZeilenpreis, mengenrabattProzent } from "../../data/rabatt";
     empty.style.display = "none";
     content.style.display = "grid";
 
-    itemsEl.innerHTML = cart.map((i) => {
+    const zeilen = cart.map((i) => {
       const produkt = getProduct(i.slug);
+      const zeilenpreis = produkt ? effektiverZeilenpreis(produkt, i.menge) : i.menge * i.preis;
+      const mengenProzent = produkt ? mengenrabattProzent(produkt, i.menge) : 0;
+      return { item: i, produkt, zeilenpreis, mengenProzent };
+    });
+
+    itemsEl.innerHTML = zeilen.map(({ item: i, produkt, zeilenpreis, mengenProzent }) => {
       const foto = produkt?.bilder?.[0];
       const thumb = foto
         ? `<img class="thumb product-photo" src="${foto}" alt="${i.name}" loading="lazy" />`
         : `<div class="img-placeholder thumb" role="img" aria-label="${i.name}"></div>`;
-      const zeilenpreis = produkt ? effektiverZeilenpreis(produkt, i.menge) : i.menge * i.preis;
-      const mengenProzent = produkt ? mengenrabattProzent(produkt, i.menge) : 0;
       const mengenBadge = mengenProzent > 0 ? `<div class="small mengenrabatt-badge">${mengenrabattTemplate.replace("__P__", mengenProzent)}</div>` : "";
       return `
       <div class="cart-item">
@@ -112,6 +117,12 @@ import { effektiverZeilenpreis, mengenrabattProzent } from "../../data/rabatt";
     `;
     }).join("");
 
+    // Rechnungs-Übersicht in der Zusammenfassung — dieselbe Positionsliste wie im Warenkorb
+    // links, nur kompakt als "Beleg" (Menge × Name → Zeilenpreis), passend zum Checkout.
+    document.getElementById("summary-items").innerHTML = zeilen.map(({ item: i, zeilenpreis }) =>
+      `<div class="row"><span>${i.menge}× ${i.name}</span><span>${formatPrice(zeilenpreis, cartLang)}</span></div>`
+    ).join("");
+
     const subtotal = cartTotal();
     const remaining = Math.max(0, freeShipFrom - subtotal);
     const shipping = berechneVersandkosten(landSelect.value, cart.map((i) => ({ slug: i.slug, preis: i.preis, menge: i.menge })), products);

src/styles/global.css

@@ -1164,6 +1164,9 @@ a:focus-visible, button:focus-visible {
 .pay-option input[type="radio"]:checked { border-color: var(--brand-color, var(--c-accent)); }
 
 .checkout-summary .row { display: flex; justify-content: space-between; font-size: 0.9rem; padding: 0.35rem 0; color: var(--c-text-muted); }
+/* Rechnungs-Positionsliste in der Warenkorb-Zusammenfassung — dieselbe Klasse wie im Checkout,
+   nur mit etwas Abstand zur folgenden Zwischensumme. */
+.cart-summary #summary-items { margin-bottom: 0.6rem; padding-bottom: 0.4rem; border-bottom: 1px dashed rgba(244, 241, 247, 0.14); }
 
 /* "Gesamt"-Zeile wie ein Kassenbon-Abriss: gestrichelte Trennlinie + Summe in Marken-Verlauf,
    damit der Endbetrag klar heraussticht statt einfach nur fett zu sein. */