Initial commit: Van's DIY & Bastelbedarf Astro shop

2026-08-02 13:22:55 +02:00
commit 2e340f7a8a
92 changed files with 11022 additions and 0 deletions
@@ -0,0 +1,101 @@
+---
+import Layout from "../../../layouts/Layout.astro";
+import type { Locale } from "../../../i18n/config";
+import { useTranslations } from "../../../i18n/ui";
+
+const lang: Locale = "en";
+const t = useTranslations(lang);
+---
+<Layout title="Cart" description="Your cart at Van's DIY & Bastelbedarf." lang={lang} path="/warenkorb/">
+  <section class="section-tight">
+    <div class="container">
+      <span class="eyebrow">{t.cart.eyebrow}</span>
+      <h1>{t.cart.title}</h1>
+    </div>
+  </section>
+
+  <section class="section-tight">
+    <div class="container">
+      <div id="cart-empty" class="card" style="display:none;">
+        <p>{t.cart.empty}</p>
+        <a class="btn btn-primary" href="/en/shop/">{t.common.browseShop}</a>
+      </div>
+
+      <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>
+          <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>
+          <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>
+          <a class="btn btn-primary btn-block" href="/en/checkout/">{t.cart.toCheckout}</a>
+        </aside>
+      </div>
+    </div>
+  </section>
+</Layout>
+
+<script define:vars={{ freeShipFrom: 75, removeLabel: t.cart.remove, perItemLabel: t.cart.perItem, remainingTemplate: t.cart.remaining("__V__"), freeShippingText: t.cart.freeShipping, cartLang: lang }}>
+  import { getCart, updateQuantity, removeFromCart, cartTotal } from "../../../scripts/cart";
+  import { formatPrice } from "../../../i18n/format";
+
+  function render() {
+    const cart = getCart();
+    const empty = document.getElementById("cart-empty");
+    const content = document.getElementById("cart-content");
+    const itemsEl = document.getElementById("cart-items");
+
+    if (cart.length === 0) {
+      empty.style.display = "block";
+      content.style.display = "none";
+      return;
+    }
+    empty.style.display = "none";
+    content.style.display = "grid";
+
+    itemsEl.innerHTML = cart.map((i) => `
+      <div class="cart-item">
+        <div class="img-placeholder thumb"></div>
+        <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>
+          <span>${i.menge}</span>
+          <button data-action="inc" data-slug="${i.slug}">+</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>
+    `).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;
+
+    itemsEl.querySelectorAll("button, a.remove").forEach((el) => {
+      el.addEventListener("click", (e) => {
+        e.preventDefault();
+        const target = e.currentTarget;
+        const slug = target.dataset.slug;
+        const action = target.dataset.action;
+        const item = getCart().find((i) => i.slug === slug);
+        if (!item) return;
+        if (action === "inc") updateQuantity(slug, item.menge + 1);
+        if (action === "dec") updateQuantity(slug, item.menge - 1);
+        if (action === "remove") removeFromCart(slug);
+        render();
+      });
+    });
+  }
+
+  render();
+  window.addEventListener("cart:changed", render);
+</script>