DogFatherGit/vans-diy-bastelbedarf
1
0
Fork 0
Code Issues Pull Requests Actions 3 Packages Projects Releases Wiki Activity

Warenkorb & Checkout optisch deutlich hochwertiger: echte Produktfotos im Warenkorb, elegante Pillen-Mengensteuerung, Zahlungsart jetzt als auswählbare Karten mit Icons und Leucht-Rand statt Standard-Radiobuttons

Browse Source
This commit is contained in:
qcigano
2026-08-02 18:14:34 +02:00
parent 094edaaf39
commit a7f4355cda
9 changed files with 258 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/en/warenkorb/index.astro
+18 -10
View File
@@ -24,10 +24,10 @@ const t = useTranslations(lang);
<div id="cart-content" class="cart-layout" style="display:none;">
<div class="card cart-items" id="cart-items"></div>
<aside class="card cart-summary">
<h3>{t.cart.subtotal}</h3>
<h3>🧾 {t.cart.subtotal}</h3>
<div class="summary-row"><span>{t.cart.subtotal}</span><span id="sum-subtotal">0,00 €</span></div>
<div class="summary-row"><span>{t.cart.shipping}</span><span id="sum-shipping">{t.cart.shippingCalculated}</span></div>
<p class="small" id="shipping-hint"></p>
<p class="free-shipping-badge" id="shipping-hint"></p>
<hr class="divider" />
<div class="summary-row total"><span>{t.cart.total}</span><span id="sum-total">0,00 €</span></div>
<p class="small">{t.common.vatNote}</p>
@@ -45,6 +45,7 @@ const t = useTranslations(lang);
<script type="module">
import { getCart, updateQuantity, removeFromCart, cartTotal } from "../../../scripts/cart";
import { formatPrice } from "../../../i18n/format";
import { getProduct } from "../../../data/products";
const { freeShipFrom, removeLabel, perItemLabel, remainingTemplate, freeShippingText, cartLang } = window.__cartVars;
@@ -62,29 +63,36 @@ const t = useTranslations(lang);
empty.style.display = "none";
content.style.display = "grid";
itemsEl.innerHTML = cart.map((i) => `
itemsEl.innerHTML = cart.map((i) => {
const produkt = getProduct(i.slug);
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>`;
return `
<div class="cart-item">
<div class="img-placeholder thumb"></div>
${thumb}
<div class="info">
<strong>${i.name}</strong>
<div class="small">${formatPrice(i.preis, cartLang)} ${perItemLabel}</div>
</div>
<div class="qty-controls">
<button data-action="dec" data-slug="${i.slug}">−</button>
<button data-action="dec" data-slug="${i.slug}" aria-label="−">−</button>
<span>${i.menge}</span>
<button data-action="inc" data-slug="${i.slug}">+</button>
<button data-action="inc" data-slug="${i.slug}" aria-label="+">+</button>
</div>
<div><strong>${formatPrice(i.preis * i.menge, cartLang)}</strong></div>
<a href="#" class="remove" data-action="remove" data-slug="${i.slug}">${removeLabel}</a>
<div class="line-total">${formatPrice(i.preis * i.menge, cartLang)}</div>
<a href="#" class="remove" data-action="remove" data-slug="${i.slug}">✕ ${removeLabel}</a>
</div>
`).join("");
`;
}).join("");
const subtotal = cartTotal();
const remaining = Math.max(0, freeShipFrom - subtotal);
document.getElementById("sum-subtotal").textContent = formatPrice(subtotal, cartLang);
document.getElementById("sum-total").textContent = formatPrice(subtotal, cartLang);
document.getElementById("shipping-hint").textContent =
remaining > 0 ? remainingTemplate.replace("__V__", formatPrice(remaining, cartLang)) : freeShippingText;
remaining > 0 ? remainingTemplate.replace("__V__", formatPrice(remaining, cartLang)) : `🩵 ${freeShippingText}`;
itemsEl.querySelectorAll("button, a.remove").forEach((el) => {
el.addEventListener("click", (e) => {