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,99 @@
+---
+import Layout from "../../../layouts/Layout.astro";
+import type { Locale } from "../../../i18n/config";
+import { useTranslations } from "../../../i18n/ui";
+
+const lang: Locale = "ch";
+const t = useTranslations(lang);
+---
+<Layout title="Checkout" description="Bschtellig abschliesse bi Van's DIY & Bastelbedarf." lang={lang} path="/checkout/">
+  <section class="section-tight">
+    <div class="container">
+      <span class="eyebrow">{t.checkout.eyebrow}</span>
+      <h1>{t.checkout.title}</h1>
+      <p class="todo-note">{t.checkout.todoNote}</p>
+    </div>
+  </section>
+
+  <section class="section-tight">
+    <div class="container checkout-layout">
+      <form class="frm card" id="checkout-form">
+        <h3>{t.checkout.step1}</h3>
+        <div><label for="email">{t.checkout.email}</label><input id="email" type="email" required /></div>
+        <div class="grid grid-2">
+          <div><label for="vorname">{t.checkout.firstName}</label><input id="vorname" type="text" required /></div>
+          <div><label for="nachname">{t.checkout.lastName}</label><input id="nachname" type="text" required /></div>
+        </div>
+        <div><label for="strasse">{t.checkout.street}</label><input id="strasse" type="text" placeholder="Bahnhofstrasse 1" required /></div>
+        <div class="grid grid-2">
+          <div><label for="plz">{t.checkout.zip}</label><input id="plz" type="text" inputmode="numeric" maxlength="4" placeholder="8000" required /></div>
+          <div><label for="ort">{t.checkout.city}</label><input id="ort" type="text" placeholder="Zürich" required /></div>
+        </div>
+        <div>
+          <label for="land">{t.checkout.country}</label>
+          <select id="land">
+            <option selected>Schwiz</option>
+            <option>Dütschland</option>
+            <option>Öschterrych</option>
+            <option>Luxemburg</option>
+          </select>
+        </div>
+
+        <hr class="divider" />
+        <h3>{t.checkout.step2}</h3>
+        <div class="payment-options">
+          <label class="pay-option"><input type="radio" name="pay" value="paypal" checked /> PayPal</label>
+          <label class="pay-option"><input type="radio" name="pay" value="klarna" /> Klarna</label>
+          <label class="pay-option"><input type="radio" name="pay" value="ueberweisung" /> {t.checkout.bankTransfer}</label>
+        </div>
+
+        <hr class="divider" />
+        <h3>{t.checkout.step3}</h3>
+        <div id="checkout-summary" class="checkout-summary"></div>
+        <p class="small">{t.common.vatNote}</p>
+
+        <div class="checkbox-row">
+          <input id="agb" type="checkbox" required />
+          <label for="agb">{t.checkout.agbPrefix} <a href="/agb/">{t.checkout.agbLink}</a> {t.checkout.agbSuffix}</label>
+        </div>
+        <div class="checkbox-row">
+          <input id="widerruf" type="checkbox" required />
+          <label for="widerruf">{t.checkout.revocationPrefix} <a href="/widerruf/">{t.checkout.revocationLink}</a> {t.checkout.revocationAnd} <a href="/datenschutz/">{t.checkout.privacyLink}</a> {t.checkout.revocationSuffix}</label>
+        </div>
+
+        <button class="btn btn-primary btn-block" type="submit">{t.checkout.orderButton}</button>
+      </form>
+
+      <aside class="card checkout-aside">
+        <h3>{t.checkout.shippingHintTitle}</h3>
+        <p class="small">{t.checkout.shippingHint}</p>
+        <a class="small" href="/ch/versand-zahlung/">{t.checkout.shippingLink}</a>
+      </aside>
+    </div>
+  </section>
+</Layout>
+
+<script define:vars={{ freeLabel: t.checkout.free, totalLabel: t.checkout.total, shippingLabel: t.cart.shipping, emptyCartAlert: t.checkout.emptyCartAlert, thankYouPath: "/ch/checkout/danke/", checkoutLang: lang }}>
+  import { getCart, cartTotal } from "../../../scripts/cart";
+  import { formatPrice } from "../../../i18n/format";
+
+  const summary = document.getElementById("checkout-summary");
+  const cart = getCart();
+  const subtotal = cartTotal();
+  const shipping = cart.length === 0 ? 0 : subtotal >= 75 ? 0 : 4.95;
+
+  summary.innerHTML = `
+    ${cart.map((i) => `<div class="row"><span>${i.menge}× ${i.name}</span><span>${formatPrice(i.preis * i.menge, checkoutLang)}</span></div>`).join("")}
+    <div class="row"><span>${shippingLabel}</span><span>${shipping === 0 ? freeLabel : formatPrice(shipping, checkoutLang)}</span></div>
+    <div class="row total"><span>${totalLabel}</span><span>${formatPrice(subtotal + shipping, checkoutLang)}</span></div>
+  `;
+
+  document.getElementById("checkout-form").addEventListener("submit", (e) => {
+    e.preventDefault();
+    if (cart.length === 0) {
+      alert(emptyCartAlert);
+      return;
+    }
+    location.href = thankYouPath;
+  });
+</script>