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

Rabatt-System, größerer Mengen-Stepper, Zahlungsart zuerst, echte HasiDog-Inhalte

Browse Source 
- Neues Rabatt-System: Prozent-/Betrag-Rabatt mit optionalem Ablaufdatum,
  Mengenrabatt-Staffel pro Produkt, sowie site-weite Gutscheincodes.
  Wird live im Warenkorb/Checkout berechnet (src/data/rabatt.ts,
  src/data/gutscheine.ts, cart.ts) und ist im Adminbereich direkt unter dem
  Preis bearbeitbar (config.yml: "Rabatte" + neue Collection
  "Gutscheincodes"). Effektiver Preis + Rabatt-Badge auf Produktkarten und
  Produktseite sichtbar.
- Mengen-Stepper auf der Produktseite vergrößert (bereits vorbereitet,
  jetzt mit Build/Test verifiziert).
- Zahlungsart im Checkout auf Platz 1, mit markenfarbigen, fertig
  gestalteten Buttons (PayPal/Klarna/Banküberweisung).
- Unterkategorie-Seiten zeigen jetzt VanVans eigene Produktbeschreibung
  und das echte Fotos des Produkts statt Platzhaltertext, mit kleinem
  Link zur HasiDog-Universum-Seite statt großem Button.

Verifiziert per Puppeteer-Funktionstest gegen den echten Production-Build
(Rabatt-Berechnung, Mengenrabatt, Gutschein-Einlösung, Checkout-Summary,
keine Konsolenfehler).
This commit is contained in:
qcigano
2026-08-02 18:59:11 +02:00
parent 0f93ab73c3
commit 6f850181f1
25 changed files with 1098 additions and 194 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/styles/global.css
+94 -10
View File
@@ -768,10 +768,57 @@ a:focus-visible, button:focus-visible {
}
.thumb.product-photo:hover { box-shadow: 0 0 0 3px rgba(10, 9, 16, 0.6), 0 0 0 4px var(--c-accent); }
.badge-row { display: flex; gap: 0.5rem; margin-bottom: 0.8rem; flex-wrap: wrap; }
.price-row-detail { display: flex; align-items: baseline; gap: 0.8rem; margin-bottom: 0.2rem; }
.price-row-detail { display: flex; align-items: baseline; gap: 0.8rem; margin-bottom: 0.2rem; flex-wrap: wrap; }
.price-detail { font-size: 1.8rem; font-weight: 700; color: var(--c-accent); }
.qty-row { display: flex; align-items: center; gap: 0.8rem; margin: 1.4rem 0 0.5rem; }
.qty-row input { width: 4.5rem; padding: 0.6em; border-radius: var(--radius-s); border: 1px solid rgba(244,241,247,0.15); background: var(--c-anthracite); color: var(--c-text); }
.badge-rabatt { background: #ff5f7e; color: #fff; border-color: #ff5f7e; }
.mengenrabatt-list { list-style: none; margin: 0 0 1rem; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5em; }
.mengenrabatt-list li {
background: color-mix(in srgb, #ff5f7e 14%, transparent);
border: 1px solid color-mix(in srgb, #ff5f7e 35%, transparent);
color: #ff5f7e;
border-radius: var(--radius-s);
padding: 0.25em 0.6em;
font-weight: 600;
}
.qty-row { display: flex; align-items: center; gap: 1rem; margin: 1.4rem 0 0.5rem; }
/* Große, leicht zu treffende Mengen-Steuerung auf der Produktseite (ersetzt die winzigen
Browser-Standard-Pfeile eines <input type="number">). */
.qty-stepper {
display: flex;
align-items: center;
border: 1px solid rgba(244, 241, 247, 0.16);
border-radius: 999px;
background: var(--c-anthracite);
overflow: hidden;
}
.qty-stepper button {
width: 44px;
height: 44px;
border: none;
background: transparent;
color: var(--c-text);
font-size: 1.3rem;
line-height: 1;
cursor: pointer;
transition: background 0.15s var(--ease), color 0.15s var(--ease);
flex-shrink: 0;
}
.qty-stepper button:hover { background: color-mix(in srgb, var(--c-accent) 18%, transparent); color: var(--c-accent); }
.qty-stepper input {
width: 3rem;
height: 44px;
border: none;
background: transparent;
color: var(--c-text);
text-align: center;
font-size: 1.05rem;
font-weight: 700;
-moz-appearance: textfield;
}
.qty-stepper input::-webkit-outer-spin-button,
.qty-stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.qty-stepper input:focus { outline: none; }
.specs { margin-top: 1.5rem; }
.specs th { width: 40%; color: var(--c-text-muted); font-weight: 500; font-family: var(--font-body); }
@@ -874,6 +921,26 @@ a:focus-visible, button:focus-visible {
font-size: 0.85rem;
font-weight: 600;
}
.discount-row { color: #ff5f7e; font-weight: 600; }
.mengenrabatt-badge { color: #ff5f7e; font-weight: 600; margin-top: 0.15rem; }
.coupon-row { margin: 0.7rem 0; }
.coupon-row label { display: block; font-size: 0.85rem; color: var(--c-text-muted); margin-bottom: 0.35em; }
.coupon-input-group { display: flex; gap: 0.5em; }
.coupon-input-group input {
flex: 1;
min-width: 0;
background: var(--c-anthracite);
color: var(--c-text);
border: 1px solid rgba(244, 241, 247, 0.16);
border-radius: var(--radius-s);
padding: 0.5em 0.7em;
font-size: 0.88rem;
}
.coupon-input-group input:focus { outline: none; border-color: var(--c-accent); }
.btn-sm { padding: 0.5em 0.9em; font-size: 0.85rem; white-space: nowrap; }
#coupon-status { margin-top: 0.4em; color: var(--c-accent); }
#coupon-status a { color: var(--c-text-muted); margin-left: 0.5em; }
#coupon-status a:hover { color: var(--c-sale); }
@media (max-width: 800px) { .cart-layout { grid-template-columns: 1fr; } }
/* Checkout */
@@ -896,8 +963,24 @@ a:focus-visible, button:focus-visible {
background: var(--c-anthracite);
transition: border-color 0.2s var(--ease), background 0.2s var(--ease), box-shadow 0.2s var(--ease), transform 0.2s var(--ease);
}
.pay-option:hover { border-color: color-mix(in srgb, var(--c-accent) 45%, transparent); transform: translateY(-1px); }
.pay-option .pay-icon { font-size: 1.3rem; line-height: 1; flex-shrink: 0; }
.pay-option:hover { border-color: color-mix(in srgb, var(--brand-color, var(--c-accent)) 45%, transparent); transform: translateY(-1px); }
/* Icon-Badge im echten Markenlogo-Stil (farbige Kachel + Buchstabe/Symbol) statt schlichtem
Emoji — wirkt "fertig", nicht wie ein Platzhalter. */
.pay-option .pay-icon {
width: 34px;
height: 34px;
border-radius: 9px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.05rem;
font-weight: 800;
color: #fff;
line-height: 1;
flex-shrink: 0;
box-shadow: 0 2px 6px -2px rgba(0, 0, 0, 0.6);
}
.pay-option input[type="radio"] {
appearance: none;
width: 19px;
@@ -918,15 +1001,16 @@ a:focus-visible, button:focus-visible {
border-radius: 50%;
transform: scale(0);
transition: transform 0.15s var(--ease);
background: var(--c-accent);
background: var(--brand-color, var(--c-accent));
}
.pay-option input[type="radio"]:checked::before { transform: scale(1); }
.pay-option input[type="radio"]:checked { border-color: var(--c-accent); }
.pay-option input[type="radio"]:checked { border-color: var(--brand-color, var(--c-accent)); }
.pay-option:has(input:checked) {
border-color: var(--c-accent);
background: color-mix(in srgb, var(--c-accent) 9%, var(--c-anthracite));
box-shadow: 0 0 0 1px color-mix(in srgb, var(--c-accent) 45%, transparent), 0 4px 14px -6px color-mix(in srgb, var(--c-accent) 55%, transparent);
border-color: var(--brand-color, var(--c-accent));
background: color-mix(in srgb, var(--brand-color, var(--c-accent)) 12%, var(--c-anthracite));
box-shadow: 0 0 0 1px color-mix(in srgb, var(--brand-color, var(--c-accent)) 55%, transparent), 0 4px 14px -6px color-mix(in srgb, var(--brand-color, var(--c-accent)) 65%, transparent);
}
.pay-option:has(input:checked) span:not(.pay-icon) { 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); }
.checkout-summary .row.total { color: var(--c-text); font-weight: 700; font-size: 1.1rem; padding-top: 0.6rem; margin-top: 0.3rem; border-top: 1px solid rgba(244, 241, 247, 0.1); }